Bug 1458092 - Netmonitor - minor visual tweaks to new toolbar; r=? draft
authorJan Odvarko <odvarko@gmail.com>
Thu, 03 May 2018 12:43:07 +0200
changeset 791061 4ba5e6d62d44d156f6e0e03b9e58faf42faeeb61
parent 791048 a2d1d4158bb4718d8bb31e1284e133aa99273600
push id108674
push userjodvarko@mozilla.com
push dateThu, 03 May 2018 10:45:27 +0000
bugs1458092
milestone61.0a1
Bug 1458092 - Netmonitor - minor visual tweaks to new toolbar; r=? MozReview-Commit-ID: 5ybud2azWQ8
devtools/client/netmonitor/src/assets/styles/Toolbar.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,26 @@
 
 /* Toolbar */
 
 .devtools-toolbar {
   display: flex;
   line-height: 23px;
 }
 
+.monitor-panel .devtools-button {
+  color: var(--grey-70);
+  background-color: transparent;
+}
+
+.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,77 +36,87 @@
   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: white;
 }
 
 .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);
 }
 
+.devtools-button.devtools-har-button {
+  margin: 0 0 0 2px;
+}
+
 /* HAR button in the toolbar has a background only when hovered. */
 .devtools-button.devtools-har-button:not(:hover) {
   background: transparent;
 }
 
 /* HAR button has label and icon, so make sure they don't overlap */
 .devtools-button.devtools-har-button::before {
   content: "HAR";
+  color: var(--grey-70);
   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-cache-checkbox {
+  margin-right: 7px;
 }
 
 /* Throttling Button */
 
 #global-network-throttling-selector:not(:hover) {
   background-color: transparent;
 }
 
--- 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);
 
@@ -231,10 +231,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);
 }