Bug 1490491 - Part 4: replace 2 png icons, remove 2 unused; r=pbro
authorfvsch <florens@fvsch.com>
Mon, 22 Oct 2018 14:47:28 +0000
changeset 490812 8753dbb0045e86c9a90b04199ec367a5ea3ede28
parent 490811 cbf72bc2efeb92b7678a2f5817b26189b718ddbb
child 490813 cb7ced1eb7edea847195a701f2ef000c70d5e8a5
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerspbro
bugs1490491
milestone65.0a1
Bug 1490491 - Part 4: replace 2 png icons, remove 2 unused; r=pbro Depends on D5954 Differential Revision: https://phabricator.services.mozilla.com/D5955
devtools/client/jar.mn
devtools/client/themes/computed.css
devtools/client/themes/images/angle-swatch.svg
devtools/client/themes/images/arrow-e.png
devtools/client/themes/images/arrow-e.svg
devtools/client/themes/images/arrow-e@2x.png
devtools/client/themes/images/cubic-bezier-swatch.png
devtools/client/themes/images/cubic-bezier-swatch.svg
devtools/client/themes/images/cubic-bezier-swatch@2x.png
devtools/client/themes/images/debugger-step-over.png
devtools/client/themes/images/debugger-step-over@2x.png
devtools/client/themes/images/filter-swatch.svg
devtools/client/themes/images/magnifying-glass.png
devtools/client/themes/images/magnifying-glass@2x.png
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/security-state-broken.svg
devtools/client/themes/images/security-state-insecure.svg
devtools/client/themes/images/security-state-secure.svg
devtools/client/themes/images/security-state-weak.svg
devtools/client/themes/rules.css
devtools/client/webide/themes/rocket.svg
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -234,24 +234,22 @@ devtools.jar:
     skin/images/vview-edit.png (themes/images/vview-edit.png)
     skin/images/vview-edit@2x.png (themes/images/vview-edit@2x.png)
     skin/images/vview-lock.png (themes/images/vview-lock.png)
     skin/images/vview-lock@2x.png (themes/images/vview-lock@2x.png)
     skin/images/vview-open-inspector.png (themes/images/vview-open-inspector.png)
     skin/images/vview-open-inspector@2x.png (themes/images/vview-open-inspector@2x.png)
     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.png (themes/images/cubic-bezier-swatch.png)
-    skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
+    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.png (themes/images/arrow-e.png)
-    skin/images/arrow-e@2x.png (themes/images/arrow-e@2x.png)
+    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/tooltip/arrow-horizontal-dark.png (themes/tooltip/arrow-horizontal-dark.png)
     skin/tooltip/arrow-horizontal-dark@2x.png (themes/tooltip/arrow-horizontal-dark@2x.png)
     skin/tooltip/arrow-vertical-dark.png (themes/tooltip/arrow-vertical-dark.png)
     skin/tooltip/arrow-vertical-dark@2x.png (themes/tooltip/arrow-vertical-dark@2x.png)
     skin/tooltip/arrow-horizontal-light.png (themes/tooltip/arrow-horizontal-light.png)
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -87,32 +87,32 @@
 
 .computed-property-name {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: 0 !important;
 }
 
-.computed-other-property-value {
-  background-image: url(images/arrow-e.png);
+.computed-other-property-value::before {
+  content: "";
+  display: inline-block;
+  vertical-align: -0.5px;
+  width: 8px;
+  height: 8px;
+  margin: 0 1px;
+  background-image: url(images/arrow-e.svg);
   background-repeat: no-repeat;
-  background-size: 5px 8px;
-  background-position: left center;
-  padding-inline-start: 8px;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: var(--theme-body-color-inactive);
 }
 
-.computed-other-property-value:dir(rtl) {
-  background-position-x: right;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .computed-other-property-value {
-    background-image: url(images/arrow-e@2x.png);
-  }
+.computed-other-property-value:dir(rtl)::before {
+  transform: scaleX(-1);
 }
 
 .computed-property-value {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-inline-start: 14px;
   outline: 0 !important;
--- a/devtools/client/themes/images/angle-swatch.svg
+++ b/devtools/client/themes/images/angle-swatch.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <!-- 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 12 12" width="12px" height="12px">
   <mask id="angle-mask">
     <rect width="100%" height="100%" fill="#fff"/>
     <polygon points="6 6, 12 12, 0 12, 0 0, 6 0, 6 6"/>
   </mask>
deleted file mode 100644
index b1b4882415cc5e202b6b36ab8e033a0da41b0c2a..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/arrow-e.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" viewBox="0 0 8 8">
+  <path stroke="context-fill #0b0b0b" stroke-width="1.5" d="M2.5 1.2l3 2.8-3 2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
deleted file mode 100644
index f83c10023805d726d3d2283f2cb4fc113d07b847..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 9ce6f899c6cd2fabe4a650a2d294b967acfd45d2..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/cubic-bezier-swatch.svg
@@ -0,0 +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 viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="6" fill="#fff"/>
+  <path d="M7 .5C4 3 4.1 5.4 5.6 6.4S7 9 5 11.5C8 9 7.9 6.6 6.4 5.6S5 3 7 .5z" stroke="#808080" stroke-width=".5" fill="#808080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
deleted file mode 100644
index 30c79e7d81c167c7b8b5824efb079b512032cbc6..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index f81ec3584a3c3e5d8a1e796d4d87de9ae50478e8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 9cac91a18e46a4dfde861324c6f9bab480ca129e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/devtools/client/themes/images/filter-swatch.svg
+++ b/devtools/client/themes/images/filter-swatch.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <!-- 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 12 12" width="12px" height="12px">
   <mask id="mask">
     <rect width="100%" height="100%" fill="#fff"/>
     <polygon points="12,0 0,0 0,12"/>
   </mask>
deleted file mode 100644
index 42be1049d6b66d7837fc3652117a7c0204409afc..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 6c4a68c291c317920c7587c3b1c48e0de4ce77d6..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/devtools/client/themes/images/search-clear-dark.svg
+++ b/devtools/client/themes/images/search-clear-dark.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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; }
--- a/devtools/client/themes/images/search-clear-failed.svg
+++ b/devtools/client/themes/images/search-clear-failed.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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; }
--- a/devtools/client/themes/images/search-clear-light.svg
+++ b/devtools/client/themes/images/search-clear-light.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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; }
--- a/devtools/client/themes/images/security-state-broken.svg
+++ b/devtools/client/themes/images/security-state-broken.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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="16" height="16" viewBox="0 0 16 16">
   <path fill="#808080" d="M14.8,12.5L9.3,1.9C9,1.3,8.5,1,8,1C7.5,1,7,1.3,6.7,1.9L1.2,12.5c-0.3,0.6-0.3,1.2,0,1.7C1.5,14.7,2,15,2.6,15h10.8 c0.6,0,1.1-0.3,1.4-0.8C15.1,13.7,15.1,13.1,14.8,12.5z"/>
   <path fill="#fff" d="M8,11c-0.8,0-1.5,0.7-1.5,1.5C6.5,13.3,7.2,14,8,14 c0.8,0,1.5-0.7,1.5-1.5C9.5,11.7,8.8,11,8,11z M8,10L8,10C8.6,10,9,9.6,9,9l0.2-4.2c0-0.7-0.5-1.2-1.2-1.2S6.8,4.1,6.8,4.8L7,9 C7,9.6,7.4,10,8,10z"/>
 </svg>
--- a/devtools/client/themes/images/security-state-insecure.svg
+++ b/devtools/client/themes/images/security-state-insecure.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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="16" height="16" viewBox="0 0 16 16">
   <style>
     .icon-default {
       fill: #999;
--- a/devtools/client/themes/images/security-state-secure.svg
+++ b/devtools/client/themes/images/security-state-secure.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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="16" height="16" viewBox="0 0 16 16">
   <style>
     .icon-default {
       fill: #4d9a26;
--- a/devtools/client/themes/images/security-state-weak.svg
+++ b/devtools/client/themes/images/security-state-weak.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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="16" height="16" viewBox="0 0 16 16">
   <style>
     .icon-default {
       fill: #808080;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -458,17 +458,17 @@
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
 }
 
 .ruleview-bezierswatch {
-  background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
+  background: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
   background-size: 1em;
 }
 
 .ruleview-filterswatch {
   background: url("chrome://devtools/skin/images/filter-swatch.svg");
   background-size: 1em;
 }
 
@@ -483,23 +483,16 @@
   stroke: var(--rule-shape-toggle-color);
   border-radius: 0;
   background-size: 110% 110%;
   box-shadow: none;
   width: 1.45em;
   height: 1.45em;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .ruleview-bezierswatch {
-    background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
-    background-size: 1em;
-  }
-}
-
 .ruleview-overridden {
   text-decoration: line-through;
 }
 
 /**
  * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
  * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
  * .ruleview-flex and .ruleview-grid are custom
--- a/devtools/client/webide/themes/rocket.svg
+++ b/devtools/client/webide/themes/rocket.svg
@@ -1,9 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- 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="24px" height="24px" viewBox="0 0 24 24">
   <g opacity="0.1">
     <path fill="#fff" d="M12,2.3c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 C15.333,6.021,13.127,2.3,12,2.3z M12.003,6.181c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 c-0.545,0-1.066,0.054-1.553,0.15C10.914,7.292,11.608,6.181,12.003,6.181z"/>
     <path fill="#fff" d="M12.792,18.755c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,18.175,12.792,18.453,12.792,18.755z"/>
     <path fill="#414042" d="M12,2c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 C15.333,5.721,13.127,2,12,2z M12.003,5.881c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 c-0.545,0-1.066,0.054-1.553,0.15C10.914,6.992,11.608,5.881,12.003,5.881z"/>