Bug 1458092 - Netmonitor - minor visual tweaks to new toolbar; r=davidwalsh
authorJan Odvarko <odvarko@gmail.com>
Thu, 03 May 2018 16:34:13 +0200
changeset 473078 1bf642a3af2aa3cca667a0c6212751d26c9e73ca
parent 473077 8f88c817b3340c1857632da600179295ab4b01c4
child 473079 57e03548f5bec754fe089459bbaff56260853cb5
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh
bugs1458092
milestone61.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 1458092 - Netmonitor - minor visual tweaks to new toolbar; r=davidwalsh MozReview-Commit-ID: L7tiqvoQCL5
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/assets/styles/variables.css
devtools/client/netmonitor/src/components/MonitorPanel.js
devtools/client/netmonitor/src/components/Toolbar.js
devtools/client/themes/variables.css
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -4,16 +4,27 @@
 
 /* Toolbar */
 
 .devtools-toolbar {
   display: flex;
   line-height: 23px;
 }
 
+/* This should be global style for all panels at some point */
+.monitor-panel .devtools-button {
+  background-color: transparent;
+}
+
+/* This should be global style for all panels at some point */
+.theme-light .monitor-panel .devtools-button.checked {
+  color: var(--grey-90);
+  background-color: var(--grey-90-a10);
+}
+
 .devtools-toolbar-container {
   height: auto;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
 .devtools-toolbar-group {
   display: flex;
@@ -26,109 +37,123 @@
   height: 24px;
 }
 
 .devtools-toolbar-two-rows-1,
 .devtools-toolbar-two-rows-2,
 .devtools-toolbar-single-row {
   flex-grow: 1;
   min-height: var(--primary-toolbar-height);
+  background-color: var(--theme-body-background);
 }
 
 .devtools-toolbar-two-rows-1 {
   width: -moz-available;
 }
 
 .devtools-toolbar-two-rows-2 {
   justify-content: space-between;
   border-top: 1px solid var(--theme-splitter-color);
 }
 
 .requests-list-filter-buttons {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 2px;
+  margin: 0 7px;
 }
 
 .devtools-button.devtools-pause-icon::before,
 .devtools-button.devtools-play-icon::before {
   margin-bottom: 1px;
 }
 
 .devtools-button.devtools-pause-icon::before {
   background-image: var(--pause-icon-url);
 }
 
 .devtools-button.devtools-play-icon::before {
   background-image: var(--play-icon-url);
 }
 
-/* HAR button in the toolbar has a background only when hovered. */
-.devtools-button.devtools-har-button:not(:hover) {
-  background: transparent;
+.devtools-button.devtools-har-button {
+  margin: 0 0 0 2px;
+  padding: 0;
+}
+
+.network-monitor .devtools-button.devtools-har-button:hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-border-color);
 }
 
 /* HAR button has label and icon, so make sure they don't overlap */
 .devtools-button.devtools-har-button::before {
   content: "HAR";
+  color: var(--theme-body-color);
   width: 21px;
   padding-right: 12px;
   background-image: var(--drop-down-icon-url);
   background-position: right center;
   fill: var(--theme-toolbar-photon-icon-color);
+  height: 17px;
 }
 
 /* Make sure the HAR button label is vertically centered on Mac */
 :root[platform="mac"] .devtools-button.devtools-har-button::before {
   height: 14px;
 }
 
 .devtools-checkbox {
   position: relative;
   vertical-align: middle;
   bottom: 1px;
 }
 
 .devtools-checkbox-label {
-  margin-inline-start: 10px;
-  margin-inline-end: 3px;
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
   white-space: nowrap;
-  margin-top: 1px;
+}
+
+.devtools-checkbox-label.devtools-persistlog-checkbox {
+  margin-inline-start: 4px;
+}
+
+.devtools-checkbox-label.devtools-cache-checkbox {
+  margin-inline-end: 7px;
 }
 
 /* Throttling Button */
 
 #global-network-throttling-selector:not(:hover) {
   background-color: transparent;
 }
 
-#global-network-throttling-selector:hover {
-  background-color: var(--toolbarbutton-background);
-}
-
 #global-network-throttling-selector {
   width: 92px;
   padding-right: 12px;
   background-image: var(--drop-down-icon-url);
   background-position: right 6px;
   background-repeat: no-repeat;
   fill: var(--theme-toolbar-photon-icon-color);
+  margin-inline-start: 6px;
+  padding-left: 0;
+  -moz-context-properties: fill;
 }
 
 /* Make sure the Throttle button icon is vertically centered on Mac */
 :root[platform="mac"] #global-network-throttling-selector {
-  height: 17px;
   background-position-y: 5px;
 }
 
 /* Filter input within the Toolbar */
 
 .devtools-toolbar-group .devtools-filterinput {
   border: none;
   box-shadow: none;
+  background-color: var(--theme-body-background);
 }
 
 .devtools-toolbar-group .devtools-searchbox {
   height: 29px;
   border: 1px solid transparent;
 }
 
 .devtools-toolbar-group .devtools-searchbox:focus-within {
--- a/devtools/client/netmonitor/src/assets/styles/variables.css
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -14,16 +14,18 @@
   --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
 
   --sort-ascending-image: url(chrome://devtools/skin/images/sort-ascending-arrow.svg);
   --sort-descending-image: url(chrome://devtools/skin/images/sort-descending-arrow.svg);
 }
 
 :root.theme-light {
+  --theme-body-color: var(--grey-70);
+
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -28,17 +28,17 @@ loader.lazyGetter(this, "NetworkDetailsP
 });
 
 // MediaQueryList object responsible for switching sidebar splitter
 // between landscape and portrait mode (depending on browser window size).
 const MediaQueryVert = window.matchMedia("(min-width: 700px)");
 
 // MediaQueryList object responsible for switching the toolbar
 // between single and 2-rows layout (depending on browser window size).
-const MediaQuerySingleRow = window.matchMedia("(min-width: 920px)");
+const MediaQuerySingleRow = window.matchMedia("(min-width: 960px)");
 
 /**
  * Monitor panel component
  * The main panel for displaying various network request information
  */
 class MonitorPanel extends Component {
   static get propTypes() {
     return {
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -236,17 +236,17 @@ class Toolbar extends Component {
 
   /**
    * Render a Persistlog checkbox.
    */
   renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs) {
     return (
       label(
         {
-          className: "devtools-checkbox-label",
+          className: "devtools-checkbox-label devtools-persistlog-checkbox",
           title: ENABLE_PERSISTENT_LOGS_TOOLTIP,
         },
         input({
           id: "devtools-persistlog-checkbox",
           className: "devtools-checkbox",
           type: "checkbox",
           checked: persistentLogsEnabled,
           onChange: togglePersistentLogs,
@@ -258,17 +258,17 @@ class Toolbar extends Component {
 
   /**
    * Render a Cache checkbox.
    */
   renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache) {
     return (
       label(
         {
-          className: "devtools-checkbox-label",
+          className: "devtools-checkbox-label devtools-cache-checkbox",
           title: DISABLE_CACHE_TOOLTIP,
         },
         input({
           id: "devtools-cache-checkbox",
           className: "devtools-checkbox",
           type: "checkbox",
           checked: browserCacheDisabled,
           onChange: toggleBrowserCache,
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -20,17 +20,17 @@
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
-  --theme-toolbar-photon-icon-color: var(--grey-90-alpha-80);
+  --theme-toolbar-photon-icon-color: var(--grey-90-a80);
   --theme-toolbar-selected-color: var(--blue-60);
   --theme-toolbar-checked-color: var(--blue-60);
   --theme-toolbar-highlighted-color: var(--green-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
@@ -232,10 +232,11 @@
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-90: #0c0c0d;
-  --grey-90-alpha-80: rgba(12, 12, 13, 0.8);
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a80: rgba(12, 12, 13, 0.8);
 }