Bug 1631302 - Quick UX refactor of the header sections r=Honza
authorHubert Boma Manilla <hmanilla@mozilla.com>
Tue, 05 May 2020 13:16:15 +0000
changeset 528219 2082bf0cc79578abbb042f6f4be1bf48f5e98663
parent 528218 acdd252c621956a5d15ce20dc866780307bcfba0
child 528220 d3b0b878f7c1a2e758dda0953c19ab9831e694c1
push id37383
push userrgurzau@mozilla.com
push dateWed, 06 May 2020 09:37:16 +0000
treeherdermozilla-central@1fa1d4f4b0e2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1631302
milestone78.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 1631302 - Quick UX refactor of the header sections r=Honza Included in this patch - Reduced the size of the raw header toggles from 16px to 12px - The raw header toggles when the "Raw" label is clicked - The label has changed for "Raw headers" to "Raw" as recommende by the UX designs - Changed the Title text color of the headers accordion to make it lighter - Disabled the input boxes when property values are selected - Changed the color of the property values Todo (in a different patch) - Show learn more and copy icons on hover - No warning icons Differential Revision: https://phabricator.services.mozilla.com/D73230
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -1023,20 +1023,20 @@ netmonitor.summary.learnMore=Learn more 
 # in the network details headers tab identifying the referrer policy.
 netmonitor.summary.referrerPolicy=Referrer Policy:
 
 # 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
+# LOCALIZATION NOTE (netmonitor.headers.raw): 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
-netmonitor.summary.rawHeaders=Raw Headers
+netmonitor.headers.raw=Raw
 
 # LOCALIZATION NOTE (netmonitor.response.name): This is the label displayed
 # in the network details response tab identifying an image's file name.
 netmonitor.response.name=Name:
 
 # LOCALIZATION NOTE (netmonitor.response.dimensions): This is the label displayed
 # in the network details response tab identifying an image's dimensions.
 netmonitor.response.dimensions=Dimensions:
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
@@ -308,26 +308,32 @@
 }
 
 .network-monitor .raw-headers-toggle {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
+  cursor: pointer;
+}
+
+.network-monitor .accordion-header-label {
+  color: var(--theme-icon-dimmed-color)
 }
 
 .network-monitor .raw-headers-toggle .headers-summary-label {
   color: var(--theme-toolbar-color);
 }
 
 .network-monitor .raw-headers-toggle-input > input {
   display: inline-block;
   width: 2em;
   vertical-align: bottom;
+  font-size: 12px;
 }
 
 .network-monitor .properties-view .tree-container .treeTable .treeValueCell .devtools-checkbox-toggle {
   margin-block: 2px;
 }
 
 .network-monitor .properties-view .raw-headers-container .raw-headers {
   display: block;
@@ -335,16 +341,24 @@
   width: 100%;
   padding: 2px 12px;
   white-space: pre;
   overflow-wrap: normal;
   overflow-x: auto;
   border: none;
 }
 
+.network-monitor .accordion-item .treeTable .objectBox-string {
+  color: var(--theme-body-color);
+}
+
+.network-monitor .accordion-item .treeTable tr.treeRow.selected .objectBox-string {
+  color: var(--theme-selection-color);
+}
+
 .network-monitor .properties-view .raw-headers-container td {
   display: block;
 }
 
 .network-monitor .properties-view .raw-headers-container textarea {
   width: 100%;
   font-family: var(--monospace-font-family);
   font-size: var(--theme-body-font-size);
--- a/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
@@ -69,17 +69,17 @@ loader.lazyRequireGetter(
   "devtools/client/shared/components/menu/utils",
   true
 );
 
 const { button, div, input, label, span, textarea, tr, td } = dom;
 
 const RESEND = L10N.getStr("netmonitor.context.resend.label");
 const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
-const RAW_HEADERS = L10N.getStr("netmonitor.summary.rawHeaders");
+const RAW_HEADERS = L10N.getStr("netmonitor.headers.raw");
 const HEADERS_EMPTY_TEXT = L10N.getStr("headersEmptyText");
 const HEADERS_FILTER_TEXT = L10N.getStr("headersFilterText");
 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");
@@ -362,27 +362,32 @@ class HeadersPanel extends Component {
     }
 
     return TreeRow(props);
   }
 
   renderRawHeadersBtn(key, checked, onChange) {
     return [
       label(
-        { key: `${key}RawHeadersBtn`, className: "raw-headers-toggle" },
+        {
+          key: `${key}RawHeadersBtn`,
+          className: "raw-headers-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
         span({ className: "headers-summary-label" }, RAW_HEADERS),
-        div(
+        span(
           { className: "raw-headers-toggle-input" },
           input({
+            id: `raw-${key}-checkbox`,
             checked,
             className: "devtools-checkbox-toggle",
-            onClick: event => {
-              // stop the header click event
-              event.stopPropagation();
-            },
             onChange,
             type: "checkbox",
           })
         )
       ),
     ];
   }
 
@@ -500,16 +505,17 @@ class HeadersPanel extends Component {
           object: this.getProperties(responseHeaders, RESPONSE_HEADERS),
           filterText,
           targetSearchResult,
           renderRow: this.renderRow,
           renderValue: this.renderValue,
           provider: HeadersProvider,
           selectPath: this.getTargetHeaderPath,
           defaultSelectFirstNode: false,
+          enableInput: false,
         },
         header: this.getHeadersTitle(responseHeaders, RESPONSE_HEADERS),
         buttons: this.renderRawHeadersBtn(
           "response",
           rawResponseHeadersOpened,
           this.toggleRawResponseHeaders
         ),
         id: "responseHeaders",
@@ -526,16 +532,17 @@ class HeadersPanel extends Component {
           object: this.getProperties(requestHeaders, REQUEST_HEADERS),
           filterText,
           targetSearchResult,
           renderRow: this.renderRow,
           renderValue: this.renderValue,
           provider: HeadersProvider,
           selectPath: this.getTargetHeaderPath,
           defaultSelectFirstNode: false,
+          enableInput: false,
         },
         header: this.getHeadersTitle(requestHeaders, REQUEST_HEADERS),
         buttons: this.renderRawHeadersBtn(
           "request",
           rawRequestHeadersOpened,
           this.toggleRawRequestHeaders
         ),
         id: "requestHeaders",
@@ -558,16 +565,17 @@ class HeadersPanel extends Component {
           ),
           filterText,
           targetSearchResult,
           renderRow: this.renderRow,
           renderValue: this.renderValue,
           provider: HeadersProvider,
           selectPath: this.getTargetHeaderPath,
           defaultSelectFirstNode: false,
+          enableInput: false,
         },
         header: this.getHeadersTitle(
           uploadHeaders,
           REQUEST_HEADERS_FROM_UPLOAD
         ),
         buttons: this.renderRawHeadersBtn(
           "upload",
           rawUploadHeadersOpened,