Bug 1236509 -Fixes inconsistency in network panel: connection is secure but displayed icon is the globe instead of the lock r=Honza
authorneha <ns19041997@gmail.com>
Wed, 01 May 2019 15:16:11 +0000
changeset 530938 c9f246ee7d19697e6492f490cad7e340812301c5
parent 530937 ad1c4dfe793c9ac49b511eb02cc3626e712677b6
child 530939 c0343b8814209d593d519f1571d2564014f8fdd4
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1236509
milestone68.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 1236509 -Fixes inconsistency in network panel: connection is secure but displayed icon is the globe instead of the lock r=Honza Differential Revision: https://phabricator.services.mozilla.com/D24320
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/components/RequestListColumnDomain.js
devtools/client/netmonitor/test/browser_net_security-state.js
devtools/client/themes/images/globe-small.svg
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -155,17 +155,16 @@ devtools.jar:
     skin/badge.css (themes/badge.css)
     skin/inspector.css (themes/inspector.css)
     skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
     skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)
     skin/images/debugging-tabs.svg (themes/images/debugging-tabs.svg)
     skin/images/debugging-workers.svg (themes/images/debugging-workers.svg)
     skin/images/datastore.svg (themes/images/datastore.svg)
     skin/images/globe.svg (themes/images/globe.svg)
-    skin/images/globe-small.svg (themes/images/globe-small.svg)
     skin/images/next.svg (themes/images/next.svg)
     skin/images/next-circle.svg (themes/images/next-circle.svg)
     skin/images/folder.svg (themes/images/folder.svg)
     skin/images/sad-face.svg (themes/images/sad-face.svg)
     skin/images/shape-swatch.svg (themes/images/shape-swatch.svg)
     skin/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
     skin/images/tool-debugger.svg (themes/images/tool-debugger.svg)
     skin/images/tool-inspector.svg (themes/images/tool-inspector.svg)
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -290,20 +290,16 @@
 .security-state-weak {
   background-image: url(chrome://devtools/skin/images/security-state-weak.svg);
 }
 
 .security-state-broken {
   background-image: url(chrome://devtools/skin/images/security-state-broken.svg);
 }
 
-.security-state-local {
-  background-image: url(chrome://devtools/skin/images/globe-small.svg);
-}
-
 .tracking-resource {
   display: inline-block;
   width: 16px;
   height: 16px;
   margin: 0 3px 0 -3px;
   vertical-align: middle;
   background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
   background-repeat: no-repeat;
--- a/devtools/client/netmonitor/src/components/RequestListColumnDomain.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnDomain.js
@@ -35,22 +35,27 @@ class RequestListColumnDomain extends Co
     const { item, onSecurityIconMouseDown } = this.props;
     const { remoteAddress, remotePort, securityState,
       urlDetails: { host, isLocal } } = item;
     const iconClassList = ["requests-security-state-icon"];
     let iconTitle;
     const title = host + (remoteAddress ?
       ` (${getFormattedIPAndPort(remoteAddress, remotePort)})` : "");
 
+    let realSecurityState = securityState;
+
+    // Locally delivered files such as http://localhost and file:// paths
+    // are considered to have been delivered securely.
     if (isLocal) {
-      iconClassList.push("security-state-local");
-      iconTitle = L10N.getStr("netmonitor.security.state.secure");
-    } else if (securityState) {
-      iconClassList.push(`security-state-${securityState}`);
-      iconTitle = L10N.getStr(`netmonitor.security.state.${securityState}`);
+      realSecurityState = "secure";
+    }
+
+    if (realSecurityState) {
+      iconClassList.push(`security-state-${realSecurityState}`);
+      iconTitle = L10N.getStr(`netmonitor.security.state.${realSecurityState}`);
     }
 
     return (
       dom.td({ className: "requests-list-column requests-list-domain", title },
         div({
           className: iconClassList.join(" "),
           onMouseDown: onSecurityIconMouseDown,
           title: iconTitle,
--- a/devtools/client/netmonitor/test/browser_net_security-state.js
+++ b/devtools/client/netmonitor/test/browser_net_security-state.js
@@ -8,35 +8,39 @@
  * state.
  */
 
 add_task(async function() {
   const EXPECTED_SECURITY_STATES = {
     "test1.example.com": "security-state-insecure",
     "example.com": "security-state-secure",
     "nocert.example.com": "security-state-broken",
-    "localhost": "security-state-local",
+    "localhost": "security-state-secure",
   };
 
   const { tab, monitor } = await initNetMonitor(CUSTOM_GET_URL);
   const { document, store, windowRequire } = monitor.panelWin;
   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   await performRequests();
 
   for (const subitemNode of Array.from(document.querySelectorAll(
-    "requests-list-column.requests-list-security-and-domain"))) {
-    const domain = subitemNode.querySelector(".requests-list-domain").textContent;
+    ".requests-list-column.requests-list-domain"))) {
+    // Skip header
+    const icon = subitemNode.querySelector(".requests-security-state-icon");
+    if (!icon) {
+      continue;
+    }
 
+    const domain = subitemNode.textContent;
     info("Found a request to " + domain);
-    ok(domain in EXPECTED_SECURITY_STATES, "Domain " + domain + " was expected.");
 
-    const classes = subitemNode.querySelector(".requests-security-state-icon").classList;
+    const classes = icon.classList;
     const expectedClass = EXPECTED_SECURITY_STATES[domain];
 
     info("Classes of security state icon are: " + classes);
     info("Security state icon is expected to contain class: " + expectedClass);
     ok(classes.contains(expectedClass), "Icon contained the correct class name.");
   }
 
   return teardown(monitor);
deleted file mode 100644
--- a/devtools/client/themes/images/globe-small.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- 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" viewBox="0 0 12 12" width="12" height="12">
-  <path fill="context-fill" d="M6 1a5 5 0 1 0 0 10A5 5 0 0 0 6 1zM0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6zM1 4h10v1H1V4zM1 7h10v1H1V7z"/>
-  <path fill="context-fill" fill-rule="evenodd" d="M7.23 9.8C7.69 8.88 8 7.54 8 6s-.31-2.88-.77-3.8C6.73 1.23 6.25 1 6 1s-.74.23-1.23 1.2A8.74 8.74 0 0 0 4 6c0 1.54.31 2.88.77 3.8.5.97.98 1.2 1.23 1.2s.74-.23 1.23-1.2zM6 12c1.66 0 3-2.69 3-6S7.66 0 6 0 3 2.69 3 6s1.34 6 3 6z"/>
-</svg>