Bug 1408198 - Use SVG icon for breadcrumbs scrollbuttons;r=ntim draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 08 Nov 2017 18:42:03 +0100
changeset 695107 fae33d73dab01c5d5ae3d75a62f4bd9092d4614f
parent 694536 be059b3ea9a5a476c38ba2469897733069e716ea
child 739529 62f30311153b406a4fe3a1fda472354a9497effc
push id88349
push userjdescottes@mozilla.com
push dateWed, 08 Nov 2017 19:46:39 +0000
reviewersntim
bugs1408198
milestone58.0a1
Bug 1408198 - Use SVG icon for breadcrumbs scrollbuttons;r=ntim MozReview-Commit-ID: 9aZzU49ayy2
devtools/client/jar.mn
devtools/client/themes/breadcrumbs.css
devtools/client/themes/images/breadcrumbs-scrollbutton.png
devtools/client/themes/images/breadcrumbs-scrollbutton.svg
devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -155,18 +155,17 @@ devtools.jar:
     skin/images/command-rulers.svg (themes/images/command-rulers.svg)
     skin/images/command-measure.svg (themes/images/command-measure.svg)
     skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/markup.css (themes/markup.css)
     skin/images/editor-error.png (themes/images/editor-error.png)
     skin/images/breakpoint.svg (themes/images/breakpoint.svg)
     skin/webconsole.css (themes/webconsole.css)
     skin/images/webconsole.svg (themes/images/webconsole.svg)
-    skin/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png)
-    skin/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
+    skin/images/breadcrumbs-scrollbutton.svg (themes/images/breadcrumbs-scrollbutton.svg)
     skin/animation.css (themes/animation.css)
     skin/animationinspector.css (themes/animationinspector.css)
     skin/canvasdebugger.css (themes/canvasdebugger.css)
     skin/debugger.css (themes/debugger.css)
     skin/performance.css (themes/performance.css)
     skin/memory.css (themes/memory.css)
     skin/scratchpad.css (themes/scratchpad.css)
     skin/shadereditor.css (themes/shadereditor.css)
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -20,37 +20,32 @@
   list-style-image: none;
   margin: 0;
   padding: 0;
 }
 
 .scrollbutton-up > .toolbarbutton-icon,
 .scrollbutton-down > .toolbarbutton-icon {
   -moz-appearance: none;
-  width: 7px;
+  width: 20px;
   height: 16px;
-  background-size: 14px 16px;
-  background-position: 0 center;
+  background-size: 16px;
+  background-position: center;
   background-repeat: no-repeat;
-  background-image: url("images/breadcrumbs-scrollbutton.png");
+  background-image: url("images/breadcrumbs-scrollbutton.svg");
   list-style-image: none;
-  margin: 0 8px;
   padding: 0;
+
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .scrollbutton-up > .toolbarbutton-icon,
-  .scrollbutton-down > .toolbarbutton-icon {
-    background-image: url("images/breadcrumbs-scrollbutton@2x.png");
-  }
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  background-position: -7px center;
+.scrollbutton-up:not([disabled]):active:hover,
+.scrollbutton-down:not([disabled]):active:hover {
+  background-color: var(--theme-toolbar-hover);
 }
 
 .scrollbutton-up[disabled] > .toolbarbutton-icon,
 .scrollbutton-down[disabled] > .toolbarbutton-icon {
   opacity: 0.5;
 }
 
 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
@@ -232,13 +227,8 @@ widgets.css is overwritten. */
   border: 1px transparent solid !important;
   box-shadow: none !important;
 }
 
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-up:active,
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active {
   background: none !important;
 }
-
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  background-position: 0 center;
-}
deleted file mode 100644
index 19af4c042e5f2184d8101b4724586b9ce4ad7671..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/breadcrumbs-scrollbutton.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">
+  <path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path>
+</svg>
deleted file mode 100644
index 04370240132d434144f80e168e1e668fc2573c98..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001