Bug 1343495 - CSS Grid Highlighter icon is blurry; r=gl
authorMatteo Ferretti <mferretti@mozilla.com>
Wed, 01 Mar 2017 12:07:25 +0100
changeset 392056 17a5205504383bc73553fe208749dc4b943c71d6
parent 392055 d725ecdbe54e6f3e39f86cc99f8e638d6b614431
child 392057 c865b539abeab0daaa42083088adeaf35f8458e2
push id7198
push userjlorenzo@mozilla.com
push dateTue, 18 Apr 2017 12:07:49 +0000
treeherdermozilla-beta@d57aa49c3948 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1343495
milestone54.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 1343495 - CSS Grid Highlighter icon is blurry; r=gl - Made the icon crisp - Optimized the path MozReview-Commit-ID: AUEQW8THyC4
devtools/client/themes/images/grid.svg
devtools/client/themes/rules.css
--- a/devtools/client/themes/images/grid.svg
+++ b/devtools/client/themes/images/grid.svg
@@ -1,6 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#696969">
-  <path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" d="M2 4h12M2 8h12M2 12h12M4 14V2M8 14V2M12 14V2"/>
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" stroke="#696969">
+  <path fill="none" d="M1 2.5h9m-9 3h9m-9 3h9M2.5 1v9m3-9v9m3-9v9"/>
 </svg>
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -411,17 +411,16 @@
   margin-top: -1px;
   margin-inline-end: 5px;
   display: inline-block;
   position: relative;
 }
 
 .ruleview-grid {
   background: url("chrome://devtools/skin/images/grid.svg");
-  background-size: 1em;
   border-radius: 0;
 }
 
 .ruleview-colorswatch::before {
   content: '';
   background-color: #eee;
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);