Bug 1493931 - Changes to styling of custom request panel of Network panel in DevTools. Fixing issues with previous patch. r=Honza
authorAdam Holm <asorholm@email.arizona.edu>
Fri, 02 Nov 2018 14:46:25 -0700
changeset 444374 cab406acd52e68de2b5da39eaf6f64a0ec71b060
parent 444373 8a8d48322a17436f24dac801a0716985c2e0b961
child 444375 01b36611ff72ca54c90797faea5270975f98f019
push id109574
push usercsabou@mozilla.com
push dateMon, 05 Nov 2018 11:18:56 +0000
treeherdermozilla-inbound@cab406acd52e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1493931
milestone65.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 1493931 - Changes to styling of custom request panel of Network panel in DevTools. Fixing issues with previous patch. r=Honza
devtools/client/jar.mn
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/CustomRequestPanel.js
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -272,16 +272,17 @@ devtools.jar:
     skin/images/debugger/tab.svg (themes/images/debugger/tab.svg)
     skin/images/debugger/typescript.svg (themes/images/debugger/typescript.svg)
     skin/images/debugger/vuejs.svg (themes/images/debugger/vuejs.svg)
 
     # Netmonitor
     content/netmonitor/src/assets/styles/httpi.css (netmonitor/src/assets/styles/httpi.css)
     content/netmonitor/src/assets/styles/netmonitor.css (netmonitor/src/assets/styles/netmonitor.css)
     content/netmonitor/src/assets/styles/NetworkDetailsPanel.css (netmonitor/src/assets/styles/NetworkDetailsPanel.css)
+    content/netmonitor/src/assets/styles/CustomRequestPanel.css (netmonitor/src/assets/styles/CustomRequestPanel.css)
     content/netmonitor/src/assets/styles/RequestList.css (netmonitor/src/assets/styles/RequestList.css)
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
     content/netmonitor/src/assets/icons/shield.svg (netmonitor/src/assets/icons/shield.svg)
     content/netmonitor/index.html (netmonitor/index.html)
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -1048,27 +1048,35 @@ netmonitor.context.perfTools=Start Performance Analysis…
 # LOCALIZATION NOTE (netmonitor.context.perfTools.accesskey): This is the access key
 # for the performance analysis menu item displayed in the context menu for a request
 netmonitor.context.perfTools.accesskey=A
 
 # LOCALIZATION NOTE (netmonitor.custom.newRequest): This is the label displayed
 # as the title of the new custom request form
 netmonitor.custom.newRequest=New Request
 
+# LOCALIZATION NOTE (netmonitor.custom.newRequestMethodLabel): This is the label displayed
+# above the method text input field of the new custom request form
+netmonitor.custom.newRequestMethodLabel=Method
+
+# LOCALIZATION NOTE (netmonitor.custom.newRequestUrlLabel): This is the label displayed
+# above the url text input field of the new custom request form
+netmonitor.custom.newRequestUrlLabel=URL
+
 # LOCALIZATION NOTE (netmonitor.custom.query): This is the label displayed
 # above the query string entry in the custom request form
-netmonitor.custom.query=Query String:
+netmonitor.custom.query=Query String
 
 # LOCALIZATION NOTE (netmonitor.custom.headers): This is the label displayed
 # above the request headers entry in the custom request form
-netmonitor.custom.headers=Request Headers:
+netmonitor.custom.headers=Request Headers
 
 # LOCALIZATION NOTE (netmonitor.custom.postData): This is the label displayed
 # above the request body entry in the custom request form
-netmonitor.custom.postData=Request Body:
+netmonitor.custom.postData=Request Body
 
 # LOCALIZATION NOTE (netmonitor.custom.send): This is the label displayed
 # on the button which sends the custom request
 netmonitor.custom.send=Send
 
 # LOCALIZATION NOTE (netmonitor.custom.cancel): This is the label displayed
 # on the button which cancels and closes the custom request form
 netmonitor.custom.cancel=Cancel
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
@@ -0,0 +1,138 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+.network-monitor .custom-method-and-url .custom-method-value-label {
+  grid-column: 1 / 1;
+  grid-row: 1 / 1;
+}
+
+.network-monitor .custom-method-and-url .custom-url-value{
+  grid-column: 2 / 2;
+  grid-row: 2 / 2;
+}
+
+.network-monitor .custom-method-and-url .custom-method-value {
+  grid-column: 1 / 1;
+  grid-row: 2 / 2;
+}
+
+
+.network-monitor .custom-method-and-url .custom-url-value-label {
+  grid-column: 2 / 2;
+  grid-row: 1 / 1 ;
+  margin-left: 12px;
+}
+
+.network-monitor .tabpanel-summary-container.custom-method-and-url {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.network-monitor .custom-method-and-url input {
+  font-weight: 400;
+  margin-top: 4px;
+  padding: 2px 3px;
+}
+
+.network-monitor .custom-request-panel textarea {
+  font-weight: 400;
+  margin-top: 4px;
+  padding: 8px;
+}
+
+.network-monitor .custom-method-and-url .custom-url-value {
+  margin-left: 12px;
+}
+
+.network-monitor .custom-request-panel {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.network-monitor .custom-request-panel > div:not(.custom-request) {
+  margin-bottom: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.network-monitor .custom-request {
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+.network-monitor .custom-request-panel .custom-request-label {
+  font-weight: 400;
+}
+
+.network-monitor .custom-request button {
+  align-self: flex-end;
+  height: 24px;
+  padding-left: 8px;
+  padding-right: 8px;
+  width: auto;
+}
+
+.network-monitor .custom-request #custom-request-send-button {
+  background-color: var(--blue-60);
+  color: white;
+  margin-left: 4px;
+  margin-right: 16px;
+}
+
+.network-monitor .custom-request .custom-header {
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-width: 0;
+  flex: 1 0 100%;
+  height: 24px;
+  margin-bottom: 16px;
+  padding: 4px 16px;
+}
+
+:root.theme-dark .network-details-panel .custom-request-panel {
+  background-color: var(--grey-85);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button {
+  background-color: var(--toolbarbutton-background);
+  border: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-monitor .custom-request-label.custom-header {
+  background-color: var(--grey-80);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-details-panel .custom-request-panel input,
+:root.theme-dark .network-details-panel .custom-request-panel textarea {
+  background-color: var(--grey-70);
+  border: 1px solid var(--grey-85);
+  color: white;
+}
+
+:root.theme-dark .network-monitor .custom-request-label {
+  color: var(--grey-40);
+}
+
+:root.theme-light .network-details-panel .custom-request-label.custom-header {
+  background-color: var(--grey-10);
+  border-bottom: 1px solid var(--grey-25);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button {
+  background-color: var(--grey-20);
+}
+
+:root.theme-light .network-details-panel .custom-request-panel input,
+:root.theme-light .network-details-panel .custom-request-panel textarea {
+  background-color: white;
+  border: 1px solid var(--grey-25);
+  color: var(--grey-90);
+}
+
+:root.theme-light .network-monitor .custom-request-label {
+  color: var(--grey-60);
+}
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -15,16 +15,17 @@
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/Toolbar.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatusBar.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatisticsPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/CustomRequestPanel.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css";
 
 /* General */
 
 * {
   box-sizing: border-box;
 }
 
--- a/devtools/client/netmonitor/src/components/CustomRequestPanel.js
+++ b/devtools/client/netmonitor/src/components/CustomRequestPanel.js
@@ -17,22 +17,27 @@ const {
   parseQueryString,
   writeHeaderText,
 } = require("../utils/request-utils");
 
 const {
   button,
   div,
   input,
+  label,
   textarea,
 } = dom;
 
 const CUSTOM_CANCEL = L10N.getStr("netmonitor.custom.cancel");
 const CUSTOM_HEADERS = L10N.getStr("netmonitor.custom.headers");
 const CUSTOM_NEW_REQUEST = L10N.getStr("netmonitor.custom.newRequest");
+const CUSTOM_NEW_REQUEST_METHOD_LABEL =
+    L10N.getStr("netmonitor.custom.newRequestMethodLabel");
+const CUSTOM_NEW_REQUEST_URL_LABEL =
+    L10N.getStr("netmonitor.custom.newRequestUrlLabel");
 const CUSTOM_POSTDATA = L10N.getStr("netmonitor.custom.postData");
 const CUSTOM_QUERY = L10N.getStr("netmonitor.custom.query");
 const CUSTOM_SEND = L10N.getStr("netmonitor.custom.send");
 
 /*
  * Custom request panel component
  * A network request editor which simply provide edit and resend interface
  * for network development.
@@ -207,69 +212,90 @@ class CustomRequestPanel extends Compone
           },
             CUSTOM_CANCEL,
           ),
         ),
         div({
           className: "tabpanel-summary-container custom-method-and-url",
           id: "custom-method-and-url",
         },
+          label({
+            className: "custom-method-value-label custom-request-label",
+            htmlFor: "custom-method-value",
+          },
+            CUSTOM_NEW_REQUEST_METHOD_LABEL,
+          ),
           input({
             className: "custom-method-value",
             id: "custom-method-value",
             onChange: (evt) =>
               this.updateCustomRequestFields(evt, request, updateRequest),
             onBlur: (evt) =>
               this.updateCustomRequestFields(evt, request, updateRequest),
             value: method,
           }),
+          label({
+            className: "custom-url-value-label custom-request-label",
+            htmlFor: "custom-url-value",
+          },
+            CUSTOM_NEW_REQUEST_URL_LABEL,
+          ),
           input({
             className: "custom-url-value",
             id: "custom-url-value",
             onChange: (evt) =>
               this.updateCustomRequestFields(evt, request, updateRequest),
             value: url || "http://",
           }),
         ),
         // Hide query field when there is no params
         params ? div({
           className: "tabpanel-summary-container custom-section",
           id: "custom-query",
         },
-          div({ className: "custom-request-label" }, CUSTOM_QUERY),
+          label({
+            className: "custom-request-label",
+            htmlFor: "custom-query-value",
+          }, CUSTOM_QUERY),
           textarea({
             className: "tabpanel-summary-input",
             id: "custom-query-value",
             onChange: (evt) =>
               this.updateCustomRequestFields(evt, request, updateRequest),
             rows: 4,
             value: params,
             wrap: "off",
           }),
         ) : null,
         div({
           id: "custom-headers",
           className: "tabpanel-summary-container custom-section",
         },
-          div({ className: "custom-request-label" }, CUSTOM_HEADERS),
+          label({
+            className: "custom-request-label",
+            htmlFor: "custom-headers-value",
+          }, CUSTOM_HEADERS),
           textarea({
             className: "tabpanel-summary-input",
             id: "custom-headers-value",
             onChange: (evt) =>
               this.updateCustomRequestFields(evt, request, updateRequest),
             rows: 8,
             value: headers,
             wrap: "off",
           }),
         ),
         div({
           id: "custom-postdata",
           className: "tabpanel-summary-container custom-section",
         },
-          div({ className: "custom-request-label" }, CUSTOM_POSTDATA),
+          label({
+            className: "custom-request-label",
+            htmlFor: "custom-postdata-value",
+          }, CUSTOM_POSTDATA),
           textarea({
             className: "tabpanel-summary-input",
             id: "custom-postdata-value",
             onChange: (evt) =>
               this.updateCustomRequestFields(evt, request, updateRequest),
             rows: 6,
             value: postData,
             wrap: "off",