--- a/devtools/client/aboutdebugging/aboutdebugging.xhtml
+++ b/devtools/client/aboutdebugging/aboutdebugging.xhtml
@@ -8,15 +8,16 @@
<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd"> %toolboxDTD;
<!ENTITY % aboutdebuggingDTD SYSTEM "chrome://devtools/locale/aboutdebugging.dtd"> %aboutdebuggingDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>&aboutDebugging.fullTitle;</title>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" type="text/css"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/aboutdebugging/aboutdebugging.css" type="text/css"/>
<script type="application/javascript" src="resource://devtools/client/shared/vendor/react.js"></script>
<script type="application/javascript;version=1.8" src="chrome://devtools/content/aboutdebugging/initializer.js"></script>
</head>
<body id="body">
</body>
</html>
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -1,16 +1,17 @@
<?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/. -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/animationinspector.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
</head>
<body class="theme-sidebar devtools-monospace" role="application" empty="true">
<div id="global-toolbar" class="theme-toolbar">
<span id="all-animations-label" class="label"></span>
<button id="toggle-all" standalone="true" class="devtools-button pause-button"></button>
</div>
--- a/devtools/client/canvasdebugger/canvasdebugger.xul
+++ b/devtools/client/canvasdebugger/canvasdebugger.xul
@@ -1,13 +1,14 @@
<?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://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/canvasdebugger.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % canvasDebuggerDTD SYSTEM "chrome://devtools/locale/canvasdebugger.dtd">
%canvasDebuggerDTD;
]>
--- a/devtools/client/debugger/debugger.xul
+++ b/devtools/client/debugger/debugger.xul
@@ -1,13 +1,14 @@
<?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/. -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/debugger/debugger.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/debugger.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/debugger.dtd">
%debuggerDTD;
]>
--- a/devtools/client/debugger/new/index.html
+++ b/devtools/client/debugger/new/index.html
@@ -8,16 +8,17 @@
type="text/css"
href="resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css" />
<link rel="stylesheet"
type="text/css"
href="resource://devtools/client/sourceeditor/codemirror/addon/dialog/dialog.css" />
<link rel="stylesheet"
type="text/css"
href="resource://devtools/client/sourceeditor/codemirror/mozilla.css" />
+ <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/variables.css" />
<link rel="stylesheet" type="text/css" href="resource://devtools/client/debugger/new/styles.css" />
</head>
<body>
<div id="mount"></div>
<script type="application/javascript;version=1.8"
src="chrome://devtools/content/shared/theme-switching.js"></script>
<script type="text/javascript">
const { BrowserLoader } = Components.utils.import("resource://devtools/client/shared/browser-loader.js", {});
--- a/devtools/client/dom/dom.html
+++ b/devtools/client/dom/dom.html
@@ -2,16 +2,17 @@
<!-- 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/. -->
<!DOCTYPE html>
<html dir="">
<head>
<meta charset="utf-8"/>
+ <link href="resource://devtools/client/themes/variables.css" rel="stylesheet" />
<link href="resource://devtools/client/dom/content/dom-view.css" rel="stylesheet" />
<link href="resource://devtools/client/jsonview/css/toolbar.css" rel="stylesheet" />
<link href="resource://devtools/client/shared/components/tree/tree-view.css" rel="stylesheet" />
<script type="text/javascript;version=1.8"
src="chrome://devtools/content/shared/theme-switching.js"></script>
</head>
<body class="theme-body devtools-monospace" role="application">
--- a/devtools/client/framework/toolbox-options.xhtml
+++ b/devtools/client/framework/toolbox-options.xhtml
@@ -5,16 +5,17 @@
<!DOCTYPE html [
<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
%toolboxDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Toolbox option</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/framework/options-panel.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
</head>
<body role="application" class="theme-body">
<form id="options-panel">
<div id="tools-box" class="options-vertical-pane">
<fieldset id="default-tools-box" class="options-groupbox">
<legend>&options.selectDefaultTools.label2;</legend>
--- a/devtools/client/framework/toolbox.xul
+++ b/devtools/client/framework/toolbox.xul
@@ -1,27 +1,27 @@
<?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/. -->
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="resource://devtools/client/themes/toolbox.css" type="text/css"?>
-<?xml-stylesheet href="resource://devtools/client/shared/components/notification-box.css" type="text/css"?>
-
-<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<!DOCTYPE window [
<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
%toolboxDTD;
<!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
%editMenuStrings;
<!ENTITY % globalKeysDTD SYSTEM "chrome://global/locale/globalKeys.dtd">
%globalKeysDTD;
]>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/toolbox.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/components/notification-box.css" type="text/css"?>
+<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script type="application/javascript;version=1.8"
src="chrome://devtools/content/shared/theme-switching.js"/>
<script type="application/javascript"
src="chrome://global/content/viewSourceUtils.js"/>
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -3,16 +3,17 @@
- 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/. -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css"/>
<link rel="stylesheet" href="resource://devtools/client/shared/widgets/widgets.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/widgets.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/inspector.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/rules.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/computed.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/fonts.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/boxmodel.css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/layout.css"/>
--- a/devtools/client/inspector/markup/markup.xhtml
+++ b/devtools/client/inspector/markup/markup.xhtml
@@ -2,16 +2,17 @@
<!-- 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/. -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/markup.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/addon/dialog/dialog.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/mozilla.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"
--- a/devtools/client/memory/memory.xhtml
+++ b/devtools/client/memory/memory.xhtml
@@ -6,16 +6,17 @@
%htmlDTD;
]>
<!-- 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/. -->
<html xmlns="http://www.w3.org/1999/xhtml" dir="">
<head>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/widgets.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/memory.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/components-frame.css" type="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/components-h-split-box.css" type="text/css"/>
</head>
<body class="theme-body">
<div id="app"></div>
--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -1,13 +1,14 @@
<?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/. -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/netmonitor.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script type="application/javascript;version=1.8"
--- a/devtools/client/performance/performance.xul
+++ b/devtools/client/performance/performance.xul
@@ -1,13 +1,14 @@
<?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/. -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/performance.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/jit-optimizations.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/components-frame.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % performanceDTD SYSTEM "chrome://devtools/locale/performance.dtd">
%performanceDTD;
--- a/devtools/client/responsive.html/index.xhtml
+++ b/devtools/client/responsive.html/index.xhtml
@@ -2,16 +2,18 @@
<!-- 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/. -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css"
+ href="resource://devtools/client/themes/variables.css"/>
+ <link rel="stylesheet" type="text/css"
href="resource://devtools/client/responsive.html/index.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="./index.js"></script>
</head>
<body class="theme-body" role="application">
<div id="root"/>
--- a/devtools/client/scratchpad/scratchpad.xul
+++ b/devtools/client/scratchpad/scratchpad.xul
@@ -9,16 +9,17 @@
%scratchpadDTD;
<!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
%editMenuStrings;
<!ENTITY % sourceEditorStrings SYSTEM "chrome://devtools/locale/sourceeditor.dtd">
%sourceEditorStrings;
]>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css"?>
<?xml-stylesheet href="resource://devtools/client/themes/scratchpad.css"?>
<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<window id="main-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&window.title;"
windowtype="devtools:scratchpad"
macanimationtype="document"
--- a/devtools/client/shadereditor/shadereditor.xul
+++ b/devtools/client/shadereditor/shadereditor.xul
@@ -1,13 +1,14 @@
<?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://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/shadereditor.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/shadereditor.dtd">
%debuggerDTD;
]>
--- a/devtools/client/shared/widgets/VariablesView.xul
+++ b/devtools/client/shared/widgets/VariablesView.xul
@@ -1,13 +1,14 @@
<?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://global/skin/global.css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % viewDTD SYSTEM "chrome://devtools/locale/VariablesView.dtd">
%viewDTD;
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&PropertiesViewWindowTitle;">
--- a/devtools/client/shared/widgets/graphs-frame.xhtml
+++ b/devtools/client/shared/widgets/graphs-frame.xhtml
@@ -2,16 +2,17 @@
<!-- 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/. -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" href="resource://devtools/client/themes/variables.css" ype="text/css"/>
<link rel="stylesheet" href="resource://devtools/client/themes/widgets.css" ype="text/css"/>
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
--- a/devtools/client/sourceeditor/editor.js
+++ b/devtools/client/sourceeditor/editor.js
@@ -41,16 +41,17 @@ const L10N = new LocalizationHelper("dev
const { OS } = Services.appinfo;
// CM_STYLES, CM_SCRIPTS and CM_IFRAME represent the HTML,
// JavaScript and CSS that is injected into an iframe in
// order to initialize a CodeMirror instance.
const CM_STYLES = [
+ "resource://devtools/client/themes/variables.css",
"resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css",
"resource://devtools/client/sourceeditor/codemirror/addon/dialog/dialog.css",
"resource://devtools/client/sourceeditor/codemirror/mozilla.css"
];
const CM_SCRIPTS = [
"chrome://devtools/content/sourceeditor/codemirror/codemirror.bundle.js",
];
--- a/devtools/client/storage/storage.xul
+++ b/devtools/client/storage/storage.xul
@@ -1,13 +1,14 @@
<?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/. -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/storage.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % storageDTD SYSTEM "chrome://devtools/locale/storage.dtd">
%storageDTD;
]>
--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -9,16 +9,17 @@
%editMenuStrings;
<!ENTITY % sourceEditorStrings SYSTEM "chrome://devtools/locale/sourceeditor.dtd">
%sourceEditorStrings;
<!ENTITY % csscoverageDTD SYSTEM "chrome://devtools-shared/locale/csscoverage.dtd">
%csscoverageDTD;
]>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/splitview.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/splitview.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/styleeditor.css" type="text/css"?>
<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -445,17 +445,30 @@ 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("images/clear.svg");
+ --filter-image: url(images/filter.svg);
+ --clear-icon-url: url(images/clear.svg);
+ --magnifying-glass-image: url(images/search.svg);
+ --tool-options-image: url(images/tool-options.svg);
+ --checked-icon-filter: url(images/filters.svg#checked-icon-state);
+}
+
+:root.theme-dark {
+ --checked-icon-filter: url(images/filters.svg#dark-theme-checked-icon-state);
+}
+
+:root.theme-firebug {
+ --tool-options-image: url(images/firebug/tool-options.svg);
+ --checked-icon-filter: none;
}
.devtools-button.devtools-clear-icon::before {
background-image: var(--clear-icon-url);
}
.devtools-button.devtools-filter-icon::before {
background-image: var(--filter-image);
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,14 +1,13 @@
/* 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(toolbars.css);
@import url(tooltips.css);
body {
margin: 0;
}
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -1,13 +1,14 @@
/* 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/. */
/* devtools-browser.css is loaded via a chrome:// url */
+@import url("resource://devtools/client/themes/variables.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 {
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -6,16 +6,17 @@
:root {
--eyedropper-image: url(images/command-eyedropper.svg);
}
.theme-firebug {
--eyedropper-image: url(images/firebug/command-eyedropper.svg);
}
+:root,
:root.theme-light {
--breadcrumbs-border-color: #f3f3f3;
}
:root.theme-dark {
--breadcrumbs-border-color: #454d5d;
}
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,14 +1,13 @@
/* 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(toolbars.css);
@import url(tooltips.css);
body {
margin: 0;
}
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -3,29 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* This file is loaded by both browser.xul and toolbox.xul. Therefore, rules
defined here can not rely on toolbox.xul variables. */
/* Splitters */
:root {
- /* Define the widths of the draggable areas on each side of a splitter. top
- and bottom widths are used for horizontal splitters, inline-start and
- inline-end for side splitters.*/
-
- --devtools-splitter-top-width: 2px;
- --devtools-splitter-bottom-width: 2px;
-
- /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
- --devtools-splitter-inline-start-width: 1px;
- --devtools-splitter-inline-end-width: 4px;
-}
-
-:root[devtoolstheme="light"] {
/* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
--devtools-splitter-color: #dde1e4;
}
:root[devtoolstheme="dark"],
:root[devtoolstheme="firebug"] {
--devtools-splitter-color: #42484f;
}
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -1,53 +1,13 @@
/* 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/. */
-/* 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);
- --icon-filter: none;
- --checked-icon-filter: url(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);
- --icon-filter: invert(1);
- --checked-icon-filter: url(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);
- --icon-filter: none;
- --checked-icon-filter: none;
- --toolbar-button-border-color: rgba(170, 170, 170, .5);
-}
-
-
/* Toolbars */
.devtools-toolbar,
.devtools-sidebar-tabs tabs {
-moz-appearance: none;
padding: 0;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -1,24 +1,38 @@
/* 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/. */
-/* Variable declarations for light and dark devtools themes.
+/* Variable declarations for devtools. Contains theme-specific variables as well as
+ * variables shared by several different stylesheets.
+ *
+ * All shared variables should live in this file. Variables defined in other files should
+ * only be used in their own file.
+ *
* Colors are taken from:
* https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
* Changes should be kept in sync with commandline.css and commandline.inc.css.
*/
/* IMPORTANT NOTE:
* This file is parsed in js (see client/shared/theme.js)
* so the formatting should be consistent (i.e. no '}' inside a rule).
*/
+/* IMPORTANT NOTE:
+ * Avoid creating variables for URLs to other resources. URLs in variables have to be
+ * absolute and use the chrome:// protocol, which won't work in a content tab.
+ */
+
+/* Use the theme-light variables as the default for :root as well so that valid variables
+ * are available even if the theme-* class is still missing.
+ */
+:root,
:root.theme-light {
--theme-body-background: white;
--theme-sidebar-background: white;
--theme-contrast-background: #e6b064;
--theme-tab-toolbar-background: #fcfcfc;
--theme-toolbar-background: #fcfcfc;
--theme-selection-background: #4c9ed9;
@@ -39,20 +53,16 @@
--theme-highlight-bluegrey: #0072ab;
--theme-highlight-purple: #5b5fff;
--theme-highlight-lightorange: #d97e00;
--theme-highlight-orange: #f13c00;
--theme-highlight-red: #ed2655;
--theme-highlight-pink: #b82ee5;
--theme-highlight-gray: #dde1e4;
- /* For accessibility purposes we want to enhance the focus styling. This
- * should improve keyboard navigation usability. */
- --theme-focus-outline-color: #000000;
-
/* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
--theme-graphs-green: #85d175;
--theme-graphs-blue: #83b7f6;
--theme-graphs-bluegrey: #0072ab;
--theme-graphs-purple: #b693eb;
--theme-graphs-yellow: #efc052;
--theme-graphs-orange: #d97e00;
--theme-graphs-red: #e57180;
@@ -67,16 +77,48 @@
/* Tooltips */
--theme-tooltip-border: #d9e1e8;
--theme-tooltip-background: rgba(255, 255, 255, .9);
--theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
/* Command line */
--theme-command-line-image: url(resource://devtools/client/themes/images/commandline-icon.svg#light-theme);
--theme-command-line-image-focus: url(resource://devtools/client/themes/images/commandline-icon.svg#light-theme-focus);
+
+ /* Splitters: widths of draggable areas on each side:
+ * - top/bottom -> horizontal splitters.
+ * - inline-start/inline-end -> vertical splitters
+ * (inline-start width is smaller to avoid overlaps on scrollbars)
+ */
+ --devtools-splitter-top-width: 2px;
+ --devtools-splitter-bottom-width: 2px;
+ --devtools-splitter-inline-start-width: 1px;
+ --devtools-splitter-inline-end-width: 4px;
+
+ /* Toolbars */
+ --toolbar-tab-hover: rgba(170, 170, 170, .2);
+ --toolbar-tab-hover-active: rgba(170, 170, 170, .4);
+ --toolbar-button-border-color: rgba(170, 170, 170, .5);
+
+ /* Searchbox */
+ --searchbox-background-color: #ffee99;
+ --searchbox-border-color: #ffbf00;
+ --searcbox-no-match-background-color: #ffe5e5;
+ --searcbox-no-match-border-color: #e52e2e;
+
+ /* Icons */
+ --icon-filter: none;
+
+ /* Focus and accessibility */
+ /* For accessibility purposes we want to enhance the focus styling. This
+ * should improve keyboard navigation usability. */
+ --theme-focus-outline-color: #000000;
+ --theme-focus-border-color-textbox: #0675d3;
+ --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
+ --theme-focus-box-shadow-textbox: 0 0 0 1px rgba(97,181,255,.75);
}
:root.theme-dark {
--theme-body-background: #393f4c;
--theme-sidebar-background: #393f4c;
--theme-contrast-background: #ffb35b;
--theme-tab-toolbar-background: #272b35;
@@ -99,20 +141,16 @@
--theme-highlight-bluegrey: #5e88b0;
--theme-highlight-purple: #bcb8db;
--theme-highlight-lightorange: #d99b28;
--theme-highlight-orange: #d96629;
--theme-highlight-red: #eb5368;
--theme-highlight-pink: #df80ff;
--theme-highlight-gray: #e9f4fe;
- /* For accessibility purposes we want to enhance the focus styling. This
- * should improve keyboard navigation usability. */
- --theme-focus-outline-color: #ced3d9;
-
/* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
--theme-graphs-green: #70bf53;
--theme-graphs-blue: #46afe3;
--theme-graphs-bluegrey: #5e88b0;
--theme-graphs-purple: #df80ff;
--theme-graphs-yellow: #d99b28;
--theme-graphs-orange: #d96629;
--theme-graphs-red: #eb5368;
@@ -127,16 +165,33 @@
/* Tooltips */
--theme-tooltip-border: #434850;
--theme-tooltip-background: rgba(19, 28, 38, .9);
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
/* Command line */
--theme-command-line-image: url(resource://devtools/client/themes/images/commandline-icon.svg#dark-theme);
--theme-command-line-image-focus: url(resource://devtools/client/themes/images/commandline-icon.svg#dark-theme-focus);
+
+ /* Toolbars */
+ --toolbar-tab-hover: hsla(206, 37%, 4%, .2);
+ --toolbar-tab-hover-active: hsla(206, 37%, 4%, .4);
+ --toolbar-button-border-color: rgba(0, 0, 0, .4);
+
+ /* Searchbox */
+ --searchbox-background-color: #4d4222;
+ --searchbox-border-color: #d99f2b;
+ --searcbox-no-match-background-color: #402325;
+ --searcbox-no-match-border-color: #cc3d3d;
+
+ /* Icons */
+ --icon-filter: invert(1);
+
+ /* Focus and accessibility */
+ --theme-focus-outline-color: #ced3d9;
}
:root.theme-firebug {
--theme-body-background: #fcfcfc;
--theme-sidebar-background: #fcfcfc;
--theme-contrast-background: #e6b064;
--theme-tab-toolbar-background: #d8eaf9;
@@ -185,19 +240,15 @@
/* Header */
--theme-header-background: #F0F0F0 linear-gradient(to top,
rgba(0, 0, 0, 0.1),
transparent) repeat-x;
/* Command line */
--theme-command-line-image: url(resource://devtools/client/themes/images/firebug/commandline-icon.svg);
--theme-command-line-image-focus: url(resource://devtools/client/themes/images/firebug/commandline-icon.svg#focus);
-}
-:root {
- --theme-focus-border-color-textbox: #0675d3;
- --theme-textbox-box-shadow: rgba(97,181,255,.75);
+ /* Toolbars */
+ --toolbar-button-border-color: rgba(170, 170, 170, .5);
- /* For accessibility purposes we want to enhance the focus styling. This
- * should improve keyboard navigation usability. */
- --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
- --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
+ /* Icons */
+ --icon-filter: none;
}
--- a/devtools/client/webaudioeditor/webaudioeditor.xul
+++ b/devtools/client/webaudioeditor/webaudioeditor.xul
@@ -1,13 +1,14 @@
<?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://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/webaudioeditor.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/webaudioeditor.dtd">
%debuggerDTD;
]>
--- a/devtools/client/webconsole/webconsole.xul
+++ b/devtools/client/webconsole/webconsole.xul
@@ -2,16 +2,18 @@
<!-- 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/. -->
<!DOCTYPE window [
<!ENTITY % webConsoleDTD SYSTEM "chrome://devtools/locale/webConsole.dtd">
%webConsoleDTD;
]>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/variables.css"
+ type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/widgets.css"
type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/webconsole.css"
type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/themes/components-frame.css"
type="text/css"?>
<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
--- a/devtools/client/webide/content/logs.xhtml
+++ b/devtools/client/webide/content/logs.xhtml
@@ -8,16 +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="resource://devtools/client/themes/variables.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">