Bug 1456307 - Use more accurate flexbox icon in inspector; r=pbro

Differential Revision: https://phabricator.services.mozilla.com/D8662

--HG--
extra : moz-landing-system : lando

devtools/client/jar.mn

@@ -123,6 +123,7 @@ devtools.jar:
     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)

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>

devtools/client/themes/rules.css

@@ -426,11 +426,13 @@
 }
 
 .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 {