Bug 1506540 - Conforming style tweaks to Custom Request Panel in net monitor (button states, header title behaviour). r=Honza
authorBisola Omisore <solaocodes@gmail.com>
Tue, 02 Apr 2019 12:22:30 +0000
changeset 467579 3e83e4d61954d7fb2e1446fc503b0de9a2a5bc20
parent 467578 2c9d39de3650cc49b8b9ddeff086ac59c38ed34b
child 467580 c2b9eca5ffd1351b456cdb961a2b687ad4b55364
push id112638
push userdvarga@mozilla.com
push dateWed, 03 Apr 2019 06:18:49 +0000
treeherdermozilla-inbound@7dd52a4bdab5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1506540
milestone68.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 1506540 - Conforming style tweaks to Custom Request Panel in net monitor (button states, header title behaviour). r=Honza Increase the minimum width of the custom method value to make all options appear comfortably. Fix Custom Request Panel header title wrap bug. Style & position Custom Requeset Panel buttons properly. Differential Revision: https://phabricator.services.mozilla.com/D23252
devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
devtools/client/netmonitor/src/components/CustomRequestPanel.js
--- a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
@@ -28,16 +28,17 @@
 .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;
+  min-width: 9ch;
   padding: 2px 3px;
 }
 
 .network-monitor .custom-request-panel textarea {
   font-weight: 400;
   margin-top: 4px;
   padding: 8px;
 }
@@ -53,38 +54,59 @@
 
 .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;
+  display: block;
   padding: 0;
 }
 
+.network-monitor .custom-request .custom-request-button-container {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  margin-left: 12px;
+}
+
 .network-monitor .custom-request-panel .custom-request-label {
   font-weight: 400;
+  white-space: nowrap;
 }
 
 .network-monitor .custom-request button {
-  align-self: flex-end;
   height: 24px;
+  margin-bottom: 4px;
   padding-left: 8px;
   padding-right: 8px;
   width: auto;
 }
 
+.network-monitor .custom-request button:focus {
+  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
+  0 0 0 4px rgba(10,132,255,0.3)
+}
+
 .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-request-send-button:active {
+  background-color: var(--blue-80);
+}
+
+.network-monitor .custom-request #custom-request-send-button:hover {
+  background-color: var(--blue-70);
+}
+
+.network-monitor .custom-request #custom-request-close-button {
+  margin-right: 4px;
 }
 
 .network-monitor .custom-request .custom-header {
   border-bottom-width: 1px;
   border-style: solid;
   border-width: 0;
   flex: 1 0 100%;
   height: 24px;
@@ -96,16 +118,24 @@
   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-close-button:hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button:focus {
+  background-color: var(--theme-selection-focus-background);
+}
+
 :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);
@@ -119,16 +149,29 @@
 
 :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);
+  border: var(--theme-splitter-color);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button:hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button:focus {
+  outline: 2px solid var(--blue-50);
+  outline-offset: -2px;
+  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
+  border-radius: 2px;
+  -moz-outline-radius: 2px;
 }
 
 :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);
 }
--- a/devtools/client/netmonitor/src/components/CustomRequestPanel.js
+++ b/devtools/client/netmonitor/src/components/CustomRequestPanel.js
@@ -193,29 +193,31 @@ class CustomRequestPanel extends Compone
       requestPostData.postData.text : "";
 
     return (
       div({ className: "custom-request-panel" },
         div({ className: "tabpanel-summary-container custom-request" },
           div({ className: "custom-request-label custom-header" },
             CUSTOM_NEW_REQUEST,
           ),
-          button({
-            className: "devtools-button",
-            id: "custom-request-send-button",
-            onClick: sendCustomRequest,
-          },
-            CUSTOM_SEND,
-          ),
-          button({
-            className: "devtools-button",
-            id: "custom-request-close-button",
-            onClick: removeSelectedCustomRequest,
-          },
-            CUSTOM_CANCEL,
+          div({ className: "custom-request-button-container" },
+            button({
+              className: "devtools-button",
+              id: "custom-request-close-button",
+              onClick: removeSelectedCustomRequest,
+            },
+              CUSTOM_CANCEL,
+            ),
+            button({
+              className: "devtools-button",
+              id: "custom-request-send-button",
+              onClick: sendCustomRequest,
+            },
+              CUSTOM_SEND,
+            ),
           ),
         ),
         div({
           className: "tabpanel-summary-container custom-method-and-url",
           id: "custom-method-and-url",
         },
           label({
             className: "custom-method-value-label custom-request-label",