From 01dcaa7f00881d6f321545c5dde88b07e3c6b0d4 Mon Sep 17 00:00:00 2001 From: Julian Muenster Date: Thu, 27 Sep 2012 07:42:00 +1200 Subject: [PATCH 1/7] Bug 791163 - Add addon-options-displayed/addon-options-hidden as constants on AddonManager. r=Unfocused --- mobile/android/chrome/content/aboutAddons.js | 4 +++- .../xul/chrome/content/bindings/extensions.xml | 4 +++- toolkit/mozapps/extensions/AddonManager.jsm | 6 ++++++ .../mozapps/extensions/content/extensions.js | 12 ++++++++---- .../test/browser/browser_inlinesettings.js | 18 ++++++++++++------ 5 files changed, 32 insertions(+), 12 deletions(-) diff --git a/mobile/android/chrome/content/aboutAddons.js b/mobile/android/chrome/content/aboutAddons.js index cc6613e3161f..75e70eca61cf 100644 --- a/mobile/android/chrome/content/aboutAddons.js +++ b/mobile/android/chrome/content/aboutAddons.js @@ -286,7 +286,9 @@ var Addons = { // Also send a notification to match the behavior of desktop Firefox let id = aListItem.getAttribute("addonID"); - Services.obs.notifyObservers(document, "addon-options-displayed", id); + Services.obs.notifyObservers(document, + AddonManager.OPTIONS_NOTIFICATION_DISPLAYED, + id); } } catch (e) { Cu.reportError(e) diff --git a/mobile/xul/chrome/content/bindings/extensions.xml b/mobile/xul/chrome/content/bindings/extensions.xml index e482fe472cbd..6bb712ff679a 100644 --- a/mobile/xul/chrome/content/bindings/extensions.xml +++ b/mobile/xul/chrome/content/bindings/extensions.xml @@ -155,7 +155,9 @@ // Also send a notification to match the behavior of desktop Firefox let id = this.id.substring(17); // length of |urn:mozilla:item:| - Services.obs.notifyObservers(document, "addon-options-displayed", id); + Services.obs.notifyObservers(document, + AddonManager.OPTIONS_NOTIFICATION_DISPLAYED, + id); ]]> diff --git a/toolkit/mozapps/extensions/AddonManager.jsm b/toolkit/mozapps/extensions/AddonManager.jsm index 2dceb4b85215..58c55dbc6936 100644 --- a/toolkit/mozapps/extensions/AddonManager.jsm +++ b/toolkit/mozapps/extensions/AddonManager.jsm @@ -2252,6 +2252,12 @@ var AddonManager = { // Options will be displayed in a new tab, if possible OPTIONS_TYPE_TAB: 3, + // Constants for displayed or hidden options notifications + // Options notification will be displayed + OPTIONS_NOTIFICATION_DISPLAYED: "addon-options-displayed", + // Options notification will be hidden + OPTIONS_NOTIFICATION_HIDDEN: "addon-options-hidden", + // Constants for getStartupChanges, addStartupChange and removeStartupChange // Add-ons that were detected as installed during startup. Doesn't include // add-ons that were pending installation the last time the application ran. diff --git a/toolkit/mozapps/extensions/content/extensions.js b/toolkit/mozapps/extensions/content/extensions.js index a462f4b5fdc6..4e51bb2464f8 100644 --- a/toolkit/mozapps/extensions/content/extensions.js +++ b/toolkit/mozapps/extensions/content/extensions.js @@ -2729,7 +2729,7 @@ var gDetailView = { if (this._addon) { if (this._addon.optionsType == AddonManager.OPTIONS_TYPE_INLINE) { Services.obs.notifyObservers(document, - "addon-options-hidden", + AddonManager.OPTIONS_NOTIFICATION_HIDDEN, this._addon.id); } @@ -2907,14 +2907,18 @@ var gDetailView = { gDetailView.node.removeEventListener("ViewChanged", viewChangedEventListener, false); if (firstSetting) firstSetting.clientTop; - Services.obs.notifyObservers(document, "addon-options-displayed", gDetailView._addon.id); + Services.obs.notifyObservers(document, + AddonManager.OPTIONS_NOTIFICATION_DISPLAYED, + gDetailView._addon.id); if (aScrollToPreferences) gDetailView.scrollToPreferencesRows(); }, false); } else { if (firstSetting) firstSetting.clientTop; - Services.obs.notifyObservers(document, "addon-options-displayed", this._addon.id); + Services.obs.notifyObservers(document, + AddonManager.OPTIONS_NOTIFICATION_DISPLAYED, + this._addon.id); if (aScrollToPreferences) gDetailView.scrollToPreferencesRows(); } @@ -2969,7 +2973,7 @@ var gDetailView = { if (!aNeedsRestart && this._addon.optionsType == AddonManager.OPTIONS_TYPE_INLINE) { Services.obs.notifyObservers(document, - "addon-options-hidden", + AddonManager.OPTIONS_NOTIFICATION_HIDDEN, this._addon.id); } }, diff --git a/toolkit/mozapps/extensions/test/browser/browser_inlinesettings.js b/toolkit/mozapps/extensions/test/browser/browser_inlinesettings.js index f60336b63338..e7fc172758e4 100644 --- a/toolkit/mozapps/extensions/test/browser/browser_inlinesettings.js +++ b/toolkit/mozapps/extensions/test/browser/browser_inlinesettings.js @@ -32,7 +32,7 @@ var observer = { is(this.lastHidden, null, "'addon-options-hidden' notification should not have fired"); }, observe: function(aSubject, aTopic, aData) { - if (aTopic == "addon-options-displayed") { + if (aTopic == AddonManager.OPTIONS_NOTIFICATION_DISPLAYED) { this.lastDisplayed = aData; // Test if the binding has applied before the observers are notified. We test the second setting here, // because the code operates on the first setting and we want to check it applies to all. @@ -48,7 +48,7 @@ var observer = { this.callback = null; tempCallback(); } - } else if (aTopic == "addon-options-hidden") { + } else if (aTopic == AddonManager.OPTIONS_NOTIFICATION_HIDDEN) { this.lastHidden = aData; } } @@ -108,8 +108,12 @@ function test() { gManagerWindow = aWindow; gCategoryUtilities = new CategoryUtilities(gManagerWindow); - Services.obs.addObserver(observer, "addon-options-displayed", false); - Services.obs.addObserver(observer, "addon-options-hidden", false); + Services.obs.addObserver(observer, + AddonManager.OPTIONS_NOTIFICATION_DISPLAYED, + false); + Services.obs.addObserver(observer, + AddonManager.OPTIONS_NOTIFICATION_HIDDEN, + false); run_next_test(); }); @@ -117,7 +121,8 @@ function test() { } function end_test() { - Services.obs.removeObserver(observer, "addon-options-displayed"); + Services.obs.removeObserver(observer, + AddonManager.OPTIONS_NOTIFICATION_DISPLAYED); Services.prefs.clearUserPref("extensions.inlinesettings1.bool"); Services.prefs.clearUserPref("extensions.inlinesettings1.boolint"); @@ -135,7 +140,8 @@ function end_test() { close_manager(gManagerWindow, function() { observer.checkHidden("inlinesettings2@tests.mozilla.org"); - Services.obs.removeObserver(observer, "addon-options-hidden"); + Services.obs.removeObserver(observer, + AddonManager.OPTIONS_NOTIFICATION_HIDDEN); AddonManager.getAddonByID("inlinesettings1@tests.mozilla.org", function(aAddon) { aAddon.uninstall(); From f5dce7a45815a56219a8a1bea4a4a74db85aa303 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Mon, 1 Oct 2012 15:14:46 +0300 Subject: [PATCH 2/7] Bug 794887 - Some entities in debugger.dtd are unused, r=past --- browser/devtools/debugger/debugger.xul | 3 +-- .../en-US/chrome/browser/devtools/debugger.dtd | 18 ------------------ 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/browser/devtools/debugger/debugger.xul b/browser/devtools/debugger/debugger.xul index 7f7a8e63ef6a..87e329553542 100644 --- a/browser/devtools/debugger/debugger.xul +++ b/browser/devtools/debugger/debugger.xul @@ -83,8 +83,7 @@ tabindex="0"/> + sizetopopup="always"/> - - - - - - - - - - - - From 2eca527931c8196d7f21ca16765953f9cd6e6693 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Mon, 1 Oct 2012 15:15:10 +0300 Subject: [PATCH 3/7] Bug 795009 - REMOTE_PROFILE_NAME should actually be chrome, r=past --- browser/devtools/debugger/DebuggerUI.jsm | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/browser/devtools/debugger/DebuggerUI.jsm b/browser/devtools/debugger/DebuggerUI.jsm index 517306f195d6..81aee10e50fc 100644 --- a/browser/devtools/debugger/DebuggerUI.jsm +++ b/browser/devtools/debugger/DebuggerUI.jsm @@ -11,7 +11,7 @@ const Cu = Components.utils; const DBG_XUL = "chrome://browser/content/debugger.xul"; const DBG_STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties"; -const REMOTE_PROFILE_NAME = "_remote-debug"; +const CHROME_DEBUGGER_PROFILE_NAME = "_chrome-debugger-profile"; const TAB_SWITCH_NOTIFICATION = "debugger-tab-switch"; Cu.import("resource://gre/modules/devtools/dbg-server.jsm"); @@ -489,9 +489,9 @@ ChromeDebuggerProcess.prototype = { let dbgProfileName; try { - dbgProfileName = profileService.selectedProfile.name + REMOTE_PROFILE_NAME; + dbgProfileName = profileService.selectedProfile.name + CHROME_DEBUGGER_PROFILE_NAME; } catch(e) { - dbgProfileName = REMOTE_PROFILE_NAME; + dbgProfileName = CHROME_DEBUGGER_PROFILE_NAME; Cu.reportError(e); } From da72b154e07c61646e9fdc27a3208abb8167050b Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Mon, 1 Oct 2012 15:16:00 +0300 Subject: [PATCH 4/7] Bug 790553 - Increase the timeout when connecting to Firefox for Android from the Remote Debugger, r=past --- browser/app/profile/firefox.js | 2 +- .../debugger/test/browser_dbg_createRemote.js | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js index 8ca6adfcadfb..45dff47da615 100644 --- a/browser/app/profile/firefox.js +++ b/browser/app/profile/firefox.js @@ -1029,7 +1029,7 @@ pref("devtools.debugger.chrome-enabled", false); pref("devtools.debugger.remote-host", "localhost"); pref("devtools.debugger.remote-autoconnect", false); pref("devtools.debugger.remote-connection-retries", 3); -pref("devtools.debugger.remote-timeout", 3000); +pref("devtools.debugger.remote-timeout", 20000); // The default Debugger UI settings pref("devtools.debugger.ui.height", 250); diff --git a/browser/devtools/debugger/test/browser_dbg_createRemote.js b/browser/devtools/debugger/test/browser_dbg_createRemote.js index 13cca8fd786d..9c8570c06ee4 100644 --- a/browser/devtools/debugger/test/browser_dbg_createRemote.js +++ b/browser/devtools/debugger/test/browser_dbg_createRemote.js @@ -7,7 +7,9 @@ var gWindow = null; var gTab = null; +var gRemoteHost = null; var gRemotePort = null; +var gRemoteTimeout = null; var gAutoConnect = null; const TEST_URL = EXAMPLE_URL + "browser_dbg_iframes.html"; @@ -18,8 +20,12 @@ function test() { gWindow = aWindow; let gDebugger = gWindow.contentWindow; + info("Current remote host: " + + Services.prefs.getCharPref("devtools.debugger.remote-host")); info("Current remote port: " + Services.prefs.getIntPref("devtools.debugger.remote-port")); + info("Current remote timeout: " + + Services.prefs.getIntPref("devtools.debugger.remote-timeout")); info("Current autoconnect flag: " + Services.prefs.getBoolPref("devtools.debugger.remote-autoconnect")); @@ -66,18 +72,22 @@ function test() { } DebuggerServer.closeListener(); + gRemoteHost = Services.prefs.getCharPref("devtools.debugger.remote-host"); gRemotePort = Services.prefs.getIntPref("devtools.debugger.remote-port"); + gRemoteTimeout = Services.prefs.getIntPref("devtools.debugger.remote-timeout"); gAutoConnect = Services.prefs.getBoolPref("devtools.debugger.remote-autoconnect"); // Open the listener at some point in the future to test automatic reconnect. - openListener(gRemotePort + 1); + openListener(gRemoteHost, gRemotePort + 1, gRemoteTimeout / 10); }); } let attempts = 0; -function openListener(port) { +function openListener(host, port, timeout) { + Services.prefs.setCharPref("devtools.debugger.remote-host", host); Services.prefs.setIntPref("devtools.debugger.remote-port", port); + Services.prefs.setIntPref("devtools.debugger.remote-timeout", timeout); Services.prefs.setBoolPref("devtools.debugger.remote-autoconnect", true); info("Attempting to open a new listener on port " + port); @@ -101,11 +111,15 @@ function openListener(port) { } registerCleanupFunction(function() { + Services.prefs.setCharPref("devtools.debugger.remote-host", gRemoteHost); Services.prefs.setIntPref("devtools.debugger.remote-port", gRemotePort); + Services.prefs.setIntPref("devtools.debugger.remote-timeout", gRemoteTimeout); Services.prefs.setBoolPref("devtools.debugger.remote-autoconnect", gAutoConnect); removeTab(gTab); gWindow = null; gTab = null; + gRemoteHost = null; gRemotePort = null; + gRemoteTimeout = null; gAutoConnect = null; }); From 422b86ebc92be47f5dfd5631d180c4626a77b736 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Mon, 1 Oct 2012 18:15:20 +0300 Subject: [PATCH 5/7] Bug 782877 - Intermittent browser_dbg_bfcache.js | uncaught JS exception - TypeError: element is undefined at debugger-controller.js:1275, r=rcampbell --- browser/devtools/debugger/debugger-controller.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/browser/devtools/debugger/debugger-controller.js b/browser/devtools/debugger/debugger-controller.js index ec12bab1d18f..f7e5a545bb42 100644 --- a/browser/devtools/debugger/debugger-controller.js +++ b/browser/devtools/debugger/debugger-controller.js @@ -1353,6 +1353,16 @@ SourceScripts.prototype = { _onLoadSourceFinished: function SS__onLoadSourceFinished(aScriptUrl, aSourceText, aContentType, aOptions) { let element = DebuggerView.Scripts.getScriptByLocation(aScriptUrl); + + // Tab navigated before we got a chance to finish loading and displaying + // the source. The outcome is that the expected url is not present anymore + // in the scripts container, hence the original script object coming from + // the active thread no longer exists. There's really nothing that needs + // to be done in this case, nor something that can be currently avoided. + if (!element) { + return; + } + let script = element.getUserData("sourceScript"); script.loaded = true; From 3808bc2ff517b56aab07ff8e68a9551242625074 Mon Sep 17 00:00:00 2001 From: Jan Skrasek Date: Mon, 1 Oct 2012 18:15:23 +0300 Subject: [PATCH 6/7] Bug 785903 - Markup panel selection should scroll to the center when highlighting, r=dcamp --- browser/devtools/markupview/MarkupView.jsm | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/browser/devtools/markupview/MarkupView.jsm b/browser/devtools/markupview/MarkupView.jsm index 5d52bb2c7956..f52d2fd0eb45 100644 --- a/browser/devtools/markupview/MarkupView.jsm +++ b/browser/devtools/markupview/MarkupView.jsm @@ -99,7 +99,7 @@ MarkupView.prototype = { _onSelect: function MT__onSelect() { if (this._inspector.selection) { - this.showNode(this._inspector.selection); + this.showNode(this._inspector.selection, true); } this.selectNode(this._inspector.selection); }, @@ -254,7 +254,7 @@ MarkupView.prototype = { } let node = aContainer.node; - this.showNode(node); + this.showNode(node, false); this.selectNode(node); if (this._inspector._IUI.highlighter.isNodeHighlightable(node)) { @@ -343,7 +343,7 @@ MarkupView.prototype = { * Make sure the given node's parents are expanded and the * node is scrolled on to screen. */ - showNode: function MT_showNode(aNode) + showNode: function MT_showNode(aNode, centered) { this.importNode(aNode); let walker = documentWalker(aNode); @@ -351,7 +351,7 @@ MarkupView.prototype = { while (parent = walker.parentNode()) { this.expandNode(parent); } - LayoutHelpers.scrollIntoViewIfNeeded(this._containers.get(aNode).editor.elt, false); + LayoutHelpers.scrollIntoViewIfNeeded(this._containers.get(aNode).editor.elt, centered); }, /** From 02e4b112630e2356cc6c645c65f2fb93803f88a5 Mon Sep 17 00:00:00 2001 From: Heather Arthur Date: Mon, 1 Oct 2012 19:34:05 +0300 Subject: [PATCH 7/7] Bug 789364 - Light theme for markup panel, orion, and rule view, r=paul --- browser/devtools/markupview/markup-view.xhtml | 11 ++--- .../themes/gnomestripe/devtools/common.css | 30 +++++++++++++ .../gnomestripe/devtools/csshtmltree.css | 4 +- .../gnomestripe/devtools/markup-view.css | 21 ++------- browser/themes/gnomestripe/devtools/orion.css | 43 ++++++++----------- browser/themes/pinstripe/devtools/common.css | 30 +++++++++++++ .../themes/pinstripe/devtools/csshtmltree.css | 4 +- .../themes/pinstripe/devtools/markup-view.css | 21 ++------- browser/themes/pinstripe/devtools/orion.css | 43 ++++++++----------- browser/themes/winstripe/devtools/common.css | 30 +++++++++++++ .../themes/winstripe/devtools/csshtmltree.css | 4 +- .../themes/winstripe/devtools/markup-view.css | 21 ++------- browser/themes/winstripe/devtools/orion.css | 43 ++++++++----------- 13 files changed, 168 insertions(+), 137 deletions(-) diff --git a/browser/devtools/markupview/markup-view.xhtml b/browser/devtools/markupview/markup-view.xhtml index a1aba6d033b7..3d0893add337 100644 --- a/browser/devtools/markupview/markup-view.xhtml +++ b/browser/devtools/markupview/markup-view.xhtml @@ -9,6 +9,7 @@ +
@@ -17,19 +18,19 @@
      • - <> + <> - + - + 
      
           
 
-    
+    
       <!--
      -->
           
 
-    </>
+    </>
    
    
      
      
      
diff --git a/browser/themes/gnomestripe/devtools/common.css b/browser/themes/gnomestripe/devtools/common.css
index c0a1779a6f72..b1ea67f6ca7b 100644
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -174,3 +174,33 @@
   -moz-margin-end: -3px;
   position: relative;
 }
+
+/* Theme */
+
+.devtools-theme-background {
+  background-color: white;
+}
+
+.devtools-theme-comment {
+  color: hsl(90,2%,46%); /* grey */
+}
+
+.devtools-theme-keyword {
+  color: hsl(276,44%,45%); /* purple */
+}
+
+.devtools-theme-string {
+  color: hsl(72,100%,27%); /* green */
+}
+
+.devtools-theme-tagname {
+  color: hsl(208,81%,21%); /* dark blue */
+}
+
+.devtools-theme-attrname {
+  color: hsl(208,56%,40%); /* blue */
+}
+
+.devtools-theme-attrvalue {
+  color: hsl(24,85%,39%); /* orange */
+}
diff --git a/browser/themes/gnomestripe/devtools/csshtmltree.css b/browser/themes/gnomestripe/devtools/csshtmltree.css
index de47b3d37b2b..f2196380fe67 100644
--- a/browser/themes/gnomestripe/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/devtools/csshtmltree.css
@@ -144,7 +144,7 @@
 }
 
 .ruleview-rule-source {
-  color: hsl(121,42%,43%); /* green */
+  color: hsl(90,2%,46%); /* grey */
   -moz-padding-start: 5px;
   cursor: pointer;
   text-align: right;
@@ -231,7 +231,7 @@
 
 .ruleview-propertyname {
   padding: 1px 0;
-  color: hsl(210,100%,38%); /* blue */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .ruleview-propertyvalue {
diff --git a/browser/themes/gnomestripe/devtools/markup-view.css b/browser/themes/gnomestripe/devtools/markup-view.css
index ef3483d2db2a..9e80d56f09b6 100644
--- a/browser/themes/gnomestripe/devtools/markup-view.css
+++ b/browser/themes/gnomestripe/devtools/markup-view.css
@@ -9,32 +9,19 @@
 
 body {
   font: message-box;
-  background-color: #131c26;
-  color: #8fa1b2;
+  color: hsl(0,0%,50%);
 }
 
-.tagname {
-  color: #a673bf;
-}
-
-.attrname {
-  color: #b26b47;
-}
-
-.attrvalue {
-  color: #3689b2;
+.text {
+  color: black;
 }
 
 .newattr {
   cursor: pointer;
 }
 
-.comment {
-  color: #5c6773;
-}
-
 .selected {
-  background-color: #253847;
+  background-color: hsl(0,0%,90%);
 }
 
 /* Give some padding to focusable elements to match the editor input
diff --git a/browser/themes/gnomestripe/devtools/orion.css b/browser/themes/gnomestripe/devtools/orion.css
index ae504a566a25..351a0bdc955a 100644
--- a/browser/themes/gnomestripe/devtools/orion.css
+++ b/browser/themes/gnomestripe/devtools/orion.css
@@ -3,24 +3,24 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .viewContainer {
-  background: #cddae5; /* This will be seen as the continuation of the ruler */
+  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
   font-family: monospace;
   font-size: inherit; /* inherit browser's default monospace font size */
 }
 
 .view {
   color: black; /* Default text color */
-  background: #f0f0ff; /* Background of the editor */
+  background: white; /* Background of the editor */
   padding-left: 4px;
 }
 
 .readonly > .view {
-  background: #f0f0ff;
+  background: #fdfefd; /* super light green */
 }
 
 .ruler {
-  background: #cddae5;
-  color: #7a8a99;
+  background: hsl(0,0%,89%);
+  color: hsl(0,0%,55%);
 }
 .ruler.annotations {
   width: 16px;
@@ -105,16 +105,10 @@
   outline: 1px solid grey;
 }
 
-.token_singleline_comment {
-  color: #45a946; /* green */
-}
-
-.token_multiline_comment {
-  color: #45a946; /* green */
-}
-
-.token_doc_comment {
-  color: #45a946; /* green */
+.token_singleline_comment,
+.token_multiline_comment,
+.token_doc_comment  {
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .token_doc_html_markup {
@@ -131,12 +125,12 @@
 }
 
 .token_string {
-  color: #1e66b1; /* blue */
+  color: hsl(72,100%,27%); /* green */
   font-style: italic;
 }
 
 .token_keyword {
-  color: #dd0058; /* purple */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .token_space {
@@ -155,34 +149,33 @@
 
 .line_caret,
 .annotationLine.currentLine { /* Current line */
-  background: #dae2ee; /* lighter than the background */
+  background: hsl(208, 93%, 94%);
 }
 
 .readonly .line_caret,
 .readonly .annotationLine.currentLine {
-  background: #cddae5; /* a bit darker than the background */
+  background: hsl(208, 80%, 90%);
 }
 
 /* Styling for html syntax highlighting */
 .entity-name-tag {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .entity-other-attribute-name {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .punctuation-definition-comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .string-quoted {
-  color: #1e66b1; /* blue */
-  font-style: italic;
+  color: hsl(24,85%,39%); /* orange */
 }
 
 .invalid {
diff --git a/browser/themes/pinstripe/devtools/common.css b/browser/themes/pinstripe/devtools/common.css
index cef576e9b688..ec8dcb6ce96b 100644
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -189,3 +189,33 @@
   -moz-margin-end: -3px;
   position: relative;
 }
+
+/* Theme */
+
+.devtools-theme-background {
+  background-color: white;
+}
+
+.devtools-theme-comment {
+  color: hsl(90,2%,46%); /* grey */
+}
+
+.devtools-theme-keyword {
+  color: hsl(276,44%,45%); /* purple */
+}
+
+.devtools-theme-string {
+  color: hsl(72,100%,27%); /* green */
+}
+
+.devtools-theme-tagname {
+  color: hsl(208,81%,21%); /* dark blue */
+}
+
+.devtools-theme-attrname {
+  color: hsl(208,56%,40%); /* blue */
+}
+
+.devtools-theme-attrvalue {
+  color: hsl(24,85%,39%); /* orange */
+}
diff --git a/browser/themes/pinstripe/devtools/csshtmltree.css b/browser/themes/pinstripe/devtools/csshtmltree.css
index e787aa7a071c..cab007834754 100644
--- a/browser/themes/pinstripe/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/devtools/csshtmltree.css
@@ -146,7 +146,7 @@
 }
 
 .ruleview-rule-source {
-  color: hsl(121,42%,43%); /* green */
+  color: hsl(90,2%,46%); /* grey */
   -moz-padding-start: 5px;
   cursor: pointer;
   text-align: right;
@@ -233,7 +233,7 @@
 
 .ruleview-propertyname {
   padding: 1px 0;
-  color: hsl(210,100%,38%); /* blue */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .ruleview-propertyvalue {
diff --git a/browser/themes/pinstripe/devtools/markup-view.css b/browser/themes/pinstripe/devtools/markup-view.css
index ef3483d2db2a..9e80d56f09b6 100644
--- a/browser/themes/pinstripe/devtools/markup-view.css
+++ b/browser/themes/pinstripe/devtools/markup-view.css
@@ -9,32 +9,19 @@
 
 body {
   font: message-box;
-  background-color: #131c26;
-  color: #8fa1b2;
+  color: hsl(0,0%,50%);
 }
 
-.tagname {
-  color: #a673bf;
-}
-
-.attrname {
-  color: #b26b47;
-}
-
-.attrvalue {
-  color: #3689b2;
+.text {
+  color: black;
 }
 
 .newattr {
   cursor: pointer;
 }
 
-.comment {
-  color: #5c6773;
-}
-
 .selected {
-  background-color: #253847;
+  background-color: hsl(0,0%,90%);
 }
 
 /* Give some padding to focusable elements to match the editor input
diff --git a/browser/themes/pinstripe/devtools/orion.css b/browser/themes/pinstripe/devtools/orion.css
index ae504a566a25..351a0bdc955a 100644
--- a/browser/themes/pinstripe/devtools/orion.css
+++ b/browser/themes/pinstripe/devtools/orion.css
@@ -3,24 +3,24 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .viewContainer {
-  background: #cddae5; /* This will be seen as the continuation of the ruler */
+  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
   font-family: monospace;
   font-size: inherit; /* inherit browser's default monospace font size */
 }
 
 .view {
   color: black; /* Default text color */
-  background: #f0f0ff; /* Background of the editor */
+  background: white; /* Background of the editor */
   padding-left: 4px;
 }
 
 .readonly > .view {
-  background: #f0f0ff;
+  background: #fdfefd; /* super light green */
 }
 
 .ruler {
-  background: #cddae5;
-  color: #7a8a99;
+  background: hsl(0,0%,89%);
+  color: hsl(0,0%,55%);
 }
 .ruler.annotations {
   width: 16px;
@@ -105,16 +105,10 @@
   outline: 1px solid grey;
 }
 
-.token_singleline_comment {
-  color: #45a946; /* green */
-}
-
-.token_multiline_comment {
-  color: #45a946; /* green */
-}
-
-.token_doc_comment {
-  color: #45a946; /* green */
+.token_singleline_comment,
+.token_multiline_comment,
+.token_doc_comment  {
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .token_doc_html_markup {
@@ -131,12 +125,12 @@
 }
 
 .token_string {
-  color: #1e66b1; /* blue */
+  color: hsl(72,100%,27%); /* green */
   font-style: italic;
 }
 
 .token_keyword {
-  color: #dd0058; /* purple */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .token_space {
@@ -155,34 +149,33 @@
 
 .line_caret,
 .annotationLine.currentLine { /* Current line */
-  background: #dae2ee; /* lighter than the background */
+  background: hsl(208, 93%, 94%);
 }
 
 .readonly .line_caret,
 .readonly .annotationLine.currentLine {
-  background: #cddae5; /* a bit darker than the background */
+  background: hsl(208, 80%, 90%);
 }
 
 /* Styling for html syntax highlighting */
 .entity-name-tag {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .entity-other-attribute-name {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .punctuation-definition-comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .string-quoted {
-  color: #1e66b1; /* blue */
-  font-style: italic;
+  color: hsl(24,85%,39%); /* orange */
 }
 
 .invalid {
diff --git a/browser/themes/winstripe/devtools/common.css b/browser/themes/winstripe/devtools/common.css
index b7966694b452..2cda5ad9ea13 100644
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -195,3 +195,33 @@
   -moz-margin-end: -3px;
   position: relative;
 }
+
+/* Theme */
+
+.devtools-theme-background {
+  background-color: white;
+}
+
+.devtools-theme-comment {
+  color: hsl(90,2%,46%); /* grey */
+}
+
+.devtools-theme-keyword {
+  color: hsl(276,44%,45%); /* purple */
+}
+
+.devtools-theme-string {
+  color: hsl(72,100%,27%); /* green */
+}
+
+.devtools-theme-tagname {
+  color: hsl(208,81%,21%); /* dark blue */
+}
+
+.devtools-theme-attrname {
+  color: hsl(208,56%,40%); /* blue */
+}
+
+.devtools-theme-attrvalue {
+  color: hsl(24,85%,39%); /* orange */
+}
diff --git a/browser/themes/winstripe/devtools/csshtmltree.css b/browser/themes/winstripe/devtools/csshtmltree.css
index 74a946b9d1ba..87b4604c73b4 100644
--- a/browser/themes/winstripe/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/devtools/csshtmltree.css
@@ -146,7 +146,7 @@
 }
 
 .ruleview-rule-source {
-  color: hsl(121,42%,43%); /* green */
+  color: hsl(90,2%,46%); /* grey */
   -moz-padding-start: 5px;
   cursor: pointer;
   text-align: right;
@@ -233,7 +233,7 @@
 
 .ruleview-propertyname {
   padding: 1px 0;
-  color: hsl(210,100%,38%); /* blue */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .ruleview-propertyvalue {
diff --git a/browser/themes/winstripe/devtools/markup-view.css b/browser/themes/winstripe/devtools/markup-view.css
index fbf8b644bb30..2e4b26112418 100644
--- a/browser/themes/winstripe/devtools/markup-view.css
+++ b/browser/themes/winstripe/devtools/markup-view.css
@@ -9,32 +9,19 @@
 
 body {
   font: message-box;
-  background-color: #131c26;
-  color: #8fa1b2;
+  color: hsl(0,0%,50%);
 }
 
-.tagname {
-  color: #a673bf;
-}
-
-.attrname {
-  color: #b26b47;
-}
-
-.attrvalue {
-  color: #3689b2;
+.text {
+  color: black;
 }
 
 .newattr {
   cursor: pointer;
 }
 
-.comment {
-  color: #5c6773;
-}
-
 .selected {
-  background-color: #253847;
+  background-color: hsl(0,0%,90%);
 }
 
 /* Give some padding to focusable elements to match the editor input
diff --git a/browser/themes/winstripe/devtools/orion.css b/browser/themes/winstripe/devtools/orion.css
index ae504a566a25..351a0bdc955a 100644
--- a/browser/themes/winstripe/devtools/orion.css
+++ b/browser/themes/winstripe/devtools/orion.css
@@ -3,24 +3,24 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .viewContainer {
-  background: #cddae5; /* This will be seen as the continuation of the ruler */
+  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
   font-family: monospace;
   font-size: inherit; /* inherit browser's default monospace font size */
 }
 
 .view {
   color: black; /* Default text color */
-  background: #f0f0ff; /* Background of the editor */
+  background: white; /* Background of the editor */
   padding-left: 4px;
 }
 
 .readonly > .view {
-  background: #f0f0ff;
+  background: #fdfefd; /* super light green */
 }
 
 .ruler {
-  background: #cddae5;
-  color: #7a8a99;
+  background: hsl(0,0%,89%);
+  color: hsl(0,0%,55%);
 }
 .ruler.annotations {
   width: 16px;
@@ -105,16 +105,10 @@
   outline: 1px solid grey;
 }
 
-.token_singleline_comment {
-  color: #45a946; /* green */
-}
-
-.token_multiline_comment {
-  color: #45a946; /* green */
-}
-
-.token_doc_comment {
-  color: #45a946; /* green */
+.token_singleline_comment,
+.token_multiline_comment,
+.token_doc_comment  {
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .token_doc_html_markup {
@@ -131,12 +125,12 @@
 }
 
 .token_string {
-  color: #1e66b1; /* blue */
+  color: hsl(72,100%,27%); /* green */
   font-style: italic;
 }
 
 .token_keyword {
-  color: #dd0058; /* purple */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .token_space {
@@ -155,34 +149,33 @@
 
 .line_caret,
 .annotationLine.currentLine { /* Current line */
-  background: #dae2ee; /* lighter than the background */
+  background: hsl(208, 93%, 94%);
 }
 
 .readonly .line_caret,
 .readonly .annotationLine.currentLine {
-  background: #cddae5; /* a bit darker than the background */
+  background: hsl(208, 80%, 90%);
 }
 
 /* Styling for html syntax highlighting */
 .entity-name-tag {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .entity-other-attribute-name {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .punctuation-definition-comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .string-quoted {
-  color: #1e66b1; /* blue */
-  font-style: italic;
+  color: hsl(24,85%,39%); /* orange */
 }
 
 .invalid {