Bug 1291049 - Use relative urls for images in inspector stylesheets draft
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 17 Oct 2016 19:06:53 +0200
changeset 426863 c94d4465bbdd76bb370fb7c06d3acdcc3684d672
parent 426862 885ea657cf57e371e4f7ed865efd61a9b09a09c1
child 426864 7a53db146bd02622241bbbe7f73fe3eaf18b3fc2
child 426936 efa538f891f386ddf3eafcbc8a5b804b9ced9e0a
push id32831
push userjdescottes@mozilla.com
push dateWed, 19 Oct 2016 08:50:06 +0000
bugs1291049, 1310337
milestone52.0a1
Bug 1291049 - Use relative urls for images in inspector stylesheets This is a temporary workaround to have images when loading the inspector in a content tab but can't be committed as is (see Bug 1310337) MozReview-Commit-ID: FMr65ynW53h
devtools/client/themes/common.css
devtools/client/themes/inspector.css
devtools/client/themes/rules.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -342,25 +342,25 @@ checkbox:-moz-focusring {
 
 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin-inline-end: 4px;
 }
 
 .devtools-menulist > .menulist-dropmarker {
   -moz-appearance: none;
   display: -moz-box;
-  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  list-style-image: url(images/dropmarker.svg);
   -moz-box-align: center;
   min-width: 16px;
 }
 
 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;
-  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  list-style-image: url(images/dropmarker.svg);
   -moz-box-align: center;
   padding: 0 3px;
 }
 
 /* Icon-only buttons */
 .devtools-button:empty::before,
 .devtools-toolbarbutton:not([label]):not([disabled]) > image {
   opacity: 0.8;
@@ -445,17 +445,17 @@ checkbox:-moz-focusring {
 }
 .theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .theme-light .devtools-toolbarbutton:not([disabled])[label][open],
 .theme-light .devtools-button:not(:empty)[checked=true] {
   background: rgba(76, 158, 217, .3); /* Select highlight blue */
 }
 
 :root {
-  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+  --clear-icon-url: url(images/clear.svg);
 }
 
 .devtools-button.devtools-clear-icon::before {
   background-image: var(--clear-icon-url);
 }
 
 .devtools-button.devtools-filter-icon::before {
   background-image: var(--filter-image);
@@ -659,40 +659,40 @@ checkbox:-moz-focusring {
 }
 
 .devtools-searchinput-clear:dir(rtl) {
   right: unset;
   left: 7px;
 }
 
 .theme-dark .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
+  background-image: url(images/search-clear-dark.svg);
 }
 
 .theme-light .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+  background-image: url(images/search-clear-light.svg);
 }
 
 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
+  background-image: url(images/search-clear-failed.svg) !important;
 }
 
 .devtools-searchinput-clear:hover {
   background-position: -16px 0;
 }
 
 .theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 .theme-dark .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
+  list-style-image: url(images/search-clear-dark.svg);
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 .theme-light .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+  list-style-image: url(images/search-clear-light.svg);
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
   margin-bottom: 0;
 }
 
@@ -701,17 +701,17 @@ checkbox:-moz-focusring {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 /* Twisty and checkbox controls */
 .theme-twisty, .theme-checkbox {
   width: 14px;
   height: 14px;
   background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url(images/controls.png);
   background-size: 56px 28px;
 }
 
 .theme-twisty {
   cursor: pointer;
   background-position: 0 -14px;
 }
 
@@ -760,17 +760,17 @@ checkbox:-moz-focusring {
 }
 
 .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");
+    background-image: url(images/controls@2x.png);
   }
 }
 
 /* Throbbers */
 .devtools-throbber::before {
   content: "";
   display: inline-block;
   vertical-align: bottom;
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -86,18 +86,18 @@ window {
 
 #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
   flex-grow: 1;
   display: inline-block;
 }
 
 /* Add element toolbar button */
 #inspector-element-add-button::before {
-  background-image: url("chrome://devtools/skin/images/add.svg");
-  list-style-image: url("chrome://devtools/skin/images/add.svg");
+  background-image: url(images/add.svg);
+  list-style-image: url(images/add.svg);
   -moz-user-focus: normal;
 }
 
 #inspector-searchlabel {
   overflow: hidden;
   margin-inline-end: 2px;
 }
 
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -392,33 +392,33 @@
   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(images/cubic-bezier-swatch.png);
   background-size: 1em;
 }
 
 .ruleview-filterswatch {
-  background: url("chrome://devtools/skin/images/filter-swatch.svg");
+  background: url(images/filter-swatch.svg);
   background-size: 1em;
 }
 
 .ruleview-angleswatch {
-  background: url("chrome://devtools/skin/images/angle-swatch.svg");
+  background: url(images/angle-swatch.svg);
   background-size: 1em;
 }
 
 @media (min-resolution: 1.1dppx) {
   .ruleview-bezierswatch {
-    background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
+    background: url(images/cubic-bezier-swatch@2x.png);
     background-size: 1em;
   }
 }
 
 .ruleview-overridden {
   text-decoration: line-through;
 }
 
@@ -489,38 +489,38 @@
 
 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
   color: inherit;
 }
 
 .ruleview-selectorhighlighter {
-  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  background: url(images/vview-open-inspector.png) no-repeat 0 0;
   padding-left: 16px;
   margin-left: 5px;
   cursor: pointer;
 }
 
 .ruleview-selectorhighlighter:hover {
   filter: url(images/filters.svg#checked-icon-state);
 }
 
 .ruleview-selectorhighlighter:active,
 .ruleview-selectorhighlighter.highlighted {
   filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 }
 
 #ruleview-add-rule-button::before {
-  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-image: url(images/add.svg);
   background-size: cover;
 }
 
 #pseudo-class-panel-toggle::before {
-  background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
+  background-image: url(images/pseudo-class.svg);
   background-size: cover;
 }
 
 .ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
 .ruleview-overridden-rule-filter:hover {
   opacity: 1;
@@ -531,17 +531,17 @@
 }
 
 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
   icons to indicate when CSS rules can be disabled or enabled. */
 
 .theme-firebug .ruleview-rule .theme-checkbox {
   background-repeat: no-repeat;
   background-size: 12px 12px;
-  background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
+  background-image: url(images/firebug/disable.svg);
   background-position: 0 0;
 }
 
 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
   filter: grayscale(1);
 }
 
 .theme-firebug .ruleview-rule .theme-checkbox[checked] {