Bug 1479750 - Part 1: Tweak clear icon and devtools-separator style; r=nchevobbe
authorfvsch <florens@fvsch.com>
Thu, 23 Aug 2018 07:59:53 +0000
changeset 433002 707789fe9986fba796739ab359089a5af30e1b43
parent 433001 3c1d4d57f532e7a50de3e83c3aa2843396f4c8e6
child 433003 ce26d250b22ddb97ab1455126c08ac05af26e056
push id34498
push usercsabou@mozilla.com
push dateThu, 23 Aug 2018 21:39:18 +0000
treeherdermozilla-central@7b78aeca32ed [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1479750
milestone63.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 1479750 - Part 1: Tweak clear icon and devtools-separator style; r=nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D3482
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/themes/images/clear.svg
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/webconsole.css
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -28,20 +28,16 @@
 
 .devtools-toolbar-group {
   display: flex;
   flex: 0 0 auto;
   flex-wrap: nowrap;
   align-items: center;
 }
 
-.devtools-toolbar-group .devtools-separator {
-  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);
 }
 
--- a/devtools/client/themes/images/clear.svg
+++ b/devtools/client/themes/images/clear.svg
@@ -1,7 +1,7 @@
 <!-- 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/. -->
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
-  <path d="M5 3h3V2c0-.003-3 0-3 0-.002 0 0 1 0 1zm-5 .5A.5.5 0 0 1 .494 3h12.012a.5.5 0 0 1 0 1H.494A.502.502 0 0 1 0 3.5zM4 3V2c0-.553.444-1 1-1h3c.552 0 1 .443 1 1v1H4zM5 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zM7 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zM9 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0z"/>
-  <path d="M3 4v9h7V4H3zm0-1h7a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
+  <path d="M6 3h3V2H6v1zm-5 .5c0-.3.2-.5.5-.5h12a.5.5 0 1 1 0 1h-12a.5.5 0 0 1-.5-.5zM5 3V2c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v1H5zm1 8V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zm2 0V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zm2 0V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0z"/>
+  <path d="M4 4v9h7V4H4zm0-1h7c.6 0 1 .4 1 1v9c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1z"/>
 </svg>
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -1,38 +1,36 @@
 /* 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/. */
 
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
+:root {
+  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+  --filter-image: url(chrome://devtools/skin/images/filter.svg);
+  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
+  --separator-block-margin: 4px;
+  --separator-inline-margin: 1px;
+}
+
 .theme-light {
   --searchbox-background-color: var(--theme-highlight-yellow);
   --searchbox-border-color: #ffbf00;
   --searcbox-no-match-background-color: #ffe5e5;
   --searcbox-no-match-border-color: #e52e2e;
-
-  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
-  --filter-image: url(chrome://devtools/skin/images/filter.svg);
-  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
-
-  --separator-border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
+  --separator-border-color: rgba(0,0,0,.1);
 }
 
 .theme-dark {
   --searchbox-background-color: #4d4222;
   --searchbox-border-color: #d99f2b;
   --searcbox-no-match-background-color: #402325;
   --searcbox-no-match-border-color: #cc3d3d;
-
-  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
-  --filter-image: url(chrome://devtools/skin/images/filter.svg);
-  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
-
-  --separator-border-image: linear-gradient(transparent 4px, rgba(100%,100%,100%,.2) 4px, rgba(100%,100%,100%,.2) calc(100% - 4px), transparent calc(100% - 4px));
+  --separator-border-color: rgba(100%,100%,100%,.2);
 }
 
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
   -moz-appearance: none;
   padding: 0;
   border-width: 0;
@@ -68,20 +66,30 @@
   padding: 0;
 }
 
 .devtools-toolbar-bottom {
   border-top-width: 1px;
   border-bottom: none;
 }
 
+/* Expected space around a separator:
+ * -----------------------
+ *            4
+ * [button] 2 | 2 [button]
+ *            4
+ * -----------------------
+ * We're using a 1px horizontal margin, since buttons already have their own
+ * 1px horizontal margin, and margins don't collapse between flex items.
+ * Some separators may be using a bigger, 6px horizontal margin.
+ */
 .devtools-separator {
-  border-inline-start: 1px solid;
-  border-image: var(--separator-border-image) 1 1;
-  height: inherit;
+  border-inline-start: 1px solid var(--separator-border-color);
+  height: calc(100% - 2 * var(--separator-block-margin));
+  margin: var(--separator-block-margin) var(--separator-inline-margin);
 }
 
 /* In-tools sidebar */
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;
   height: 100%;
 }
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -200,19 +200,22 @@
 }
 
 /* On OSX the cursor turns into a window-resizing cursor at the edges of the
  * window, so bring the end of the toolbox in. */
 :root[platform="mac"] #toolbox-controls {
   margin-inline-end: 3px;
 }
 
+#toolbox-buttons-start > .devtools-separator {
+  --separator-inline-margin: 0;
+}
+
 #toolbox-buttons-end > .devtools-separator {
-  margin-inline-start: 5px;
-  margin-inline-end: 5px;
+  --separator-inline-margin: 5px;
 }
 
 #toolbox-close {
   min-width: 24px;
 }
 
 #toolbox-close::before {
   fill: var(--theme-toolbar-photon-icon-color);
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -533,16 +533,17 @@ a.learn-more-link.webconsole-learn-more-
   /* We want the toolbar (which contain the text search input) to fit
   the content, we don't allow to shrink/overlap it */
   flex: 100 0 -moz-fit-content;
   align-items: center;
   min-height: var(--primary-toolbar-height);
 }
 
 .devtools-toolbar.webconsole-filterbar-secondary {
+  --separator-inline-margin: 5px;
   display: flex;
   width: 100%;
   align-items: center;
   -moz-user-select: none;
   grid-column: 1 / -1;
 }
 
 .split-console-close-button-wrapper {
@@ -583,20 +584,16 @@ a.learn-more-link.webconsole-learn-more-
 .webconsole-filterbar-primary .filter-checkbox {
   flex-shrink: 0;
   margin: 0 3px;
   display: flex;
   align-items: center;
   -moz-user-select: none;
 }
 
-.webconsole-filterbar-secondary .devtools-separator {
-  margin: 0 5px;
-}
-
 .webconsole-filterbar-filtered-messages {
   /* Needed so the bar takes the whole horizontal space when it is wrapped */
   flex-grow: 1;
   justify-content: flex-end;
   color: var(--theme-comment);
   text-align: end;
   align-items: center;
   min-height: var(--primary-toolbar-height);