Bug 1552110 - Properly render values in the Security panel r=fvsch

Differential Revision: https://phabricator.services.mozilla.com/D32324

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/components/SecurityPanel.js

@@ -20,7 +20,14 @@ const {
 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");
@@ -96,16 +103,15 @@ class SecurityPanel extends Component {
 
     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

devtools/client/netmonitor/test/browser_net_security-details.js

@@ -31,18 +31,18 @@ add_task(async function() {
     "#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
@@ -50,36 +50,37 @@ add_task(async function() {
      "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);
 });