Bug 1311178 - Expose some DevTools CSS as resource:// only. r=ntim
For CSS files which were used via both chrome:// and resource://, I converted
all usages to resource:// and removed the chrome:// copy to reduce file
duplication.
I believe most DevTools CSS could be using resource:// throughout, but that's
left as follow up work for now.
MozReview-Commit-ID: G7oxZqjodwv
--- a/browser/base/content/test/general/browser_parsable_css.js
+++ b/browser/base/content/test/general/browser_parsable_css.js
@@ -48,21 +48,16 @@ let whitelist = [
let allowedImageReferences = [
// Bug 1302691
{file: "chrome://devtools/skin/images/dock-bottom-minimize@2x.png",
from: "chrome://devtools/skin/toolbox.css",
isFromDevTools: true},
{file: "chrome://devtools/skin/images/dock-bottom-maximize@2x.png",
from: "chrome://devtools/skin/toolbox.css",
isFromDevTools: true},
-
- // Bug 1302708
- {file: "chrome/devtools/modules/devtools/client/themes/images/filter.svg",
- from: "chrome/devtools/modules/devtools/client/themes/common.css",
- isFromDevTools: true},
];
var moduleLocation = gTestPath.replace(/\/[^\/]*$/i, "/parsingTestHelpers.jsm");
var {generateURIsFromDirTree} = Cu.import(moduleLocation, {});
// Add suffix to stylesheets' URI so that we always load them here and
// have them parsed. Add a random number so that even if we run this
// test multiple times, it would be unlikely to affect each other.
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -130,25 +130,22 @@ devtools.jar:
content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
content/aboutdebugging/initializer.js (aboutdebugging/initializer.js)
content/responsive.html/index.xhtml (responsive.html/index.xhtml)
content/responsive.html/index.js (responsive.html/index.js)
content/dom/dom.html (dom/dom.html)
content/dom/main.js (dom/main.js)
% skin devtools classic/1.0 %skin/
skin/devtools-browser.css (themes/devtools-browser.css)
- skin/common.css (themes/common.css)
- skin/splitters.css (themes/splitters.css)
skin/dark-theme.css (themes/dark-theme.css)
skin/light-theme.css (themes/light-theme.css)
skin/firebug-theme.css (themes/firebug-theme.css)
skin/toolbars.css (themes/toolbars.css)
skin/toolbox.css (themes/toolbox.css)
skin/tooltips.css (themes/tooltips.css)
- skin/variables.css (themes/variables.css)
skin/images/add.svg (themes/images/add.svg)
skin/images/filters.svg (themes/images/filters.svg)
skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
skin/images/angle-swatch.svg (themes/images/angle-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/animation-fast-track.svg (themes/images/animation-fast-track.svg)
--- a/devtools/client/projecteditor/chrome/content/projecteditor.xul
+++ b/devtools/client/projecteditor/chrome/content/projecteditor.xul
@@ -1,16 +1,16 @@
<?xml version="1.0"?>
<!-- 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/. -->
<?xml-stylesheet href="chrome://devtools/skin/light-theme.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/projecteditor/projecteditor.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/common.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/common.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/markup.css" type="text/css"?>
<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<!DOCTYPE window [
<!ENTITY % scratchpadDTD SYSTEM "chrome://devtools/locale/scratchpad.dtd" >
%scratchpadDTD;
<!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
--- a/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
@@ -4,17 +4,17 @@
Basic tests for the HSplitBox component.
-->
<head>
<meta charset="utf-8">
<title>Tree component test</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript "src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
- <link rel="stylesheet" href="chrome://devtools/skin/splitters.css" type="text/css"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/splitters.css" type="text/css"/>
<link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/>
<style>
html {
--theme-splitter-color: black;
}
</style>
</head>
<body>
--- a/devtools/client/shared/test/browser_html_tooltip_hover.js
+++ b/devtools/client/shared/test/browser_html_tooltip_hover.js
@@ -6,17 +6,17 @@
/**
* Test the TooltipToggle helper class for HTMLTooltip
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/variables.css"?>
+ <?xml-stylesheet href="resource://devtools/client/themes/variables.css"?>
<?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="theme-light" title="Tooltip hover test">
<vbox id="container" flex="1">
<hbox id="box1" flex="1"><label>test1</label></hbox>
<hbox id="box2" flex="1"><label>test2</label></hbox>
<hbox id="box3" flex="1"><label>test3</label></hbox>
<hbox id="box4" flex="1"><label>test4</label></hbox>
--- a/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
+++ b/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
@@ -6,17 +6,17 @@
"use strict";
const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
const { AutocompletePopup } = require("devtools/client/shared/autocomplete-popup");
loadHelperScript("helper_inplace_editor.js");
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+ <?xml-stylesheet href="resource://devtools/client/themes/common.css"?>
<?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Tooltip test">
</window>`;
// Test the inplace-editor autocomplete popup is aligned with the completed query.
// Which means when completing "style=display:flex; color:" the popup will aim to be
// aligned with the ":" next to "color".
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -1,13 +1,13 @@
/* 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/. */
-@import url("splitters.css");
+@import url("resource://devtools/client/themes/splitters.css");
:root {
font: message-box;
}
:root[platform="mac"] {
--monospace-font-family: Menlo, monospace;
}
@@ -549,17 +549,17 @@ checkbox:-moz-focusring {
padding-inline-end: 23px;
}
.devtools-searchinput {
background-image: var(--magnifying-glass-image);
}
.devtools-filterinput {
- background-image: url(images/filter.svg#filterinput);
+ background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
}
.devtools-searchinput:-moz-locale-dir(rtl),
.devtools-searchinput:dir(rtl),
.devtools-filterinput:-moz-locale-dir(rtl),
.devtools-filterinput:dir(rtl) {
background-position: calc(100% - 8px) center;
}
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,15 +1,15 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
-@import url(variables.css);
-@import url(common.css);
+@import url(resource://devtools/client/themes/variables.css);
+@import url(resource://devtools/client/themes/common.css);
@import url(toolbars.css);
@import url(tooltips.css);
body {
margin: 0;
}
.theme-body {
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -1,13 +1,13 @@
/* 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/. */
-@import url("splitters.css");
+@import url("resource://devtools/client/themes/splitters.css");
/* Bottom-docked toolbox minimize transition */
.devtools-toolbox-bottom-iframe {
transition: margin-bottom .1s;
}
.devtools-toolbox-side-iframe {
min-width: 465px;
@@ -19,9 +19,8 @@
.devtools-eyedropper-panel {
pointer-events: none;
-moz-appearance: none;
width: 156px;
height: 120px;
background-color: transparent;
border: none;
}
-
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -1,15 +1,15 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
-@import url(variables.css);
-@import url(common.css);
+@import url(resource://devtools/client/themes/variables.css);
+@import url(resource://devtools/client/themes/common.css);
@import url(light-theme.css);
:root {
font-size: 11px;
font-family: var(--proportional-font-family);
}
/* CodeMirror Color Syntax */
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,15 +1,15 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
-@import url(variables.css);
-@import url(common.css);
+@import url(resource://devtools/client/themes/variables.css);
+@import url(resource://devtools/client/themes/common.css);
@import url(toolbars.css);
@import url(tooltips.css);
body {
margin: 0;
}
.theme-body {
--- a/devtools/client/themes/moz.build
+++ b/devtools/client/themes/moz.build
@@ -5,10 +5,11 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DIRS += [
'audio',
]
DevToolsModules(
'common.css',
+ 'splitters.css',
'variables.css',
)
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -53,17 +53,17 @@
}
#performance-toolbar-controls-detail-views .toolbarbutton-text {
padding-inline-start: 4px;
padding-inline-end: 8px;
}
#filter-button {
- list-style-image: url(images/filter.svg);
+ list-style-image: url(chrome://devtools/skin/images/filter.svg);
}
#performance-filter-menupopup > menuitem .menu-iconic-left::after {
content: "";
display: block;
width: 8px;
height: 8px;
margin: 0 8px;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -304,17 +304,17 @@
@media (min-resolution: 1.1dppx) {
.ruleview-warning {
background-image: url(images/alerticon-warning@2x.png);
}
}
.ruleview-overridden-rule-filter {
- background-image: url(images/filter.svg#filterinput);
+ background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
background-size: 11px 11px;
margin-inline-start: 5px;
display: inline-block;
width: 11px;
height: 11px;
}
.ruleview-ruleopen {
--- a/devtools/client/themes/shims/common.css
+++ b/devtools/client/themes/shims/common.css
@@ -2,9 +2,9 @@
* 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/. */
/**
* This file only exists to support add-ons which import this style sheet at a
* specific path.
*/
-@import url("chrome://devtools/skin/common.css");
+@import url("resource://devtools/client/themes/common.css");
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -6,42 +6,42 @@
/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
.theme-light {
--toolbar-tab-hover: rgba(170, 170, 170, .2);
--toolbar-tab-hover-active: rgba(170, 170, 170, .4);
--searchbox-background-color: #ffee99;
--searchbox-border-color: #ffbf00;
--searcbox-no-match-background-color: #ffe5e5;
--searcbox-no-match-border-color: #e52e2e;
- --magnifying-glass-image: url(images/search.svg);
- --filter-image: url(images/filter.svg);
- --tool-options-image: url(images/tool-options.svg);
+ --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+ --filter-image: url(chrome://devtools/skin/images/filter.svg);
+ --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
--icon-filter: none;
- --checked-icon-filter: url(images/filters.svg#checked-icon-state);
+ --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
--toolbar-button-border-color: rgba(170, 170, 170, .5);
}
.theme-dark {
--toolbar-tab-hover: hsla(206, 37%, 4%, .2);
--toolbar-tab-hover-active: hsla(206, 37%, 4%, .4);
--searchbox-background-color: #4d4222;
--searchbox-border-color: #d99f2b;
--searcbox-no-match-background-color: #402325;
--searcbox-no-match-border-color: #cc3d3d;
- --magnifying-glass-image: url(images/search.svg);
- --filter-image: url(images/filter.svg);
- --tool-options-image: url(images/tool-options.svg);
+ --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+ --filter-image: url(chrome://devtools/skin/images/filter.svg);
+ --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
--icon-filter: invert(1);
- --checked-icon-filter: url(images/filters.svg#dark-theme-checked-icon-state);
+ --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#dark-theme-checked-icon-state);
--toolbar-button-border-color: rgba(0, 0, 0, .4);
}
.theme-firebug {
- --magnifying-glass-image: url(images/search.svg);
- --tool-options-image: url(images/firebug/tool-options.svg);
+ --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+ --tool-options-image: url(chrome://devtools/skin/images/firebug/tool-options.svg);
--icon-filter: none;
--checked-icon-filter: none;
--toolbar-button-border-color: rgba(170, 170, 170, .5);
}
/* Toolbars */
.devtools-toolbar,
--- a/devtools/client/webide/content/logs.xhtml
+++ b/devtools/client/webide/content/logs.xhtml
@@ -8,17 +8,17 @@
<!ENTITY % webideDTD SYSTEM "chrome://devtools/locale/webide.dtd" >
%webideDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf8"/>
<link rel="stylesheet" href="chrome://webide/skin/deck.css" type="text/css"/>
- <link rel="stylesheet" href="chrome://devtools/skin/common.css" type="text/css"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css"/>
<link rel="stylesheet" href="chrome://webide/skin/logs.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"></script>
<script type="application/javascript;version=1.8" src="logs.js"></script>
</head>
<body>
<div id="controls">
<a id="close">&deck_close;</a>
--- a/devtools/client/webide/content/webide.xul
+++ b/devtools/client/webide/content/webide.xul
@@ -7,17 +7,17 @@
<!DOCTYPE window [
<!ENTITY % webideDTD SYSTEM "chrome://devtools/locale/webide.dtd" >
%webideDTD;
]>
<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
-<?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/common.css"?>
<?xml-stylesheet href="chrome://webide/skin/webide.css"?>
<window id="webide" onclose="return UI.canCloseProject();"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="&windowTitle;"
windowtype="devtools:webide"
macanimationtype="document"