Bug 756890 - Fix an easy set of GCLI/Developer Toolbar display issues; r=paul,dão

This commit is contained in:
Joe Walker 2012-06-01 08:24:19 +01:00
parent f5334fea0e
commit 89dd017d2c
9 changed files with 340 additions and 222 deletions

View File

@ -552,3 +552,16 @@ statuspanel[inactive][previoustype=overLink] {
/* 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;
}

View File

@ -1034,8 +1034,10 @@
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"

View File

@ -2,23 +2,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/. */
.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';
}
@ -34,8 +28,9 @@
width: 100%;
}
.gcli-menu-error {
overflow: hidden;
white-space: nowrap;
.gcli-menu-name,
.gcli-out-shortcut,
.gcli-help-synopsis {
direction: ltr;
}

View File

@ -1982,7 +1982,8 @@ panel[dimmed="true"] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-toolbar {
#inspector-toolbar,
#developer-toolbar {
border-top: 1px solid hsla(210, 8%, 5%, .65);
}
@ -2383,42 +2384,69 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
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,
@ -2439,20 +2467,13 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
}
.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;
}

View File

@ -2,10 +2,44 @@
* 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 {
@ -13,6 +47,7 @@
line-height: 1.2em;
border-top: none;
border-bottom: none;
color: hsl(210,30%,85%);
}
.gcli-row-out p,
@ -22,43 +57,35 @@
margin: 5px 0;
}
.gcli-out-shortcut {
border: 1px solid #999;
border-radius: 3px;
padding: 1px 4px 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: hsl(210,30%,95%);
}
.gcli-out-shortcut,
.gcli-help-synopsis {
padding: 0 3px;
margin: 0 4px;
font-size: 80%;
font-family: monospace;
cursor: pointer;
vertical-align: bottom;
white-space: pre;
background-color: #fff;
font-weight: normal;
font-size: 90%;
border-radius: 3px;
background-color: hsl(210,11%,16%);
border: 1px solid hsl(210,11%,10%);
}
.gcli-out-shortcut:before {
color: #66F;
content: '\bb';
.gcli-out-shortcut:before,
.gcli-help-synopsis:before {
color: hsl(210,30%,85%);
-moz-padding-end: 2px;
}
/* From: $GCLI/lib/gcli/commands/help.css */
.gcli-help-arrow {
font-size: 70%;
color: #AAA;
}
.gcli-help-synopsis {
font-family: monospace;
font-weight: normal;
padding: 0 3px;
margin: 0 10px;
border: 1px solid #999;
border-radius: 3px;
}
.gcli-help-synopsis:before {
color: #66F;
color: #666;
}
.gcli-help-description {
@ -75,31 +102,22 @@
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 {

View File

@ -2711,18 +2711,21 @@ panel[dimmed="true"] {
-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 */
}
@ -3122,39 +3125,69 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
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,
@ -3175,20 +3208,13 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
}
.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;
}

View File

@ -2,11 +2,45 @@
* 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 {
@ -27,50 +61,32 @@
.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;
color: hsl(210,30%,95%);
}
.gcli-out-shortcut {
border: 1px solid #999;
border-radius: 3px;
padding: 1px 4px 0;
.gcli-out-shortcut,
.gcli-help-synopsis {
padding: 0 3px;
margin: 0 4px;
font-size: 80%;
font-family: Menlo, Monaco, monospace;
cursor: pointer;
vertical-align: bottom;
white-space: pre;
color: #000;
background-color: #fff;
font-weight: normal;
font-size: 90%;
border-radius: 3px;
background-color: hsl(210,11%,16%);
border: 1px solid hsl(210,11%,10%);
}
.gcli-out-shortcut:before {
color: #66F;
content: '\bb';
.gcli-out-shortcut:before,
.gcli-help-synopsis:before {
color: hsl(210,30%,85%);
-moz-padding-end: 2px;
}
/* From: $GCLI/lib/gcli/commands/help.css */
.gcli-help-arrow {
font-size: 70%;
color: #AAA;
}
.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-help-synopsis:before {
color: #66F;
color: #666;
}
.gcli-help-description {
@ -87,33 +103,22 @@
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 {

View File

@ -2654,7 +2654,8 @@ panel[dimmed="true"] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-toolbar {
#inspector-toolbar,
#developer-toolbar {
border-top: 1px solid hsla(211,68%,6%,.65) !important;
}
@ -3057,42 +3058,68 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
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,
@ -3113,20 +3140,13 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
}
.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;
}

View File

@ -2,10 +2,44 @@
* 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 {
@ -13,6 +47,7 @@
line-height: 1.2em;
border-top: none;
border-bottom: none;
color: hsl(210,30%,85%);
}
.gcli-row-out p,
@ -22,43 +57,35 @@
margin: 5px 0;
}
.gcli-out-shortcut {
border: 1px solid #999;
border-radius: 3px;
padding: 1px 4px 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: hsl(210,30%,95%);
}
.gcli-out-shortcut,
.gcli-help-synopsis {
padding: 0 3px;
margin: 0 4px;
font-size: 80%;
font-family: Consolas, Inconsolata, "Courier New", monospace;
cursor: pointer;
vertical-align: bottom;
white-space: pre;
background-color: #fff;
font-weight: normal;
font-size: 90%;
border-radius: 3px;
background-color: hsl(210,24%,16%);
border: 1px solid hsl(210,24%,10%);
}
.gcli-out-shortcut:before {
color: #66F;
content: '\bb';
.gcli-out-shortcut:before,
.gcli-help-synopsis:before {
color: hsl(210,30%,85%);
-moz-padding-end: 2px;
}
/* From: $GCLI/lib/gcli/commands/help.css */
.gcli-help-arrow {
font-size: 70%;
color: #AAA;
}
.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-help-synopsis:before {
color: #66F;
color: #666;
}
.gcli-help-description {
@ -75,31 +102,22 @@
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 {