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
--- 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] {