Bug 1123952 - Make values copyable in the netmonitor security tab. r=vporof
authorSami Jaktholm <sjakthol@outlook.com>
Sun, 15 Feb 2015 13:22:37 +0200
changeset 257368 e380f4372610a2b80ff7ca1bff26b97911ce299d
parent 257367 3310c245055340b619a6a8d8bb4593f828588143
child 257369 951a9f999db4f70c7e3d11cd254ced863118d0f9
push id4610
push userjlund@mozilla.com
push dateMon, 30 Mar 2015 18:32:55 +0000
treeherdermozilla-beta@4df54044d9ef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1123952
milestone38.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 1123952 - Make values copyable in the netmonitor security tab. r=vporof
browser/devtools/netmonitor/netmonitor-view.js
browser/devtools/netmonitor/netmonitor.css
browser/devtools/netmonitor/netmonitor.xul
browser/devtools/netmonitor/test/browser_net_security-error.js
browser/themes/shared/devtools/netmonitor.inc.css
--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -2738,31 +2738,32 @@ NetworkDetailsView.prototype = {
       //    we shouldn't be here.
       // 2) We have already received securityState and the tab is visible BUT
       //    the rest of the information is still on its way. Once it arrives
       //    this method is called again.
       return;
     }
 
     /**
-     * A helper that sets label text to specified value.
+     * A helper that sets value and tooltiptext attributes of an element to
+     * specified value.
      *
      * @param string selector
-     *        A selector for the label.
+     *        A selector for the element.
      * @param string value
-     *        The value label should have. If this evaluates to false a
-     *        placeholder string <Not Available> is used instead.
+     *        The value to set. If this evaluates to false a placeholder string
+     *        <Not Available> is used instead.
      */
-    function setLabel(selector, value) {
+    function setValue(selector, value) {
       let label = $(selector);
       if (!value) {
-        label.value = L10N.getStr("netmonitor.security.notAvailable");
-        label.setAttribute("tooltiptext", label.value);
+        label.setAttribute("value", L10N.getStr("netmonitor.security.notAvailable"));
+        label.setAttribute("tooltiptext", label.getAttribute("value"));
       } else {
-        label.value = value;
+        label.setAttribute("value", value);
         label.setAttribute("tooltiptext", value);
       }
     }
 
     let errorbox = $("#security-error");
     let infobox = $("#security-information");
 
     if (securityInfo.state === "secure" || securityInfo.state === "weak") {
@@ -2780,53 +2781,53 @@ NetworkDetailsView.prototype = {
         cipher.hidden = true;
         sslv3.hidden = true;
       }
 
       let enabledLabel = L10N.getStr("netmonitor.security.enabled");
       let disabledLabel = L10N.getStr("netmonitor.security.disabled");
 
       // Connection parameters
-      setLabel("#security-protocol-version-value", securityInfo.protocolVersion);
-      setLabel("#security-ciphersuite-value", securityInfo.cipherSuite);
+      setValue("#security-protocol-version-value", securityInfo.protocolVersion);
+      setValue("#security-ciphersuite-value", securityInfo.cipherSuite);
 
       // Host header
       let domain = NetMonitorView.RequestsMenu._getUriHostPort(url);
       let hostHeader = L10N.getFormatStr("netmonitor.security.hostHeader", domain);
-      setLabel("#security-info-host-header", hostHeader);
+      setValue("#security-info-host-header", hostHeader);
 
       // Parameters related to the domain
-      setLabel("#security-http-strict-transport-security-value",
+      setValue("#security-http-strict-transport-security-value",
                 securityInfo.hsts ? enabledLabel : disabledLabel);
 
-      setLabel("#security-public-key-pinning-value",
+      setValue("#security-public-key-pinning-value",
                 securityInfo.hpkp ? enabledLabel : disabledLabel);
 
       // Certificate parameters
       let cert = securityInfo.cert;
-      setLabel("#security-cert-subject-cn", cert.subject.commonName);
-      setLabel("#security-cert-subject-o", cert.subject.organization);
-      setLabel("#security-cert-subject-ou", cert.subject.organizationalUnit);
-
-      setLabel("#security-cert-issuer-cn", cert.issuer.commonName);
-      setLabel("#security-cert-issuer-o", cert.issuer.organization);
-      setLabel("#security-cert-issuer-ou", cert.issuer.organizationalUnit);
-
-      setLabel("#security-cert-validity-begins", cert.validity.start);
-      setLabel("#security-cert-validity-expires", cert.validity.end);
-
-      setLabel("#security-cert-sha1-fingerprint", cert.fingerprint.sha1);
-      setLabel("#security-cert-sha256-fingerprint", cert.fingerprint.sha256);
+      setValue("#security-cert-subject-cn", cert.subject.commonName);
+      setValue("#security-cert-subject-o", cert.subject.organization);
+      setValue("#security-cert-subject-ou", cert.subject.organizationalUnit);
+
+      setValue("#security-cert-issuer-cn", cert.issuer.commonName);
+      setValue("#security-cert-issuer-o", cert.issuer.organization);
+      setValue("#security-cert-issuer-ou", cert.issuer.organizationalUnit);
+
+      setValue("#security-cert-validity-begins", cert.validity.start);
+      setValue("#security-cert-validity-expires", cert.validity.end);
+
+      setValue("#security-cert-sha1-fingerprint", cert.fingerprint.sha1);
+      setValue("#security-cert-sha256-fingerprint", cert.fingerprint.sha256);
     } else {
       infobox.hidden = true;
       errorbox.hidden = false;
 
       // Strip any HTML from the message.
       let plain = DOMParser.parseFromString(securityInfo.errorMessage, "text/html");
-      $("#security-error-message").textContent = plain.body.textContent;
+      setValue("#security-error-message", plain.body.textContent);
     }
   }),
 
   _dataSrc: null,
   _headers: null,
   _cookies: null,
   _params: null,
   _json: null,
--- a/browser/devtools/netmonitor/netmonitor.css
+++ b/browser/devtools/netmonitor/netmonitor.css
@@ -23,17 +23,17 @@
 #timings-summary-blocked {
   display: none; /* This doesn't work yet. */
 }
 
 #network-statistics-charts {
   overflow: auto;
 }
 
-#headers-summary-url-value .textbox-input {
+.cropped-textbox .textbox-input {
   /* workaround for textbox not supporting the @crop attribute */
   text-overflow: ellipsis;
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #toolbar-spacer,
   #details-pane-toggle,
--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@@ -295,17 +295,17 @@
                         class="tabpanel-content">
                 <vbox flex="1">
                   <hbox id="headers-summary-url"
                         class="tabpanel-summary-container"
                         align="center">
                     <label class="plain tabpanel-summary-label"
                            value="&netmonitorUI.summary.url;"/>
                     <textbox id="headers-summary-url-value"
-                             class="plain tabpanel-summary-value devtools-monospace"
+                             class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
                              flex="1"
                              readonly="true"/>
                   </hbox>
                   <hbox id="headers-summary-method"
                         class="tabpanel-summary-container"
                         align="center">
                     <label class="plain tabpanel-summary-label"
                            value="&netmonitorUI.summary.method;"/>
@@ -483,77 +483,84 @@
               </tabpanel>
               <tabpanel id="security-tabpanel"
                         class="tabpanel-content">
                   <vbox id="security-error"
                         class="tabpanel-summary-container"
                         flex="1">
                     <label class="plain tabpanel-summary-label"
                            value="&netmonitorUI.security.error;"/>
-                    <description id="security-error-message" flex="1"/>
+                    <hbox class="security-info-section"
+                          flex="1">
+                      <textbox id="security-error-message"
+                               class="plain"
+                               flex="1"
+                               multiline="true"
+                               readonly="true"/>
+                    </hbox>
                   </vbox>
                   <vbox id="security-information"
                         flex="1">
                     <vbox id="security-info-connection"
                           class="tabpanel-summary-container">
                       <label class="plain tabpanel-summary-label"
                              value="&netmonitorUI.security.connection;"/>
                       <vbox class="security-info-section">
                         <hbox id="security-protocol-version"
                               class="tabpanel-summary-container"
                               align="baseline">
                           <label class="plain tabpanel-summary-label"
                                  value="&netmonitorUI.security.protocolVersion;"/>
-                          <label id="security-protocol-version-value"
-                                 class="plain tabpanel-summary-value devtools-monospace"
-                                 crop="end"
-                                 flex="1"/>
+                          <textbox id="security-protocol-version-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
                           <image class="security-warning-icon"
                                  id="security-warning-sslv3"
                                  tooltiptext="&netmonitorUI.security.warning.sslv3;" />
                         </hbox>
                         <hbox id="security-ciphersuite"
                               class="tabpanel-summary-container"
                               align="baseline">
                           <label class="plain tabpanel-summary-label"
                                  value="&netmonitorUI.security.cipherSuite;"/>
-                          <label id="security-ciphersuite-value"
-                                 class="plain tabpanel-summary-value devtools-monospace"
-                                 crop="end"
-                                 flex="1"/>
+                          <textbox id="security-ciphersuite-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
                           <image class="security-warning-icon"
                                  id="security-warning-cipher"
                                  tooltiptext="&netmonitorUI.security.warning.cipher;" />
                         </hbox>
                       </vbox>
                     </vbox>
                     <vbox id="security-info-domain"
                           class="tabpanel-summary-container">
                       <label class="plain tabpanel-summary-label"
                              id="security-info-host-header"/>
                       <vbox class="security-info-section">
                         <hbox id="security-http-strict-transport-security"
                               class="tabpanel-summary-container"
                               align="baseline">
                           <label class="plain tabpanel-summary-label"
                                  value="&netmonitorUI.security.hsts;"/>
-                          <label id="security-http-strict-transport-security-value"
-                                 class="plain tabpanel-summary-value devtools-monospace"
-                                 crop="end"
-                                 flex="1"/>
+                          <textbox id="security-http-strict-transport-security-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
                         </hbox>
                         <hbox id="security-public-key-pinning"
                               class="tabpanel-summary-container"
                               align="baseline">
                           <label class="plain tabpanel-summary-label"
                                  value="&netmonitorUI.security.hpkp;"/>
-                          <label id="security-public-key-pinning-value"
-                                 class="plain tabpanel-summary-value devtools-monospace"
-                                 crop="end"
-                                 flex="1"/>
+                          <textbox id="security-public-key-pinning-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
                         </hbox>
                       </vbox>
                     </vbox>
                     <vbox id="security-info-certificate"
                           class="tabpanel-summary-container">
                         <label class="plain tabpanel-summary-label"
                                value="&netmonitorUI.security.certificate;"/>
                       <vbox class="security-info-section">
@@ -561,119 +568,119 @@
                           <label class="plain tabpanel-summary-label"
                                  value="&certmgr.subjectinfo.label;" flex="1"/>
                         </vbox>
                         <vbox class="security-info-section">
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.cn;:"/>
-                            <label id="security-cert-subject-cn"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-subject-cn"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.o;:"/>
-                            <label id="security-cert-subject-o"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-subject-o"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.ou;:"/>
-                            <label id="security-cert-subject-ou"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-subject-ou"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                         </vbox>
                         <vbox class="tabpanel-summary-container">
                           <label class="plain tabpanel-summary-label"
                                  value="&certmgr.issuerinfo.label;" flex="1"/>
                         </vbox>
                         <vbox class="security-info-section">
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.cn;:"/>
-                            <label id="security-cert-issuer-cn"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-issuer-cn"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.o;:"/>
-                            <label id="security-cert-issuer-o"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-issuer-o"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.ou;:"/>
-                            <label id="security-cert-issuer-ou"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-issuer-ou"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                         </vbox>
                         <vbox class="tabpanel-summary-container">
                           <label class="plain tabpanel-summary-label"
                                  value="&certmgr.periodofvalidity.label;" flex="1"/>
                         </vbox>
                         <vbox class="security-info-section">
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.begins;:"/>
-                            <label id="security-cert-validity-begins"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-validity-begins"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.expires;:"/>
-                            <label id="security-cert-validity-expires"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-validity-expires"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                         </vbox>
                         <vbox class="tabpanel-summary-container">
                           <label class="plain tabpanel-summary-label"
                                  value="&certmgr.fingerprints.label;" flex="1"/>
                         </vbox>
                         <vbox class="security-info-section">
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.sha256fingerprint;:"/>
-                            <label id="security-cert-sha256-fingerprint"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-sha256-fingerprint"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                           <hbox class="tabpanel-summary-container"
                                 align="baseline">
                             <label class="plain tabpanel-summary-label"
                                    value="&certmgr.certdetail.sha1fingerprint;:"/>
-                            <label id="security-cert-sha1-fingerprint"
-                                   class="plain tabpanel-summary-value devtools-monospace"
-                                   crop="end"
-                                   flex="1"/>
+                            <textbox id="security-cert-sha1-fingerprint"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
                           </hbox>
                         </vbox>
                       </vbox>
                     </vbox>
                   </vbox>
               </tabpanel>
               <tabpanel id="preview-tabpanel"
                         class="tabpanel-content">
--- a/browser/devtools/netmonitor/test/browser_net_security-error.js
+++ b/browser/devtools/netmonitor/test/browser_net_security-error.js
@@ -32,17 +32,17 @@ add_task(function* () {
 
   let errorbox = $("#security-error");
   let errormsg = $("#security-error-message");
   let infobox = $("#security-information");
 
   is(errorbox.hidden, false, "Error box is visble.");
   is(infobox.hidden, true, "Information box is hidden.");
 
-  isnot(errormsg.textContent, "", "Error message is not empty.");
+  isnot(errormsg.value, "", "Error message is not empty.");
 
   yield teardown(monitor);
 
   /**
    * Returns a promise that's resolved once a request with security issues is
    * completed.
    */
   function waitForSecurityBrokenNetworkEvent() {
--- a/browser/themes/shared/devtools/netmonitor.inc.css
+++ b/browser/themes/shared/devtools/netmonitor.inc.css
@@ -574,20 +574,16 @@ label.requests-menu-status-code {
 .security-info-section {
   -moz-padding-start: 1em;
 }
 
 #security-tabpanel {
   overflow: auto;
 }
 
-#security-error-message {
-  white-space: pre-wrap;
-}
-
 .security-warning-icon {
   background-image: url(alerticon-warning.png);
   background-size: 13px 12px;
   -moz-margin-start: 5px;
   vertical-align: top;
   width: 13px;
   height: 12px;
 }