Bug 756890 - Fix an easy set of GCLI/Developer Toolbar display issues; r=paul,dão
authorJoe Walker <jwalker@mozilla.com>
Fri, 01 Jun 2012 08:24:19 +0100
changeset 99445 a24414165cd43dfd58c55388e544ba95472a9060
parent 99444 68600a8af079a8a3ebbddd09880c3766b7f1d911
child 99446 305cd10b57d21b3509c89850616f0bfd09d93c5e
push idunknown
push userunknown
push dateunknown
reviewerspaul, d
bugs756890
milestone15.0a1
Bug 756890 - Fix an easy set of GCLI/Developer Toolbar display issues; r=paul,dão
browser/base/content/browser.css
browser/base/content/browser.xul
browser/devtools/commandline/gcli.css
browser/themes/gnomestripe/browser.css
browser/themes/gnomestripe/devtools/gcli.css
browser/themes/pinstripe/browser.css
browser/themes/pinstripe/devtools/gcli.css
browser/themes/winstripe/browser.css
browser/themes/winstripe/devtools/gcli.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -547,8 +547,21 @@ statuspanel[inactive][previoustype=overL
 
 /* tabview menus */
 .tabview-menuitem {
   max-width: 32em;
 }
 
 /* highlighter */
 %include highlighter.css
+
+html|*#gcli-tooltip-frame,
+html|*#gcli-output-frame,
+#gcli-output,
+#gcli-tooltip {
+  overflow-x: hidden;
+}
+
+.gclitoolbar-input-node,
+.gclitoolbar-complete-node,
+.gclitoolbar-prompt {
+  direction: ltr;
+}
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1029,18 +1029,20 @@
              hidden="true">
 #ifdef XP_MACOSX
           <toolbarbutton id="developer-toolbar-closebutton"
                          class="devtools-closebutton"
                          oncommand="DeveloperToolbar.hide();"
                          tooltiptext="&devToolbarCloseButton.tooltiptext;"/>
 #endif
           <stack class="gclitoolbar-stack-node" flex="1">
-            <description class="gclitoolbar-prompt">&#187;</description>
-            <description class="gclitoolbar-complete-node"/>
+            <hbox class="gclitoolbar-prompt">
+              <label class="gclitoolbar-prompt-label">&#187;</label>
+            </hbox>
+            <hbox class="gclitoolbar-complete-node"/>
             <textbox class="gclitoolbar-input-node" rows="1"/>
           </stack>
           <toolbarbutton id="developer-toolbar-webconsole"
                          label="&webConsoleButton.label;"
                          class="devtools-toolbarbutton"
                          command="Tools:WebConsole"/>
           <toolbarbutton id="developer-toolbar-inspector"
                          label="&inspectorButton.label;"
--- a/browser/devtools/commandline/gcli.css
+++ b/browser/devtools/commandline/gcli.css
@@ -1,41 +1,36 @@
 /* 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/. */
 
-.gclichrome-output {
-  max-width: 350px;
-}
-
-.gclichrome-tooltip {
-  max-width: 350px;
-}
-
 .gcli-help-name {
   text-align: end;
 }
 
+.gcli-out-shortcut,
 .gcli-help-synopsis {
   cursor: pointer;
   display: inline-block;
 }
 
+.gcli-out-shortcut:before,
 .gcli-help-synopsis:before {
   content: '\bb';
 }
 
 .gcli-menu-option {
   overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
 }
 
 .gcli-menu-template {
   border-collapse: collapse;
   width: 100%;
 }
 
-.gcli-menu-error {
-  overflow: hidden;
-  white-space: nowrap;
+.gcli-menu-name,
+.gcli-out-shortcut,
+.gcli-help-synopsis {
+  direction: ltr;
 }
 
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1977,17 +1977,18 @@ panel[dimmed="true"] {
   -moz-image-region: rect(0px 16px 16px 0px);
   border: none;
 }
 
 #inspector-option-toolbarbutton[open] {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#inspector-toolbar {
+#inspector-toolbar,
+#developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
 }
 
 #devtools-side-splitter {
   -moz-appearance: none;
   border: 0;
   -moz-border-start: 1px solid #242b33;
   min-width: 0;
@@ -2378,52 +2379,79 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   border-radius: 3px 0 0 3px;
 }
 
 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
 #inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
   border-radius: 0 3px 3px 0;
 }
 
-.gcli-panel-inner-arrowcontent {
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
+
+html|*#gcli-tooltip-frame,
+html|*#gcli-output-frame {
   padding: 0;
+  border-width: 0;
+  background-color: transparent;
+}
+
+#gcli-output,
+#gcli-tooltip {
+  border-width: 0;
+  background-color: transparent;
+  margin-bottom: -2px;
 }
 
 .gclitoolbar-input-node,
 .gclitoolbar-complete-node,
 .gclitoolbar-prompt {
-  font-family: monospace;
+  margin: 0;
+  -moz-margin-end: 3px;
+  -moz-box-align: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 4px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  text-shadow: none;
 }
 
 .gclitoolbar-input-node {
+  padding-left: 20px;
   background-color: transparent;
   -moz-appearance: none;
-  border: none;
-  padding: 0 0 0 22px;
+  border-color: hsl(210,11%,10%);
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
+              0 0 0 1px hsla(210,16%,76%,.1) inset,
+              0 1px 0 hsla(210,16%,76%,.15);
 }
 
 .gclitoolbar-complete-node {
+  padding-left: 21px;
   background-color: transparent;
   color: transparent;
-  height: 100%;
-  line-height: 100%;
-  padding: 10px 0 0 27px;
-  margin: 0;
 }
 
 .gclitoolbar-prompt {
-  color: hsl(25,78%,50%);
-  -moz-appearance: textfield;
+  padding-left: 4px;
+  padding-bottom: 2px;
   font-size: 150%;
   font-weight: bold;
-  line-height: 100%;
-  padding-top: 1px;
-  padding-left: 3px;
-}
-
+  color: hsl(210,30%,85%);
+  background-color: hsl(210,11%,16%);
+}
+
+.gclitoolbar-prompt-label,
 .gcli-in-incomplete,
 .gcli-in-error,
 .gcli-in-ontab,
 .gcli-in-todo,
 .gcli-in-closebrace,
 .gcli-in-param,
 .gcli-in-valid {
   margin: 0;
@@ -2434,25 +2462,18 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   border-bottom: 2px dotted #999;
 }
 
 .gcli-in-error {
   border-bottom: 2px dotted #F00;
 }
 
 .gcli-in-ontab {
-  color: hsl(200,40%,70%);
+  color: hsl(210,0%,35%);
 }
 
 .gcli-in-todo {
-  color: hsl(48,28%,76%);
+  color: hsl(210,50%,35%);
 }
 
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
-
-/* Highlight toolbar - Option menu */
-
-#inspector-option-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
-  outline-offset: -2px;
-}
--- a/browser/themes/gnomestripe/devtools/gcli.css
+++ b/browser/themes/gnomestripe/devtools/gcli.css
@@ -1,107 +1,125 @@
 /* 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/. */
 
-#gclichrome-body {
+.gcli-body {
   margin: 0;
-  padding: 0;
   font: message-box;
+  color: hsl(210,30%,85%);
+}
+
+#gcli-output-root,
+#gcli-tooltip-root {
+  border: 1px solid hsl(210,11%,10%);
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-image: -moz-linear-gradient(top, hsla(209,11%,18%,0.9), hsl(210,11%,16%));
+  border-radius: 3px;
+}
+
+#gcli-output-root {
+  padding: 5px 10px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+}
+
+#gcli-tooltip-root {
+  padding: 5px 0px;
+}
+
+#gcli-tooltip-connector {
+  margin-top: -1px;
+  margin-left: 8px;
+  width: 20px;
+  height: 0;
+  border-left: 1px solid hsl(210,11%,10%);
+  border-right: 1px solid hsl(210,11%,10%);
+  background-color: hsl(210,11%,16%);
+}
+
+.gcli-tt-description,
+.gcli-tt-error {
+  padding: 0 10px;
 }
 
 .gcli-row-out {
   padding: 0 5px;
   line-height: 1.2em;
   border-top: none;
   border-bottom: none;
+  color: hsl(210,30%,85%);
 }
 
 .gcli-row-out p,
 .gcli-row-out h1,
 .gcli-row-out h2,
 .gcli-row-out h3 {
   margin: 5px 0;
 }
 
-.gcli-out-shortcut {
-  border: 1px solid #999;
-  border-radius: 3px;
-  padding: 1px 4px 0;
-  margin: 0 4px;
-  font-size: 80%;
-  font-family: monospace;
-  cursor: pointer;
-  vertical-align: bottom;
-  white-space: pre;
-  background-color: #fff;
-}
-
-.gcli-out-shortcut:before {
-  color: #66F;
-  content: '\bb';
+.gcli-row-out h1,
+.gcli-row-out h2,
+.gcli-row-out h3,
+.gcli-row-out h4,
+.gcli-row-out h5,
+.gcli-row-out th,
+.gcli-row-out strong {
+  color: hsl(210,30%,95%);
 }
 
-
-/* From: $GCLI/lib/gcli/commands/help.css */
-
-.gcli-help-arrow {
-  font-size: 70%;
-  color: #AAA;
+.gcli-out-shortcut,
+.gcli-help-synopsis {
+  padding: 0 3px;
+  margin: 0 4px;
+  font-weight: normal;
+  font-size: 90%;
+  border-radius: 3px;
+  background-color: hsl(210,11%,16%);
+  border: 1px solid hsl(210,11%,10%);
 }
 
-.gcli-help-synopsis {
-  font-family: monospace;
-  font-weight: normal;
-  padding: 0 3px;
-  margin: 0 10px;
-  border: 1px solid #999;
-  border-radius: 3px;
+.gcli-out-shortcut:before,
+.gcli-help-synopsis:before {
+  color: hsl(210,30%,85%);
+  -moz-padding-end: 2px;
 }
 
-.gcli-help-synopsis:before {
-  color: #66F;
+.gcli-help-arrow {
+  color: #666;
 }
 
 .gcli-help-description {
   margin: 0 20px;
   padding: 0;
 }
 
 .gcli-help-parameter {
   margin: 0 30px;
   padding: 0;
 }
 
 .gcli-help-header {
   margin: 10px 0 6px;
 }
 
-
-/* From: $GCLI/lib/gcli/ui/fields/menu.css */
-
 .gcli-menu-name {
   -moz-padding-start: 8px;
 }
 
 .gcli-menu-desc {
   -moz-padding-end: 8px;
-  color: #999;
+  color: hsl(210,30%,75%);
 }
 
 .gcli-menu-option:hover {
-  background-color: #EEE;
+  background-color: hsla(0,100%,100%,.1);
 }
 
 .gcli-menu-highlight,
 .gcli-menu-highlight.gcli-menu-option:hover {
-  background-color: #DDD;
-}
-
-.gcli-menu-error {
-  padding: 8px 10px 2px;
-  font-size: 80%;
-  color: red;
+  background-color: hsla(0,0%,0%,.3);
 }
 
 .gcli-menu-typed {
   color: hsl(25,78%,50%);
 }
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -2706,28 +2706,31 @@ panel[dimmed="true"] {
   -moz-image-region: rect(0px 16px 16px 0px);
   border: none;
 }
 
 #inspector-option-toolbarbutton[open] {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#inspector-toolbar {
+#inspector-toolbar,
+#developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
-#inspector-toolbar:-moz-locale-dir(ltr) {
+#inspector-toolbar:-moz-locale-dir(ltr),
+#developer-toolbar:-moz-locale-dir(ltr) {
   padding-left: 2px;
   padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
 }
 
-#inspector-toolbar:-moz-locale-dir(rtl) {
+#inspector-toolbar:-moz-locale-dir(rtl),
+#developer-toolbar:-moz-locale-dir(rtl) {
   padding-left: 4px;
   padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
 }
 
 #devtools-side-splitter {
   background-image: none !important;
   border: 0;
   -moz-border-start: 1px solid #242b33;
@@ -3117,49 +3120,79 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   border-radius: @toolbarbuttonCornerRadius@ 0 0 @toolbarbuttonCornerRadius@;
 }
 
 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
 #inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
   border-radius: 0 @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0;
 }
 
-.gcli-panel-inner-arrowcontent {
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
+
+html|*#gcli-tooltip-frame,
+html|*#gcli-output-frame {
   padding: 0;
+  border-width: 0;
+  background-color: transparent;
+}
+
+#gcli-output,
+#gcli-tooltip {
+  border-width: 0;
+  background-color: transparent;
+  margin-bottom: -2px;
 }
 
 .gclitoolbar-input-node,
 .gclitoolbar-complete-node,
 .gclitoolbar-prompt {
-  font-family: Menlo, Monaco, monospace;
+  margin: 0;
+  -moz-margin-end: 3px;
+  -moz-box-align: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 4px;
+  border: 1px solid transparent;
+  border-radius: @toolbarbuttonCornerRadius@;
+  text-shadow: none;
 }
 
 .gclitoolbar-input-node {
+  padding-left: 20px;
   background-color: transparent;
   -moz-appearance: none;
-  border: none;
-  padding: 0 0 0 12px;
+  border-color: hsl(210,11%,10%);
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
+              0 0 0 1px hsla(210,16%,76%,.1) inset,
+              0 1px 0 hsla(210,16%,76%,.15);
 }
 
 .gclitoolbar-complete-node {
+  padding-left: 21px;
   background-color: transparent;
   color: transparent;
-  height: 100%;
-  padding: 7px 0 0 18px;
 }
 
 .gclitoolbar-prompt {
-  color: hsl(25,78%,50%);
-  -moz-appearance: textfield;
+  padding-left: 4px;
+  padding-bottom: 2px;
   font-size: 150%;
   font-weight: bold;
-  line-height: 100%;
-  padding-top: 2px;
-}
-
+  color: hsl(210,30%,85%);
+  background-color: hsl(210,11%,16%);
+}
+
+.gclitoolbar-prompt-label,
 .gcli-in-incomplete,
 .gcli-in-error,
 .gcli-in-ontab,
 .gcli-in-todo,
 .gcli-in-closebrace,
 .gcli-in-param,
 .gcli-in-valid {
   margin: 0;
@@ -3170,25 +3203,18 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   border-bottom: 2px dotted #999;
 }
 
 .gcli-in-error {
   border-bottom: 2px dotted #F00;
 }
 
 .gcli-in-ontab {
-  color: hsl(200,40%,70%);
+  color: hsl(210,0%,35%);
 }
 
 .gcli-in-todo {
-  color: hsl(48,28%,76%);
+  color: hsl(210,50%,35%);
 }
 
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
-
-/* Highlight toolbar - Option menu */
-
-#inspector-option-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
-  outline-offset: -2px;
-}
--- a/browser/themes/pinstripe/devtools/gcli.css
+++ b/browser/themes/pinstripe/devtools/gcli.css
@@ -1,17 +1,51 @@
 /* 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/. */
 
-#gclichrome-body {
+.gcli-body {
   margin: 0;
-  padding: 0;
   font: message-box;
-  color: #fff;
+  color: hsl(210,30%,85%);
+}
+
+#gcli-output-root,
+#gcli-tooltip-root {
+  border: 1px solid hsl(210,11%,10%);
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-image: url(background-noise-toolbar.png),
+                    -moz-linear-gradient(top, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
+  border-radius: 3px;
+}
+
+#gcli-output-root {
+  padding: 5px 10px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+}
+
+#gcli-tooltip-root {
+  padding: 5px 0px;
+}
+
+#gcli-tooltip-connector {
+  margin-top: -1px;
+  margin-left: 8px;
+  width: 20px;
+  height: 0;
+  border-left: 1px solid hsl(210,11%,10%);
+  border-right: 1px solid hsl(210,11%,10%);
+  background-color: hsl(210,11%,16%);
+}
+
+.gcli-tt-description,
+.gcli-tt-error {
+  padding: 0 10px;
 }
 
 .gcli-row-out {
   padding: 0 5px;
   line-height: 1.2em;
   border-top: none;
   border-bottom: none;
   color: hsl(210,30%,85%);
@@ -22,100 +56,71 @@
 .gcli-row-out h2,
 .gcli-row-out h3 {
   margin: 5px 0;
 }
 
 .gcli-row-out h1,
 .gcli-row-out h2,
 .gcli-row-out h3,
+.gcli-row-out h4,
+.gcli-row-out h5,
 .gcli-row-out th,
 .gcli-row-out strong {
-  color: #fff;
-}
-
-.gcli-out-shortcut {
-  border: 1px solid #999;
-  border-radius: 3px;
-  padding: 1px 4px 0;
-  margin: 0 4px;
-  font-size: 80%;
-  font-family: Menlo, Monaco, monospace;
-  cursor: pointer;
-  vertical-align: bottom;
-  white-space: pre;
-  color: #000;
-  background-color: #fff;
+  color: hsl(210,30%,95%);
 }
 
-.gcli-out-shortcut:before {
-  color: #66F;
-  content: '\bb';
-}
-
-
-/* From: $GCLI/lib/gcli/commands/help.css */
-
-.gcli-help-arrow {
-  font-size: 70%;
-  color: #AAA;
+.gcli-out-shortcut,
+.gcli-help-synopsis {
+  padding: 0 3px;
+  margin: 0 4px;
+  font-weight: normal;
+  font-size: 90%;
+  border-radius: 3px;
+  background-color: hsl(210,11%,16%);
+  border: 1px solid hsl(210,11%,10%);
 }
 
-.gcli-help-synopsis {
-  font-family: Menlo, Monaco, monospace;
-  font-weight: normal;
-  padding: 0 3px;
-  margin: 0 10px;
-  border: 1px solid #999;
-  border-radius: 3px;
-  color: #000;
+.gcli-out-shortcut:before,
+.gcli-help-synopsis:before {
+  color: hsl(210,30%,85%);
+  -moz-padding-end: 2px;
 }
 
-.gcli-help-synopsis:before {
-  color: #66F;
+.gcli-help-arrow {
+  color: #666;
 }
 
 .gcli-help-description {
   margin: 0 20px;
   padding: 0;
 }
 
 .gcli-help-parameter {
   margin: 0 30px;
   padding: 0;
 }
 
 .gcli-help-header {
   margin: 10px 0 6px;
 }
 
-
-/* From: $GCLI/lib/gcli/ui/fields/menu.css */
-
 .gcli-menu-name {
   -moz-padding-start: 8px;
 }
 
 .gcli-menu-desc {
   -moz-padding-end: 8px;
-  color: #999;
+  color: hsl(210,30%,75%);
 }
 
 .gcli-menu-option:hover {
-  background-image: url(background-noise-toolbar.png),
-                    -moz-linear-gradient(top, hsl(210,11%,22%), hsl(210,11%,18%));
+  background-color: hsla(0,100%,100%,.1);
 }
 
 .gcli-menu-highlight,
 .gcli-menu-highlight.gcli-menu-option:hover {
-  background-image: url(background-noise-toolbar.png),
-                    -moz-linear-gradient(top, hsl(210,11%,18%), hsl(210,11%,14%));
-}
-
-.gcli-menu-error {
-  padding: 8px 10px 2px;
-  font-size: 80%;
-  color: red;
+  background-color: hsla(0,0%,0%,.3);
 }
 
 .gcli-menu-typed {
   color: hsl(25,78%,50%);
 }
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -2649,17 +2649,18 @@ panel[dimmed="true"] {
   -moz-image-region: rect(0px 16px 16px 0px);
   border: none;
 }
 
 #inspector-option-toolbarbutton[open] {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#inspector-toolbar {
+#inspector-toolbar,
+#developer-toolbar {
   border-top: 1px solid hsla(211,68%,6%,.65) !important;
 }
 
 #devtools-side-splitter {
   border: 0;
   -moz-border-start: 1px solid #242b33;
   min-width: 0;
   width: 3px;
@@ -3052,52 +3053,78 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   border-radius: 3px 0 0 3px;
 }
 
 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
 #inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
   border-radius: 0 3px 3px 0;
 }
 
-.gcli-panel-inner-arrowcontent {
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
+
+html|*#gcli-tooltip-frame,
+html|*#gcli-output-frame {
   padding: 0;
+  border-width: 0;
+  background-color: transparent;
+}
+
+#gcli-output,
+#gcli-tooltip {
+  border-width: 0;
+  background-color: transparent;
+  margin-bottom: -2px;
 }
 
 .gclitoolbar-input-node,
 .gclitoolbar-complete-node,
 .gclitoolbar-prompt {
-  font-family: Consolas, Lucida Console, monospace;
+  margin: 0;
+  -moz-margin-end: 3px;
+  -moz-box-align: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 4px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  text-shadow: none;
 }
 
 .gclitoolbar-input-node {
+  padding-left: 20px;
   background-color: transparent;
   -moz-appearance: none;
-  border: none;
-  padding: 0 0 0 22px;
+  border-color: hsl(210,24%,10%);
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05),
+              0 0 0 1px hsla(210,40%,83%,.1);
 }
 
 .gclitoolbar-complete-node {
+  padding-left: 21px;
   background-color: transparent;
   color: transparent;
-  height: 100%;
-  line-height: 100%;
-  padding: 7px 0 0 27px;
-  margin: 0;
 }
 
 .gclitoolbar-prompt {
-  color: hsl(25,78%,50%);
-  -moz-appearance: textfield;
+  padding-left: 4px;
+  padding-bottom: 2px;
   font-size: 150%;
   font-weight: bold;
-  line-height: 100%;
-  padding-top: 1px;
-  padding-left: 4px;
-}
-
+  color: hsl(210,30%,85%);
+  background-color: hsl(210,24%,16%);
+}
+
+.gclitoolbar-prompt-label,
 .gcli-in-incomplete,
 .gcli-in-error,
 .gcli-in-ontab,
 .gcli-in-todo,
 .gcli-in-closebrace,
 .gcli-in-param,
 .gcli-in-valid {
   margin: 0;
@@ -3108,25 +3135,18 @@ html|*#highlighter-nodeinfobar-pseudo-cl
   border-bottom: 2px dotted #999;
 }
 
 .gcli-in-error {
   border-bottom: 2px dotted #F00;
 }
 
 .gcli-in-ontab {
-  color: hsl(200,40%,70%);
+  color: hsl(210,0%,35%);
 }
 
 .gcli-in-todo {
-  color: hsl(48,28%,76%);
+  color: hsl(210,50%,35%);
 }
 
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
-
-/* Highlight toolbar - Option menu */
-
-#inspector-option-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
-  outline-offset: -2px;
-}
--- a/browser/themes/winstripe/devtools/gcli.css
+++ b/browser/themes/winstripe/devtools/gcli.css
@@ -1,107 +1,125 @@
 /* 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/. */
 
-#gclichrome-body {
+.gcli-body {
   margin: 0;
-  padding: 0;
   font: message-box;
+  color: hsl(210,30%,85%);
+}
+
+#gcli-output-root,
+#gcli-tooltip-root {
+  border: 1px solid hsl(210,24%,10%);
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-image: -moz-linear-gradient(top, hsla(209,18%,18%,0.9), hsl(210,24%,16%));
+  border-radius: 3px;
+}
+
+#gcli-output-root {
+  padding: 5px 10px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+}
+
+#gcli-tooltip-root {
+  padding: 5px 0px;
+}
+
+#gcli-tooltip-connector {
+  margin-top: -1px;
+  margin-left: 8px;
+  width: 20px;
+  height: 10px;
+  border-left: 1px solid hsl(210,24%,10%);
+  border-right: 1px solid hsl(210,24%,10%);
+  background-color: hsl(210,24%,16%);
+}
+
+.gcli-tt-description,
+.gcli-tt-error {
+  padding: 0 10px;
 }
 
 .gcli-row-out {
   padding: 0 5px;
   line-height: 1.2em;
   border-top: none;
   border-bottom: none;
+  color: hsl(210,30%,85%);
 }
 
 .gcli-row-out p,
 .gcli-row-out h1,
 .gcli-row-out h2,
 .gcli-row-out h3 {
   margin: 5px 0;
 }
 
-.gcli-out-shortcut {
-  border: 1px solid #999;
-  border-radius: 3px;
-  padding: 1px 4px 0;
-  margin: 0 4px;
-  font-size: 80%;
-  font-family: Consolas, Inconsolata, "Courier New", monospace;
-  cursor: pointer;
-  vertical-align: bottom;
-  white-space: pre;
-  background-color: #fff;
-}
-
-.gcli-out-shortcut:before {
-  color: #66F;
-  content: '\bb';
+.gcli-row-out h1,
+.gcli-row-out h2,
+.gcli-row-out h3,
+.gcli-row-out h4,
+.gcli-row-out h5,
+.gcli-row-out th,
+.gcli-row-out strong {
+  color: hsl(210,30%,95%);
 }
 
-
-/* From: $GCLI/lib/gcli/commands/help.css */
-
-.gcli-help-arrow {
-  font-size: 70%;
-  color: #AAA;
+.gcli-out-shortcut,
+.gcli-help-synopsis {
+  padding: 0 3px;
+  margin: 0 4px;
+  font-weight: normal;
+  font-size: 90%;
+  border-radius: 3px;
+  background-color: hsl(210,24%,16%);
+  border: 1px solid hsl(210,24%,10%);
 }
 
-.gcli-help-synopsis {
-  font-family: Consolas, Inconsolata, "Courier New", monospace;
-  font-weight: normal;
-  padding: 0 3px;
-  margin: 0 10px;
-  border: 1px solid #999;
-  border-radius: 3px;
+.gcli-out-shortcut:before,
+.gcli-help-synopsis:before {
+  color: hsl(210,30%,85%);
+  -moz-padding-end: 2px;
 }
 
-.gcli-help-synopsis:before {
-  color: #66F;
+.gcli-help-arrow {
+  color: #666;
 }
 
 .gcli-help-description {
   margin: 0 20px;
   padding: 0;
 }
 
 .gcli-help-parameter {
   margin: 0 30px;
   padding: 0;
 }
 
 .gcli-help-header {
   margin: 10px 0 6px;
 }
 
-
-/* From: $GCLI/lib/gcli/ui/fields/menu.css */
-
 .gcli-menu-name {
   -moz-padding-start: 8px;
 }
 
 .gcli-menu-desc {
   -moz-padding-end: 8px;
-  color: #999;
+  color: hsl(210,30%,75%);
 }
 
 .gcli-menu-option:hover {
-  background-color: #EEE;
+  background-color: hsla(0,100%,100%,.1);
 }
 
 .gcli-menu-highlight,
 .gcli-menu-highlight.gcli-menu-option:hover {
-  background-color: #DDD;
-}
-
-.gcli-menu-error {
-  padding: 8px 10px 2px;
-  font-size: 80%;
-  color: red;
+  background-color: hsla(0,0%,0%,.3);
 }
 
 .gcli-menu-typed {
   color: hsl(25,78%,50%);
 }