Bug 1337690 - Replace MDN link with an icon. r=ntim.
authorRuturaj K. Vartak <ruturaj@gmail.com>
Sun, 20 Aug 2017 11:20:26 +0200
changeset 649616 6251951d39e8f416058bccffedea652b73148f8c
parent 649615 29b8fd865a473cc4783bcd455b2d373d273d0363
child 649617 2f49d825c65183f66d49dc1ca5ba2e124d88356f
push id75073
push userbmo:mozilla@hocat.ca
push dateSun, 20 Aug 2017 22:21:51 +0000
reviewersntim
bugs1337690
milestone57.0a1
Bug 1337690 - Replace MDN link with an icon. r=ntim. MozReview-Commit-ID: PYn6vCfxx
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/mdn-link.js
devtools/client/netmonitor/test/browser_net_raw_headers.js
devtools/client/themes/images/help.svg
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -92,25 +92,31 @@ body,
   align-items: center;
 }
 
 .requests-list-filter-buttons {
   display: flex;
   flex-wrap: wrap;
 }
 
-.learn-more-link {
-  color: var(--theme-highlight-blue);
-  cursor: pointer;
-  margin: 0 5px;
-  white-space: nowrap;
+/* Learn more links */
+
+.learn-more-link::before {
+  background-image: url(chrome://devtools/skin/images/help.svg);
 }
 
-.learn-more-link:hover {
-  text-decoration: underline;
+.tree-container .treeTable tr .learn-more-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+}
+
+.tree-container .treeTable tr:not(:hover) .learn-more-link {
+  opacity: 0.1;
 }
 
 /* Status bar */
 
 .devtools-status-bar-label {
   flex: 0;
 }
 
@@ -851,16 +857,17 @@ body,
    * Therefore, we set height with this magic number in order to remove the
    * redundant scrollbar when source editor appears.
    */
   height: calc(100% - 4px);
 }
 
 .tree-container .treeTable tr {
   display: block;
+  position: relative;
 }
 
 /* Make right td fill available horizontal space */
 .tree-container .treeTable td:last-child {
   width: 100%;
 }
 
 .properties-view .devtools-searchbox,
@@ -980,20 +987,16 @@ body,
 .headers-summary .textbox-input {
   margin-inline-end: 2px;
 }
 
 .headers-summary .status-text {
     width: auto!important;
 }
 
-.headers-summary .learn-more-link {
-  flex-grow: 1;
-}
-
 /* Response tabpanel */
 
 .response-error-header {
   margin: 0;
   padding: 3px 8px;
   background-color: var(--theme-highlight-red);
   color: var(--theme-selection-color);
 }
--- a/devtools/client/netmonitor/src/components/mdn-link.js
+++ b/devtools/client/netmonitor/src/components/mdn-link.js
@@ -14,20 +14,20 @@ const { L10N } = require("../utils/l10n"
 
 const { a } = DOM;
 
 const LEARN_MORE = L10N.getStr("netmonitor.headers.learnMore");
 
 function MDNLink({ url }) {
   return (
     a({
-      className: "learn-more-link",
-      title: url,
+      className: "devtools-button learn-more-link",
+      title: LEARN_MORE,
       onClick: (e) => onLearnMoreClick(e, url),
-    }, `[${LEARN_MORE}]`)
+    })
   );
 }
 
 MDNLink.displayName = "MDNLink";
 
 MDNLink.propTypes = {
   url: PropTypes.string.isRequired,
 };
--- a/devtools/client/netmonitor/test/browser_net_raw_headers.js
+++ b/devtools/client/netmonitor/test/browser_net_raw_headers.js
@@ -27,17 +27,17 @@ add_task(function* () {
 
   wait = waitForDOM(document, ".headers-overview");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]);
   yield wait;
 
   wait = waitForDOM(document, ".raw-headers-container textarea", 2);
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelectorAll(".headers-summary .devtools-button")[1]);
+    document.querySelectorAll(".headers-summary .devtools-button")[2]);
   yield wait;
 
   testShowRawHeaders(getSortedRequests(store.getState()).get(0));
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelectorAll(".headers-summary .devtools-button")[1]);
 
   testHideRawHeaders(document);
--- a/devtools/client/themes/images/help.svg
+++ b/devtools/client/themes/images/help.svg
@@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <circle cx="12" cy="12" r="11" stroke-width="2" stroke="currentColor" fill="none"/>
-  <path d="M12.2,4.9c-1.6,0-2.9,0.4-3.8,0.8L9.2,8c0.6-0.4,1.5-0.6,2.2-0.6c1.1,0,1.6,0.5,1.6,1.2 c0,0.7-0.6,1.3-1.3,2.1c-1,1.1-1.4,2.1-1.3,3.2l0,0.5h3V14c0-0.9,0.3-1.7,1.2-2.5c0.9-0.9,1.9-1.9,1.9-3.4 C16.6,6.4,15.2,4.9,12.2,4.9z M12,16.1c-1.1,0-1.9,0.8-1.9,1.9c0,1.1,0.8,1.9,1.9,1.9c1.2,0,1.9-0.8,1.9-1.9 C13.9,16.9,13.1,16.1,12,16.1z"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zM8 3.125A2.7 2.7 0 0 0 5.125 6a.875.875 0 0 0 1.75 0c0-1 .6-1.125 1.125-1.125a1.105 1.105 0 0 1 1.13.744.894.894 0 0 1-.53 1.016A2.738 2.738 0 0 0 7.125 9v.337a.875.875 0 0 0 1.75 0v-.37a1.041 1.041 0 0 1 .609-.824A2.637 2.637 0 0 0 10.82 5.16 2.838 2.838 0 0 0 8 3.125zm0 7.625A1.25 1.25 0 1 0 9.25 12 1.25 1.25 0 0 0 8 10.75z"></path>
 </svg>