Bug 1311541 - load common.css in all devtools documents;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 23 Nov 2016 11:29:31 +0100
changeset 451507 640d431de76d5227db133fafb6dbf7545ec93dfe
parent 451506 7b272789557e4228339e520149a8873b53b6a3c4
child 451508 94aa503fb94ee56f876307e322d18ceeffdda0e5
push id39208
push userjdescottes@mozilla.com
push dateTue, 20 Dec 2016 14:43:39 +0000
reviewersbgrins
bugs1311541
milestone53.0a1
Bug 1311541 - load common.css in all devtools documents;r=bgrins MozReview-Commit-ID: 4lm3bfh9gH8
devtools/client/animationinspector/animation-inspector.xhtml
devtools/client/canvasdebugger/canvasdebugger.xul
devtools/client/debugger/debugger.xul
devtools/client/debugger/new/index.html
devtools/client/dom/dom.html
devtools/client/framework/toolbox-options.xhtml
devtools/client/framework/toolbox.xul
devtools/client/inspector/inspector.xhtml
devtools/client/inspector/markup/markup.xhtml
devtools/client/memory/memory.xhtml
devtools/client/netmonitor/netmonitor.xul
devtools/client/performance/performance.xul
devtools/client/projecteditor/chrome/content/projecteditor.xul
devtools/client/responsive.html/index.xhtml
devtools/client/scratchpad/scratchpad.xul
devtools/client/shadereditor/shadereditor.xul
devtools/client/shared/components/test/mochitest/test_tree_07.html
devtools/client/shared/components/test/mochitest/test_tree_08.html
devtools/client/shared/components/test/mochitest/test_tree_09.html
devtools/client/shared/components/test/mochitest/test_tree_10.html
devtools/client/shared/components/test/mochitest/test_tree_11.html
devtools/client/shared/test/browser_html_tooltip_arrow-01.js
devtools/client/shared/test/browser_html_tooltip_arrow-02.js
devtools/client/shared/test/browser_tableWidget_basic.js
devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
devtools/client/shared/widgets/VariablesView.xul
devtools/client/shared/widgets/graphs-frame.xhtml
devtools/client/sourceeditor/editor.js
devtools/client/storage/storage.xul
devtools/client/styleeditor/styleeditor.xul
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/splitters.css
devtools/client/themes/toolbars.css
devtools/client/themes/variables.css
devtools/client/webaudioeditor/webaudioeditor.xul
devtools/client/webconsole/webconsole.xul
--- 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/common.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/common.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/common.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
@@ -1,14 +1,15 @@
 <!-- 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>
+    <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/common.css" />
     <link rel="stylesheet"
           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"
--- 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/common.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/common.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,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/common.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"?>
 
 <!DOCTYPE window [
 <!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
 %toolboxDTD;
--- 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/common.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/common.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/common.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/common.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/common.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/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="resource://devtools/client/themes/common.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/themes/light-theme.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/themes/projecteditor/projecteditor.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/debugger/debugger.css" type="text/css"?>
-<?xml-stylesheet href="resource://devtools/client/themes/common.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/themes/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/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/common.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/common.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/common.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/components/test/mochitest/test_tree_07.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_07.html
@@ -6,16 +6,17 @@
 <!--
 Test that arrows get the open attribute when their item's children are expanded.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css">
   <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
--- a/devtools/client/shared/components/test/mochitest/test_tree_08.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_08.html
@@ -7,16 +7,17 @@
 Test that when an item in the Tree component is clicked, it steals focus from
 other inputs.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css">
   <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
--- a/devtools/client/shared/components/test/mochitest/test_tree_09.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_09.html
@@ -6,16 +6,17 @@
 <!--
 Test that when an item in the Tree component is expanded or collapsed the appropriate event handler fires.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css">
   <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
--- a/devtools/client/shared/components/test/mochitest/test_tree_10.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_10.html
@@ -6,16 +6,17 @@
 <!--
 Test that when an item in the Tree component is expanded or collapsed the appropriate event handler fires.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css">
   <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
--- a/devtools/client/shared/components/test/mochitest/test_tree_11.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_11.html
@@ -6,16 +6,17 @@
 <!--
 Test that when an item in the Tree component is focused by arrow key, the view is scrolled.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css">
   <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
   <style>
    * {
        margin: 0;
        padding: 0;
        height: 30px;
        max-height: 30px;
        min-height: 30px;
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -15,16 +15,17 @@ const getAnchor = function (position) {
                                           height: 10px;
                                           position: absolute;
                                           background: red;
                                           ${position}"></html:div>`;
 };
 
 const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
   <?xml-stylesheet href="chrome://global/skin/global.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/common.css"?>
   <?xml-stylesheet href="resource://devtools/client/themes/light-theme.css"?>
 
   <window class="theme-light"
           xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:html="http://www.w3.org/1999/xhtml"
           title="Tooltip test">
     <vbox flex="1" style="position: relative">
       ${getAnchor("top: 0; left: 0;")}
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
@@ -14,16 +14,17 @@ const getAnchor = function (position) {
   return `<html:div class="anchor" style="height: 5px;
                                           position: absolute;
                                           background: red;
                                           ${position}"></html:div>`;
 };
 
 const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
   <?xml-stylesheet href="chrome://global/skin/global.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/common.css"?>
   <?xml-stylesheet href="resource://devtools/client/themes/light-theme.css"?>
 
   <window class="theme-light"
           xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:html="http://www.w3.org/1999/xhtml"
           title="Tooltip test">
     <vbox flex="1" style="position: relative">
       ${getAnchor("top:    0; left: 0; width: 50px;")}
--- a/devtools/client/shared/test/browser_tableWidget_basic.js
+++ b/devtools/client/shared/test/browser_tableWidget_basic.js
@@ -6,16 +6,17 @@
 
 "use strict";
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
 
   // Uncomment these lines to help with visual debugging. When uncommented they
   // dump a couple of thousand errors in the log (bug 1258285)
+  // "<?xml-stylesheet href='resource://devtools/client/themes/common.css'?>" +
   // "<?xml-stylesheet href='resource://devtools/client/themes/light-theme.css'?>" +
   // "<?xml-stylesheet href='resource://devtools/client/themes/widgets.css'?>" +
 
   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
   " title='Table Widget' width='600' height='500'>" +
   "<box flex='1' class='theme-light'/></window>";
 
 const {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
--- a/devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
+++ b/devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
@@ -6,16 +6,17 @@
 
 "use strict";
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
 
   // Uncomment these lines to help with visual debugging. When uncommented they
   // dump a couple of thousand errors in the log (bug 1258285)
+  // "<?xml-stylesheet href='resource://devtools/client/themes/common.css'?>" +
   // "<?xml-stylesheet href='resource://devtools/client/themes/light-theme.css'?>" +
   // "<?xml-stylesheet href='resource://devtools/client/themes/widgets.css'?>" +
 
   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
   " title='Table Widget' width='600' height='500'>" +
   "<box flex='1' class='theme-light'/></window>";
 const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
 
--- a/devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
+++ b/devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
@@ -6,16 +6,17 @@
 
 "use strict";
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
 
   // Uncomment these lines to help with visual debugging. When uncommented they
   // dump a couple of thousand errors in the log (bug 1258285)
+  // "<?xml-stylesheet href='resource://devtools/client/themes/common.css'?>" +
   // "<?xml-stylesheet href='resource://devtools/client/themes/light-theme.css'?>" +
   // "<?xml-stylesheet href='resource://devtools/client/themes/widgets.css'?>" +
 
   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
   " title='Table Widget' width='600' height='500'>" +
   "<box flex='1' class='theme-light'/></window>";
 const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
 
--- 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/common.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,17 +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" href="resource://devtools/client/themes/widgets.css" ype="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/common.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/widgets.css" type="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/common.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/common.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/common.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
@@ -1,28 +1,38 @@
 /* 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/. */
 
+@namespace html url("http://www.w3.org/1999/xhtml");
 
-@import url("splitters.css");
-@namespace html url("http://www.w3.org/1999/xhtml");
+/**
+ * Note: common.css imports stylesheets containing variables shared by other devtools
+ * stylesheets. All devtools documents should load common.css before loading any other
+ * stylesheet to avoid early warnings about undefined variables.
+ */
+
+@import url(variables.css);
+@import url(splitters.css);
+@import url(toolbars.css);
+@import url(tooltips.css);
 
 :root {
   font: message-box;
 }
 
+:root,
+:root[platform="win"] {
+  --monospace-font-family: Consolas, monospace;
+}
+
 :root[platform="mac"] {
   --monospace-font-family: Menlo, monospace;
 }
 
-:root[platform="win"] {
-  --monospace-font-family: Consolas, monospace;
-}
-
 :root[platform="linux"],
 :root.theme-firebug {
   --monospace-font-family: monospace;
 }
 
 :root.theme-firebug {
   --proportional-font-family: Lucida Grande, Tahoma, sans-serif;
 }
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,17 +1,20 @@
 /* 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);
+/**
+ * common.css should already be loaded by the document, but theme stylesheets still
+ * import it so that documents using only this stylesheet can be displayed correctly.
+ * See bug 1311541.
+ */
+
 @import url(common.css);
-@import url(toolbars.css);
-@import url(tooltips.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -1,15 +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(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,17 +1,20 @@
 /* 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);
+/**
+ * common.css should already be loaded by the document, but theme stylesheets still
+ * import it so that documents using only this stylesheet can be displayed correctly.
+ * See bug 1311541.
+ */
+
 @import url(common.css);
-@import url(toolbars.css);
-@import url(tooltips.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -15,16 +15,17 @@
   --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,
 :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,45 +1,46 @@
 /* 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 {
+:root,
+:root.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 {
+:root.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 {
+:root.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);
 }
 
 
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -9,16 +9,17 @@
  * 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).
  */
 
+: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;
--- 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/common.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/common.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"