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 375815 6251951d39e8
parent 375814 29b8fd865a47
child 375816 2f49d825c651
push id93970
push userntim.bugs@gmail.com
push dateSun, 20 Aug 2017 09:21:14 +0000
treeherdermozilla-inbound@6251951d39e8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1337690
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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>