Bug 1499042 - Fix learn more links in the Network panel. r=Honza
authorJan Odvarko <odvarko@gmail.com>
Thu, 25 Oct 2018 16:30:05 +0200
changeset 499805 7e98f8ed12d4a3d9616f8a586041cd7b14963f83
parent 499804 265e49140f732f2884ceb888f504bd16d6a84c02
child 499806 52646a13f5de473e342c6c1ff2719137fcd43ac4
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1499042
milestone65.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 1499042 - Fix learn more links in the Network panel. r=Honza
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/components/HeadersPanel.js
devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
devtools/client/netmonitor/src/components/StatisticsPanel.js
devtools/client/netmonitor/src/components/TimingsPanel.js
devtools/client/netmonitor/src/utils/mdn-utils.js
devtools/client/netmonitor/test/unit/test_mdn-utils.js
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -313,16 +313,20 @@ charts.totalTransferredSize=Transferred 
 # LOCALIZATION NOTE (charts.cacheEnabled): This is the label displayed
 # in the performance analysis view for "cache enabled" charts.
 charts.cacheEnabled=Primed cache
 
 # LOCALIZATION NOTE (charts.cacheDisabled): This is the label displayed
 # in the performance analysis view for "cache disabled" charts.
 charts.cacheDisabled=Empty cache
 
+# LOCALIZATION NOTE (charts.learnMore): This is the label displayed
+# in the performance analysis view, with a link to external documentation.
+charts.learnMore=Learn more about performance analysis
+
 # LOCALIZATION NOTE (charts.totalSize): This is the label displayed
 # in the performance analysis view for total requests size, in kilobytes.
 charts.totalSize=Size: %S KB
 
 # LOCALIZATION NOTE (charts.totalSeconds): Semi-colon list of plural forms.
 # See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
 # This is the label displayed in the performance analysis view for the
 # total requests time, in seconds.
@@ -730,16 +734,20 @@ netmonitor.summary.address=Remote addres
 # LOCALIZATION NOTE (netmonitor.summary.status): This is the label displayed
 # in the network details headers tab identifying the status code.
 netmonitor.summary.status=Status code:
 
 # LOCALIZATION NOTE (netmonitor.summary.version): This is the label displayed
 # in the network details headers tab identifying the http version.
 netmonitor.summary.version=Version:
 
+# LOCALIZATION NOTE (netmonitor.summary.learnMore): This is the label displayed
+# in the network details headers tab, with a link to external documentation.
+netmonitor.summary.learnMore=Learn more about status code
+
 # LOCALIZATION NOTE (netmonitor.summary.editAndResend): This is the label displayed
 # on the button in the headers tab that opens a form to edit and resend the currently
 # displayed request
 netmonitor.summary.editAndResend=Edit and Resend
 
 # LOCALIZATION NOTE (netmonitor.summary.rawHeaders): This is the label displayed
 # on the button in the headers tab that toggle view for raw request/response headers
 # from the currently displayed request
@@ -799,16 +807,20 @@ netmonitor.timings.send=Sending:
 # in a "wait" state.
 netmonitor.timings.wait=Waiting:
 
 # LOCALIZATION NOTE (netmonitor.timings.receive): This is the label displayed
 # in the network details timings tab identifying the amount of time spent
 # in a "receive" state.
 netmonitor.timings.receive=Receiving:
 
+# LOCALIZATION NOTE (netmonitor.timings.learnMore): This is the label displayed
+# in the network details timings tab, with a link to external documentation
+netmonitor.timings.learnMore=Learn more about timings
+
 # LOCALIZATION NOTE (netmonitor.security.warning.cipher): A tooltip
 # for warning icon that indicates a connection uses insecure cipher suite.
 netmonitor.security.warning.cipher=The cipher used for encryption is deprecated and insecure.
 
 # LOCALIZATION NOTE (netmonitor.security.error): This is the label displayed
 # in the security tab if a security error prevented the connection.
 netmonitor.security.error=An error occurred:
 
--- a/devtools/client/netmonitor/src/components/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/HeadersPanel.js
@@ -50,16 +50,17 @@ const HEADERS_FILTER_TEXT = L10N.getStr(
 const REQUEST_HEADERS = L10N.getStr("requestHeaders");
 const REQUEST_HEADERS_FROM_UPLOAD = L10N.getStr("requestHeadersFromUpload");
 const RESPONSE_HEADERS = L10N.getStr("responseHeaders");
 const SUMMARY_ADDRESS = L10N.getStr("netmonitor.summary.address");
 const SUMMARY_METHOD = L10N.getStr("netmonitor.summary.method");
 const SUMMARY_URL = L10N.getStr("netmonitor.summary.url");
 const SUMMARY_STATUS = L10N.getStr("netmonitor.summary.status");
 const SUMMARY_VERSION = L10N.getStr("netmonitor.summary.version");
+const SUMMARY_STATUS_LEARN_MORE = L10N.getStr("netmonitor.summary.learnMore");
 
 /**
  * Headers panel component
  * Lists basic information about the request
  */
 class HeadersPanel extends Component {
   static get propTypes() {
     return {
@@ -227,16 +228,17 @@ class HeadersPanel extends Component {
             className: "tabpanel-summary-value textbox-input devtools-monospace"
               + " status-text",
             readOnly: true,
             value: `${statusText}`,
             size: `${inputWidth}`,
           }),
           statusCodeDocURL ? MDNLink({
             url: statusCodeDocURL,
+            title: SUMMARY_STATUS_LEARN_MORE,
           }) : span({
             className: "headers-summary learn-more-link",
           }),
           button({
             className: "devtools-button edit-and-resend-button",
             onClick: cloneSelectedRequest,
           }, EDIT_AND_RESEND),
           button({
--- a/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
+++ b/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
@@ -20,16 +20,17 @@ const RequestListHeader = createFactory(
 const { button, div, span } = dom;
 
 const RELOAD_NOTICE_1 = L10N.getStr("netmonitor.reloadNotice1");
 const RELOAD_NOTICE_2 = L10N.getStr("netmonitor.reloadNotice2");
 const RELOAD_NOTICE_3 = L10N.getStr("netmonitor.reloadNotice3");
 const PERFORMANCE_NOTICE_1 = L10N.getStr("netmonitor.perfNotice1");
 const PERFORMANCE_NOTICE_2 = L10N.getStr("netmonitor.perfNotice2");
 const PERFORMANCE_NOTICE_3 = L10N.getStr("netmonitor.perfNotice3");
+const PERFORMANCE_LEARN_MORE = L10N.getStr("charts.learnMore");
 
 /**
  * UI displayed when the request list is empty. Contains instructions on reloading
  * the page and on triggering performance analysis of the page.
  */
 class RequestListEmptyNotice extends Component {
   static get propTypes() {
     return {
@@ -61,17 +62,20 @@ class RequestListEmptyNotice extends Com
         span(null, PERFORMANCE_NOTICE_1),
         button({
           title: PERFORMANCE_NOTICE_3,
           className: "devtools-button requests-list-perf-notice-button",
           "data-standalone": true,
           onClick: this.props.onPerfClick,
         }),
         span(null, PERFORMANCE_NOTICE_2),
-        MDNLink({ url: getPerformanceAnalysisURL() })
+        MDNLink({
+          url: getPerformanceAnalysisURL(),
+          title: PERFORMANCE_LEARN_MORE,
+        })
       )
     );
   }
 }
 
 module.exports = connect(
   undefined,
   (dispatch, props) => ({
--- a/devtools/client/netmonitor/src/components/StatisticsPanel.js
+++ b/devtools/client/netmonitor/src/components/StatisticsPanel.js
@@ -24,16 +24,17 @@ const MDNLink = createFactory(require("d
 
 const { button, div } = dom;
 const MediaQueryList = window.matchMedia("(min-width: 700px)");
 
 const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200;
 const BACK_BUTTON = L10N.getStr("netmonitor.backButton");
 const CHARTS_CACHE_ENABLED = L10N.getStr("charts.cacheEnabled");
 const CHARTS_CACHE_DISABLED = L10N.getStr("charts.cacheDisabled");
+const CHARTS_LEARN_MORE = L10N.getStr("charts.learnMore");
 
 /*
  * Statistics panel component
  * Performance analysis tool which shows you how long the browser takes to
  * download the different parts of your site.
  */
 class StatisticsPanel extends Component {
   static get propTypes() {
@@ -120,17 +121,24 @@ class StatisticsPanel extends Component 
     }
 
     // MDNLink is a React component but Chart isn't.  To get the link
     // into the chart we mount a new ReactDOM at the appropriate
     // location after the chart has been created.
     const title = this.refs[chartId].querySelector(".table-chart-title");
     const containerNode = document.createElement("span");
     title.appendChild(containerNode);
-    ReactDOM.render(MDNLink({ url }), containerNode);
+
+    ReactDOM.render(
+      MDNLink({
+        url: url,
+        title: CHARTS_LEARN_MORE,
+      }),
+      containerNode
+    );
     this.mdnLinkContainerNodes.set(chartId, containerNode);
   }
 
   unmountMDNLinkContainers() {
     for (const [, node] of this.mdnLinkContainerNodes) {
       ReactDOM.unmountComponentAtNode(node);
     }
   }
--- a/devtools/client/netmonitor/src/components/TimingsPanel.js
+++ b/devtools/client/netmonitor/src/components/TimingsPanel.js
@@ -91,15 +91,16 @@ class TimingsPanel extends Component {
       );
     });
 
     return (
       div({ className: "panel-container" },
         timelines,
         MDNLink({
           url: getNetMonitorTimingsURL(),
+          title: L10N.getStr("netmonitor.timings.learnMore"),
         }),
       )
     );
   }
 }
 
 module.exports = TimingsPanel;
--- a/devtools/client/netmonitor/src/utils/mdn-utils.js
+++ b/devtools/client/netmonitor/src/utils/mdn-utils.js
@@ -187,35 +187,36 @@ function getHTTPStatusCodeURL(statusCode
 }
 
 /**
  * Get the MDN URL of the Timings tag for Network Monitor.
  *
  * @return {string} the MDN URL of the Timings tag for Network Monitor.
  */
 function getNetMonitorTimingsURL() {
-  return `${MDN_URL}Tools/Network_Monitor${getGAParams()}#Timings`;
+  return `${MDN_URL}Tools/Network_Monitor/request_details${getGAParams()}#Timings`;
 }
 
 /**
  * Get the MDN URL for Performance Analysis
  *
  * @return {string} The MDN URL for the documentation of Performance Analysis.
  */
 function getPerformanceAnalysisURL() {
-  return `${MDN_URL}Tools/Network_Monitor${getGAParams()}#Performance_analysis`;
+  return `${MDN_URL}Tools/Network_Monitor/Performance_analysis${getGAParams()}`;
 }
 
 /**
  * Get the MDN URL for Filter box
  *
  * @return {string} The MDN URL for the documentation of Filter box.
  */
 function getFilterBoxURL() {
-  return `${MDN_URL}Tools/Network_Monitor${getGAParams()}#Filtering_by_properties`;
+  return `${MDN_URL}Tools/Network_Monitor/request_list${getGAParams()}` +
+    `#Filtering_by_properties`;
 }
 
 module.exports = {
   getHeadersURL,
   getHTTPStatusCodeURL,
   getNetMonitorTimingsURL,
   getPerformanceAnalysisURL,
   getFilterBoxURL,
--- a/devtools/client/netmonitor/test/unit/test_mdn-utils.js
+++ b/devtools/client/netmonitor/test/unit/test_mdn-utils.js
@@ -13,28 +13,33 @@ function run_test() {
   const GTM_PARAMS_WC = "?utm_source=mozilla" +
     "&utm_medium=devtools-webconsole&utm_campaign=default";
 
   const {
     getHeadersURL,
     getHTTPStatusCodeURL,
     getNetMonitorTimingsURL,
     getPerformanceAnalysisURL,
+    getFilterBoxURL,
   } = require("devtools/client/netmonitor/src/utils/mdn-utils");
 
   info("Checking for supported headers");
   equal(getHeadersURL("Accept"), `${MDN_URL}Web/HTTP/Headers/Accept${GTM_PARAMS_NM}`);
   info("Checking for unsupported headers");
   equal(getHeadersURL("Width"), null);
 
   info("Checking for supported status code");
   equal(getHTTPStatusCodeURL("200", "webconsole"),
     `${MDN_URL}Web/HTTP/Status/200${GTM_PARAMS_WC}`);
   info("Checking for unsupported status code");
   equal(getHTTPStatusCodeURL("999", "webconsole"),
     `${MDN_URL}Web/HTTP/Status${GTM_PARAMS_WC}`);
 
   equal(getNetMonitorTimingsURL(),
-    `${MDN_URL}Tools/Network_Monitor${GTM_PARAMS_NM}#Timings`);
+    `${MDN_URL}Tools/Network_Monitor/request_details${GTM_PARAMS_NM}#Timings`);
 
   equal(getPerformanceAnalysisURL(),
-    `${MDN_URL}Tools/Network_Monitor${GTM_PARAMS_NM}#Performance_analysis`);
+    `${MDN_URL}Tools/Network_Monitor/Performance_analysis${GTM_PARAMS_NM}`);
+
+  equal(getFilterBoxURL(),
+    `${MDN_URL}Tools/Network_Monitor/request_list` +
+    `${GTM_PARAMS_NM}#Filtering_by_properties`);
 }