Bug 1490491 - Part 3: replace controls.png with SVG icons; r=pbro
authorfvsch <florens@fvsch.com>
Mon, 22 Oct 2018 14:47:08 +0000
changeset 490811 cbf72bc2efeb92b7678a2f5817b26189b718ddbb
parent 490810 aa099aca82bde28ed9f8031b41d942b6be7ad0cf
child 490812 8753dbb0045e86c9a90b04199ec367a5ea3ede28
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerspbro
bugs1490491
milestone65.0a1
Bug 1490491 - Part 3: replace controls.png with SVG icons; r=pbro Depends on D5953 Differential Revision: https://phabricator.services.mozilla.com/D5954
devtools/client/accessibility/accessibility.css
devtools/client/jar.mn
devtools/client/themes/common.css
devtools/client/themes/images/controls.png
devtools/client/themes/images/controls@2x.png
devtools/client/themes/images/devtools-components/checkbox.svg
devtools/client/themes/markup.css
devtools/client/themes/rules.css
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -9,29 +9,29 @@
   --accessibility-toolbar-focus: var(--blue-50);
   --accessibility-toolbar-focus-alpha30: rgba(10, 132, 255, 0.3);
   --accessibility-full-length-minus-splitter: calc(100% - 1px);
   --accessibility-horizontal-padding: 5px;
   --accessibility-properties-item-width: calc(100% - var(--accessibility-horizontal-padding));
   --accessibility-arrow-horizontal-padding: 4px;
   --accessibility-tree-row-height: 21px;
   --accessibility-unfocused-tree-focused-node-background: var(--grey-20);
-  --accessibility-tree-focused-node-twisty-brightness: brightness(20%);
+  --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-twisty-fill);
   --accessibility-link-color: var(--blue-60);
   --accessibility-link-color-active: var(--blue-70);
   --accessible-role-active-background-color: var(--blue-50);
   --accessible-role-active-border-color: #FFFFFFB3;
   --accessible-role-background-color: white;
   --accessible-role-border-color: #CACAD1;
   --accessible-role-color: var(--grey-60);
 }
 
 :root.theme-dark {
   --accessibility-unfocused-tree-focused-node-background: var(--grey-70);
-  --accessibility-tree-focused-node-twisty-brightness: unset;
+  --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-twisty-selected-fill);
   --accessibility-link-color: var(--theme-highlight-blue);
   --accessibility-link-color-active: var(--blue-40);
   --accessible-role-active-background-color: var(--blue-60);
   --accessible-role-active-border-color: #FFF6;
   --accessible-role-background-color: var(--grey-80);
   --accessible-role-border-color: var(--grey-50);
   --accessible-role-color: var(--grey-40);
 }
@@ -52,22 +52,17 @@ body {
 @keyframes flash-out {
   from {
     background: var(--theme-contrast-background);
   }
 }
 
 .accessible .tree .node.focused .theme-twisty,
 .treeTable .treeRow.selected .theme-twisty {
-  background-position: -28px -14px;
-}
-
-.accessible .tree .node.focused .theme-twisty.open,
-.treeTable .treeRow.selected .theme-twisty.open {
-  background-position: -42px -14px;
+  fill: var(--theme-twisty-selected-fill);
 }
 
 .mainFrame .main-panel {
   flex: 1 1 auto;
   overflow: auto;
 }
 
 .mainFrame {
@@ -241,17 +236,17 @@ body {
   border: 0;
 }
 
 .treeTable:not(:focus) tbody:not(:focus) .treeRow.selected {
   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 }
 
 .treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .theme-twisty {
-  filter: var(--accessibility-tree-focused-node-twisty-brightness);
+  fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 }
 
 .treeTable:not(:focus) tbody:not(:focus) .treeRow.selected *,
 .treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .treeLabelCell:after {
   color: inherit;
 }
 
 .treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .objectBox-string {
@@ -371,17 +366,17 @@ body {
   background-color: transparent;
 }
 
 .accessible .tree:not(:focus) .node.focused {
   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 }
 
 .accessible .tree:not(:focus) .node.focused .theme-twisty {
-  filter: var(--accessibility-tree-focused-node-twisty-brightness);
+  fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 }
 
 .accessible .tree .node:not(.focused):hover {
   background-color: var(--theme-selection-background-hover);
 }
 
 .accessible .tree:focus .node.focused {
   background-color: var(--theme-selection-background);
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -120,18 +120,16 @@ devtools.jar:
     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/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)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
     skin/chart.css (themes/chart.css)
     skin/widgets.css (themes/widgets.css)
@@ -315,12 +313,13 @@ devtools.jar:
     content/netmonitor/src/assets/icons/shield.svg (netmonitor/src/assets/icons/shield.svg)
     content/netmonitor/index.html (netmonitor/index.html)
 
     # Application panel
     content/application/index.html (application/index.html)
 
     # Devtools-components
     skin/images/devtools-components/arrow.svg (themes/images/devtools-components/arrow.svg)
+    skin/images/devtools-components/checkbox.svg (themes/images/devtools-components/checkbox.svg)
 
     # Devtools-reps
     skin/images/devtools-reps/jump-definition.svg (themes/images/devtools-reps/jump-definition.svg)
     skin/images/devtools-reps/open-inspector.svg (themes/images/devtools-reps/open-inspector.svg)
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -13,22 +13,26 @@
   font: message-box;
   font-size: var(--theme-body-font-size);
 
   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
   --tab-line-hover-color: rgba(0,0,0,.2);
   --tab-line-selected-color: var(--blue-50);
   --toggle-thumb-color: white;
   --toggle-track-color: var(--grey-30);
+  --theme-twisty-fill: rgba(0,0,0,.3);
+  --theme-twisty-selected-fill: rgba(255,255,255,1);
 }
 
 :root.theme-dark {
   --tab-line-hover-color: rgba(255,255,255,.2);
   --toggle-thumb-color: var(--grey-40);
   --toggle-track-color: var(--grey-60);
+  --theme-twisty-fill: rgba(255,255,255,.4);
+  --theme-twisty-selected-fill: rgba(255,255,255,1);
 }
 
 :root[platform="mac"] {
   --monospace-font-family: Menlo, monospace;
 }
 
 :root[platform="win"] {
   --monospace-font-family: Consolas, monospace;
@@ -658,81 +662,80 @@ checkbox:-moz-focusring {
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 /* Twisty and checkbox controls */
-.theme-twisty, .theme-checkbox {
+
+.theme-twisty {
   width: 14px;
   height: 14px;
+  cursor: pointer;
+  background-image: url("chrome://devtools/skin/images/devtools-components/arrow.svg");
+  background-position: center;
   background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
-  background-size: 56px 28px;
+  background-size: 9px 9px;
+  -moz-context-properties: fill;
+  fill: var(--theme-twisty-fill);
+  transform: rotate(-90deg);
 }
 
-.theme-twisty {
-  cursor: pointer;
-  background-position: 0 -14px;
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+  transform: rotate(90deg);
 }
 
-.theme-selected ~ .theme-twisty,
-.theme-dark .theme-twisty {
-  background-position: -28px -14px;
+.theme-selected ~ .theme-twisty {
+  fill: var(--theme-twisty-selected-fill);
 }
 
 .theme-twisty:-moz-focusring {
   outline-style: none;
 }
 
-.theme-twisty[open], .theme-twisty.open {
-  background-position: -14px -14px;
-}
-
-.theme-selected ~ .theme-twisty[open],
-.theme-dark .theme-twisty[open], .theme-dark .theme-twisty.open  {
-  background-position: -42px -14px;
+.theme-twisty[open],
+.theme-twisty.open {
+  transform: none;
 }
 
 .theme-twisty[invisible] {
   visibility: hidden;
 }
 
-/* Mirror the twisty for rtl direction */
-.theme-twisty:dir(rtl),
-.theme-twisty:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
 .theme-checkbox {
   display: inline-block;
+  width: 14px;
+  height: 14px;
   border: 0;
   padding: 0;
   outline: none;
-  background-position: 0 0;
+  background-image: url("chrome://devtools/skin/images/devtools-components/checkbox.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  /* Using fill to paint the border, and stroke for the tick */
+  -moz-context-properties: fill, stroke;
+  fill: rgba(0,0,0,.3);
+  stroke: transparent;
 }
 
 .theme-dark .theme-checkbox {
-  background-position: -28px 0;
+  fill: rgba(255,255,255,.4);
 }
 
 .theme-checkbox[checked] {
-  background-position: -14px 0;
+  stroke: rgba(0,0,0,.6);
 }
 
 .theme-dark .theme-checkbox[checked] {
-  background-position: -42px 0;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-twisty, .theme-checkbox {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
-  }
+  stroke: rgba(255,255,255,.8);
 }
 
 /* Throbbers */
 .devtools-throbber::before {
   content: "";
   display: inline-block;
   vertical-align: bottom;
   margin-inline-end: 0.5em;
deleted file mode 100644
index 6782b5463ea9e8ecd5c2ff1e4f80ad9f116ddfa2..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index f1aca3306c10a0698bd0e8c7af9234cb0f842b9e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/devtools-components/checkbox.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="context-fill #0b0b0b">
+  <path d="M3 1h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2zm0 1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1H3z"/>
+  <path stroke="context-stroke" stroke-width="1.4" d="M4.5 8.05L6.25 9.8 9.8 4.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -201,18 +201,20 @@ ul.children + .tag-line::before {
 
 .tag-line .tag-hover:not(.theme-selected) {
   background: var(--theme-selection-background-hover);
   z-index: -1;
 }
 
 .expander {
   display: inline-block;
+  vertical-align: top;
   margin-left: -14px;
-  vertical-align: middle;
+  margin-top: 1px;
+  margin-bottom: 1px;
   /* Make sure the expander still appears above the tag-state */
   position: relative;
   z-index: 1;
 }
 
 .child.collapsed .child, .child.collapsed .children {
   display: none;
 }
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -340,19 +340,19 @@
 .ruleview-expander {
   vertical-align: middle;
 }
 
 .ruleview-propertycontainer .ruleview-expander {
   margin-left: -6px;
 }
 
-.ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
+.ruleview-expander.theme-twisty:dir(rtl):not([open]) {
   /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
-  transform: none;
+  transform: rotate(-90deg);
 }
 
 .ruleview-newproperty {
   margin-inline-start: -10px;
 }
 
 .ruleview-namecontainer,
 .ruleview-propertyvaluecontainer,