Bug 1552110 - Properly render values in the Security panel r=fvsch a=jcristau
authorJan Odvarko <odvarko@gmail.com>
Fri, 24 May 2019 13:01:01 +0000
changeset 536486 3455989277dc4d6c8d5fb6303d6076f333af624c
parent 536485 617d77613a30d7feab1621cd36cf6d29d8e08544
child 536487 fb23d87ad492d731511d436db7e446afea90b4ef
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch, jcristau
bugs1552110
milestone68.0
Bug 1552110 - Properly render values in the Security panel r=fvsch a=jcristau Differential Revision: https://phabricator.services.mozilla.com/D32324
devtools/client/netmonitor/src/components/SecurityPanel.js
devtools/client/netmonitor/test/browser_net_security-details.js
--- a/devtools/client/netmonitor/src/components/SecurityPanel.js
+++ b/devtools/client/netmonitor/src/components/SecurityPanel.js
@@ -15,17 +15,24 @@ const {
   fetchNetworkUpdatePacket,
   getUrlHost,
 } = require("../utils/request-utils");
 
 // Components
 const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const PropertiesView = createFactory(require("./PropertiesView"));
 
-const { div, input, span } = dom;
+loader.lazyGetter(this, "Rep", function() {
+  return require("devtools/client/shared/components/reps/reps").REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function() {
+  return require("devtools/client/shared/components/reps/reps").MODE;
+});
+
+const { div, span } = dom;
 const NOT_AVAILABLE = L10N.getStr("netmonitor.security.notAvailable");
 const ERROR_LABEL = L10N.getStr("netmonitor.security.error");
 const CIPHER_SUITE_LABEL = L10N.getStr("netmonitor.security.cipherSuite");
 const WARNING_CIPHER_LABEL = L10N.getStr("netmonitor.security.warning.cipher");
 const ENABLED_LABEL = L10N.getStr("netmonitor.security.enabled");
 const DISABLED_LABEL = L10N.getStr("netmonitor.security.disabled");
 const CONNECTION_LABEL = L10N.getStr("netmonitor.security.connection");
 const PROTOCOL_VERSION_LABEL = L10N.getStr("netmonitor.security.protocolVersion");
@@ -91,26 +98,25 @@ class SecurityPanel extends Component {
 
     // Hide object summary
     if (typeof member.value === "object") {
       return null;
     }
 
     return span({ className: "security-info-value" },
       member.name === ERROR_LABEL ?
-        // Display multiline text for security error
-        value
-        :
-        // Display one line selectable text for security details
-        input({
-          className: "textbox-input",
-          readOnly: "true",
-          value,
-        })
-      ,
+        // Display multiline text for security error for a label using a rep.
+        value : Rep(Object.assign(props, {
+          // FIXME: A workaround for the issue in StringRep
+          // Force StringRep to crop the text everytime
+          member: Object.assign({}, member, { open: false }),
+          mode: MODE.TINY,
+          cropLimit: 60,
+          noGrip: true,
+        })),
       weaknessReasons.includes("cipher") &&
       member.name === CIPHER_SUITE_LABEL ?
         // Display an extra warning icon after the cipher suite
         div({
           id: "security-warning-cipher",
           className: "security-warning-icon",
           title: WARNING_CIPHER_LABEL,
         })
--- a/devtools/client/netmonitor/test/browser_net_security-details.js
+++ b/devtools/client/netmonitor/test/browser_net_security-details.js
@@ -26,60 +26,61 @@ add_task(async function() {
 
   store.dispatch(Actions.toggleNetworkDetails());
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#security-tab"));
   await waitUntil(() => document.querySelector(
     "#security-panel .security-info-value"));
 
   const tabpanel = document.querySelector("#security-panel");
-  const textboxes = tabpanel.querySelectorAll(".textbox-input");
+  const textboxes = tabpanel.querySelectorAll(".security-info-value");
 
   // Connection
   // The protocol will be TLS but the exact version depends on which protocol
   // the test server example.com supports.
-  const protocol = textboxes[0].value;
+  const protocol = textboxes[0].textContent;
   ok(protocol.startsWith("TLS"), "The protocol " + protocol + " seems valid.");
 
   // The cipher suite used by the test server example.com might change at any
   // moment but all of them should start with "TLS_".
   // http://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml
-  const suite = textboxes[1].value;
+  const suite = textboxes[1].textContent;
   ok(suite.startsWith("TLS_"), "The suite " + suite + " seems valid.");
 
   // Host
   is(tabpanel.querySelectorAll(".treeLabel.objectLabel")[1].textContent,
      "Host example.com:",
      "Label has the expected value.");
   // These two values can change. So only check they're not empty.
-  ok(textboxes[2].value !== "", "Label value is not empty.");
-  ok(textboxes[3].value !== "", "Label value is not empty.");
-  is(textboxes[4].value, "Disabled", "Label has the expected value.");
-  is(textboxes[5].value, "Disabled", "Label has the expected value.");
+  ok(textboxes[2].textContent !== "", "Label value is not empty.");
+  ok(textboxes[3].textContent !== "", "Label value is not empty.");
+  is(textboxes[4].textContent, "Disabled", "Label has the expected value.");
+  is(textboxes[5].textContent, "Disabled", "Label has the expected value.");
 
   // Cert
-  is(textboxes[6].value, "example.com", "Label has the expected value.");
-  is(textboxes[7].value, "<Not Available>", "Label has the expected value.");
-  is(textboxes[8].value, "<Not Available>", "Label has the expected value.");
+  is(textboxes[6].textContent, "example.com", "Label has the expected value.");
+  is(textboxes[7].textContent, "<Not Available>", "Label has the expected value.");
+  is(textboxes[8].textContent, "<Not Available>", "Label has the expected value.");
 
-  is(textboxes[9].value, "Temporary Certificate Authority",
+  is(textboxes[9].textContent, "Temporary Certificate Authority",
      "Label has the expected value.");
-  is(textboxes[10].value, "Mozilla Testing", "Label has the expected value.");
-  is(textboxes[11].value, "Profile Guided Optimization", "Label has the expected value.");
+  is(textboxes[10].textContent, "Mozilla Testing", "Label has the expected value.");
+  is(textboxes[11].textContent, "Profile Guided Optimization",
+    "Label has the expected value.");
 
-  // Locale sensitive and varies between timezones. Cant't compare equality or
+  // Locale sensitive and varies between timezones. Can't compare equality or
   // the test fails depending on which part of the world the test is executed.
 
   // cert validity begins
-  isnot(textboxes[12].value, "", "Label was not empty.");
+  isnot(textboxes[12].textContent, "", "Label was not empty.");
   // cert validity expires
-  isnot(textboxes[13].value, "", "Label was not empty.");
+  isnot(textboxes[13].textContent, "", "Label was not empty.");
 
   // cert sha1 fingerprint
-  isnot(textboxes[14].value, "", "Label was not empty.");
+  isnot(textboxes[14].textContent, "", "Label was not empty.");
   // cert sha256 fingerprint
-  isnot(textboxes[15].value, "", "Label was not empty.");
+  isnot(textboxes[15].textContent, "", "Label was not empty.");
 
   // Certificate transparency
-  isnot(textboxes[16].value, "", "Label was not empty.");
+  isnot(textboxes[16].textContent, "", "Label was not empty.");
 
   await teardown(monitor);
 });