Bug 1456307 - Use more accurate flexbox icon in inspector; r=pbro
authorFlorens Verschelde <florens@fvsch.com>
Mon, 15 Oct 2018 07:52:52 +0000
changeset 489592 a871d40e8802cc8f049548ba40ccebe550a69c83
parent 489591 5a54f333b855138687b5b71e33c1c6144fc7fbe5
child 489593 744747bb295cbb4a02dbf9960e5f7676822834c6
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerspbro
bugs1456307
milestone64.0a1
Bug 1456307 - Use more accurate flexbox icon in inspector; r=pbro Differential Revision: https://phabricator.services.mozilla.com/D8662
devtools/client/jar.mn
devtools/client/themes/images/flexbox-swatch.svg
devtools/client/themes/rules.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -118,16 +118,17 @@ devtools.jar:
     skin/images/aboutdebugging-firefox-beta.svg (themes/images/aboutdebugging-firefox-beta.svg)
     skin/images/aboutdebugging-firefox-logo.svg (themes/images/aboutdebugging-firefox-logo.svg)
     skin/images/aboutdebugging-firefox-nightly.svg (themes/images/aboutdebugging-firefox-nightly.svg)
     skin/images/aboutdebugging-firefox-release.svg (themes/images/aboutdebugging-firefox-release.svg)
     skin/images/aboutdebugging-globe-icon.svg (themes/images/aboutdebugging-globe-icon.svg)
     skin/images/fox-smiling.svg (themes/images/fox-smiling.svg)
     skin/images/grid.svg (themes/images/grid.svg)
     skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
+    skin/images/flexbox-swatch.svg (themes/images/flexbox-swatch.svg)
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/images/controls.png (themes/images/controls.png)
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/copy.svg (themes/images/copy.svg)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
     skin/images/performance-details-call-tree.svg (themes/images/performance-details-call-tree.svg)
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/flexbox-swatch.svg
@@ -0,0 +1,11 @@
+<!-- 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" viewBox="0 0 13 11">
+  <g fill="none" stroke="context-stroke #0c0c0d" stroke-width="1" stroke-linejoin="round">
+    <rect x="0.5" y="0.5" width="12" height="10"
+      stroke-dasharray="1 1" stroke-dashoffset="0.5" />
+    <rect x="2.5" y="3.5" width="8" height="4"/>
+    <line x1="6.5" x2="6.5" y1="3" y2="8"/>
+  </g>
+</svg>
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -421,21 +421,23 @@
   /* align the swatch with its value */
   margin-top: -1px;
   margin-inline-end: 5px;
   display: inline-block;
   position: relative;
 }
 
 .ruleview-flex {
-  background: url("chrome://devtools/skin/images/command-frames.svg");
-  -moz-context-properties: fill;
-  fill: var(--rule-flex-toggle-color);
+  background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
+  background-size: 13px 11px;
+  -moz-context-properties: stroke;
+  stroke: var(--rule-flex-toggle-color);
+  width: 13px;
+  height: 11px;
   border-radius: 0;
-  background-size: 1em;
 }
 
 .ruleview-grid {
   background: url("chrome://devtools/skin/images/grid.svg");
   border-radius: 0;
 }
 
 .ruleview-shape-point.active,