Bug 1518931 - Clean up devtools searchbox clear button and filter icon styling. r=fvsch
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 14 Jan 2019 09:01:36 +0000
changeset 510789 29b9eaabfca3c750633854959c339c8c64e9b087
parent 510788 710ac2f726a1945a81fc5bb6fe98fd3ffce1046f
child 510790 5a2081993bcb0ec1b26531a4a9c6bc9e7bb82e0b
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1518931
milestone66.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 1518931 - Clean up devtools searchbox clear button and filter icon styling. r=fvsch Differential Revision: https://phabricator.services.mozilla.com/D16099
devtools/client/jar.mn
devtools/client/themes/common.css
devtools/client/themes/images/filter.svg
devtools/client/themes/images/search-clear-dark.svg
devtools/client/themes/images/search-clear-failed.svg
devtools/client/themes/images/search-clear-light.svg
devtools/client/themes/images/search-clear.svg
devtools/client/themes/toolbars.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -221,19 +221,17 @@ devtools.jar:
     skin/images/sort-ascending-arrow.svg (themes/images/sort-ascending-arrow.svg)
     skin/images/sort-descending-arrow.svg (themes/images/sort-descending-arrow.svg)
     skin/images/cubic-bezier-swatch.svg (themes/images/cubic-bezier-swatch.svg)
     skin/fonts.css (themes/fonts.css)
     skin/changes.css (themes/changes.css)
     skin/computed.css (themes/computed.css)
     skin/layout.css (themes/layout.css)
     skin/images/arrow-e.svg (themes/images/arrow-e.svg)
-    skin/images/search-clear-failed.svg (themes/images/search-clear-failed.svg)
-    skin/images/search-clear-light.svg (themes/images/search-clear-light.svg)
-    skin/images/search-clear-dark.svg (themes/images/search-clear-dark.svg)
+    skin/images/search-clear.svg (themes/images/search-clear.svg)
     skin/images/reload.svg (themes/images/reload.svg)
     skin/images/file-type-general.svg (netmonitor/src/assets/icons/file-type-general.svg)
     skin/images/file-type-image.svg (netmonitor/src/assets/icons/file-type-image.svg)
     skin/images/security-state-broken.svg (themes/images/security-state-broken.svg)
     skin/images/security-state-insecure.svg (themes/images/security-state-insecure.svg)
     skin/images/security-state-secure.svg (themes/images/security-state-secure.svg)
     skin/images/security-state-weak.svg (themes/images/security-state-weak.svg)
     skin/images/diff.svg (themes/images/diff.svg)
@@ -259,9 +257,8 @@ devtools.jar:
     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)
     content/netmonitor/src/assets/styles/StatusCode.css (netmonitor/src/assets/styles/StatusCode.css)
 
     # Application panel
     content/application/index.html (application/index.html)
-
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -12,22 +12,32 @@
    * we're using the `font` shorthand. */
   font: message-box;
   font-size: var(--theme-body-font-size);
 
   --tab-line-hover-color: rgba(0,0,0,.2);
   --tab-line-selected-color: var(--blue-50);
   --toggle-thumb-color: white;
   --toggle-track-color: var(--grey-30);
+
+  --searchbox-background-color: var(--theme-highlight-yellow);
+  --searchbox-border-color: #ffbf00;
+  --searchbox-no-match-background-color: #ffe5e5;
+  --searchbox-no-match-stroke-color: var(--red-60);
 }
 
 :root.theme-dark {
   --tab-line-hover-color: rgba(255,255,255,.2);
   --toggle-thumb-color: var(--grey-40);
   --toggle-track-color: var(--grey-60);
+
+  --searchbox-background-color: #4d4222;
+  --searchbox-border-color: #d99f2b;
+  --searchbox-no-match-background-color: #402325;
+  --searchbox-no-match-stroke-color: var(--red-50);
 }
 
 :root[platform="mac"] {
   --monospace-font-family: Menlo, monospace;
 }
 
 :root[platform="win"] {
   --monospace-font-family: Consolas, monospace;
@@ -480,17 +490,17 @@ checkbox:-moz-focusring {
   padding-inline-end: 23px;
 }
 
 .devtools-searchinput {
   background-image: url(chrome://devtools/skin/images/search.svg);
 }
 
 .devtools-filterinput {
-  background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
+  background-image: url(chrome://devtools/skin/images/filter.svg);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl),
 .devtools-searchinput:dir(rtl),
 .devtools-filterinput:-moz-locale-dir(rtl),
 .devtools-filterinput:dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
@@ -588,47 +598,41 @@ checkbox:-moz-focusring {
 }
 
 .devtools-filterinput:-moz-any([filled],.filled) {
   background-color: var(--searchbox-background-color);
   border-color: var(--searchbox-border-color);
 }
 
 .devtools-style-searchbox-no-match {
-  background-color: var(--searcbox-no-match-background-color) !important;
-  border-color: var(--searcbox-no-match-border-color) !important;
+  background-color: var(--searchbox-no-match-background-color) !important;
+  border-color: var(--searchbox-no-match-stroke-color) !important;
 }
 
 .devtools-searchinput-clear {
   position: absolute;
   top: calc(50% - 8px);
   inset-inline-end: 7px;
   padding: 0;
   border: 0;
   width: 16px;
   height: 16px;
-  background-position: 0 0;
-  background-repeat: no-repeat;
   background-color: transparent;
-}
-
-.theme-dark .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
-}
-
-.theme-light .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+  background-image: url("chrome://devtools/skin/images/search-clear.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--theme-toolbar-icon-color);
+  fill-opacity: 0.8;
 }
 
 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
+  fill: var(--searchbox-no-match-stroke-color);
 }
 
 .devtools-searchinput-clear:hover {
-  background-position: -16px 0;
+  fill-opacity: 1;
 }
 
 /* Twisty and checkbox controls */
 
 .theme-twisty {
   width: 14px;
   height: 14px;
   cursor: pointer;
--- a/devtools/client/themes/images/filter.svg
+++ b/devtools/client/themes/images/filter.svg
@@ -1,16 +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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
-  <style>
-    /* Use a fill that's visible on both light and dark themes for filter inputs */
-    #filterinput:target + #icon {
-      fill: #aaa;
-    }
-  </style>
-  <g id="filterinput"/>
-  <g id="icon">
-    <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
-    <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #aaa">
+  <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
+  <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
 </svg>
deleted file mode 100644
--- a/devtools/client/themes/images/search-clear-dark.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
-  <defs>
-    <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
-    <style>
-      .icon-state-default { fill: #f5f7fa; fill-opacity: .6; }
-      .icon-state-pressed { fill: #7d7e80; fill-opacity: .8; }
-    </style>
-  </defs>
-  <use xlink:href="#glyphShape-clear" class="icon-state-default"/>
-  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)"/>
-</svg>
deleted file mode 100644
--- a/devtools/client/themes/images/search-clear-failed.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
-  <defs>
-    <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
-    <style>
-      .icon-state-default { fill: #cc3d3d; fill-opacity: 1; }
-      .icon-state-pressed { fill: #802d2d; fill-opacity: 1; }
-    </style>
-  </defs>
-  <use xlink:href="#glyphShape-clear" class="icon-state-default"/>
-  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)"/>
-</svg>
deleted file mode 100644
--- a/devtools/client/themes/images/search-clear-light.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
-  <defs>
-    <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
-    <style>
-      .icon-state-default { fill: #1d2126; fill-opacity: .5; }
-      .icon-state-pressed { fill: #1d2126; fill-opacity: .8; }
-    </style>
-  </defs>
-  <use xlink:href="#glyphShape-clear" class="icon-state-default"/>
-  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)"/>
-</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/search-clear.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M6.586 8l-2.293 2.293a1 1 0 0 0 1.414 1.414L8 9.414l2.293 2.293a1 1 0 0 0 1.414-1.414L9.414 8l2.293-2.293a1 1 0 1 0-1.414-1.414L8 6.586 5.707 4.293a1 1 0 0 0-1.414 1.414L6.586 8zM8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0z"/>
+</svg>
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -5,28 +5,20 @@
 
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 :root {
   --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;
   --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;
   --separator-border-color: rgba(100%,100%,100%,.2);
 }
 
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
   -moz-appearance: none;
   padding: 0;