wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 942292 - DevTools themes - make the toolbars thinner;r=vporof

Browse Source
This commit is contained in:
Brian Grinstead 2014-06-13 09:11:32 -05:00
parent 13b7c7896a
commit 6669d8c6ee
18 changed files with 249 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
browser/devtools/canvasdebugger/canvasdebugger.xul
View File

@ -20,21 +20,22 @@
<vbox id="snapshots-pane">
<toolbar id="snapshots-toolbar"
class="devtools-toolbar">
<hbox id="snapshots-controls"
class="devtools-toolbarbutton-group">
<hbox id="snapshots-controls">
<toolbarbutton id="record-snapshot"
class="devtools-toolbarbutton"
oncommand="SnapshotsListView._onRecordButtonClick()"
tooltiptext="&canvasDebuggerUI.recordSnapshot.tooltip;"
hidden="true"/>
<toolbarbutton id="import-snapshot"
class="devtools-toolbarbutton"
oncommand="SnapshotsListView._onImportButtonClick()"
label="&canvasDebuggerUI.importSnapshot;"/>
<toolbarbutton id="clear-snapshots"
class="devtools-toolbarbutton"
oncommand="SnapshotsListView._onClearButtonClick()"
label="&canvasDebuggerUI.clearSnapshots;"/>
<hbox class="devtools-toolbarbutton-group">
<toolbarbutton id="import-snapshot"
class="devtools-toolbarbutton"
oncommand="SnapshotsListView._onImportButtonClick()"
label="&canvasDebuggerUI.importSnapshot;"/>
<toolbarbutton id="clear-snapshots"
class="devtools-toolbarbutton"
oncommand="SnapshotsListView._onClearButtonClick()"
label="&canvasDebuggerUI.clearSnapshots;"/>
</hbox>
</hbox>
</toolbar>
<vbox id="snapshots-list" flex="1"/>
@ -48,6 +49,7 @@
flex="1">
<button id="reload-notice-button"
class="devtools-toolbarbutton"
standalone="true"
label="&canvasDebuggerUI.reloadNotice1;"
oncommand="gFront.setup({ reload: true })"/>
<label id="reload-notice-label"
@ -64,6 +66,7 @@
<label value="&canvasDebuggerUI.emptyNotice1;"/>
<button id="canvas-debugging-empty-notice-button"
class="devtools-toolbarbutton"
standalone="true"
oncommand="SnapshotsListView._onRecordButtonClick()"/>
<label value="&canvasDebuggerUI.emptyNotice2;"/>
</hbox>

4
browser/devtools/debugger/debugger.xul
View File

@ -336,7 +336,7 @@
tooltiptext="&debuggerUI.panesButton.tooltip;"
tabindex="0"/>
<toolbarbutton id="debugger-options"
class="devtools-option-toolbarbutton"
class="devtools-toolbarbutton devtools-option-toolbarbutton"
tooltiptext="&debuggerUI.optsButton.tooltip;"
popup="debuggerPrefsContextMenu"
tabindex="0"/>
@ -363,11 +363,13 @@
command="blackBoxCommand"/>
<toolbarbutton id="pretty-print"
class="devtools-toolbarbutton devtools-monospace"
text-as-image="true"
label="{}"
tooltiptext="&debuggerUI.sources.prettyPrint;"
command="prettyPrintCommand"
hidden="true"/>
</hbox>
<vbox class="devtools-separator"/>
<toolbarbutton id="toggle-breakpoints"
class="devtools-toolbarbutton"
tooltiptext="&debuggerUI.sources.toggleBreakpoints;"

2
browser/devtools/framework/toolbox.xul
View File

@ -70,7 +70,7 @@
<hbox id="toolbox-picker-container" />
<hbox id="toolbox-tabs" flex="1" />
<hbox id="toolbox-buttons" pack="end"/>
<vbox id="toolbox-controls-separator"/>
<vbox id="toolbox-controls-separator" class="devtools-separator"/>
<hbox id="toolbox-option-container"/>
<hbox id="toolbox-controls">
<hbox id="toolbox-dock-buttons"/>

5
browser/devtools/netmonitor/netmonitor.xul
View File

@ -139,12 +139,14 @@
<label value="&netmonitorUI.reloadNotice1;"/>
<button id="requests-menu-reload-notice-button"
class="devtools-toolbarbutton"
standalone="true"
label="&netmonitorUI.reloadNotice2;"/>
<label value="&netmonitorUI.reloadNotice3;"/>
</hbox>
<hbox id="notice-perf-message" align="center">
<label value="&netmonitorUI.perfNotice1;"/>
<button id="requests-menu-perf-notice-button"
standalone="true"
class="devtools-toolbarbutton"/>
<label value="&netmonitorUI.perfNotice2;"/>
</hbox>
@ -197,7 +199,8 @@
<label value="&netmonitorUI.custom.newRequest;"
class="plain tabpanel-summary-label
custom-header"/>
<hbox flex="1" pack="end">
<hbox flex="1" pack="end"
class="devtools-toolbarbutton-group">
<button id="custom-request-send-button"
class="devtools-toolbarbutton"
label="&netmonitorUI.custom.send;"/>

3
browser/devtools/profiler/profiler.xul
View File

@ -24,8 +24,7 @@
class="devtools-responsive-container theme-body">
<vbox class="profiler-sidebar theme-sidebar">
<toolbar class="devtools-toolbar">
<hbox id="profiler-controls"
class="devtools-toolbarbutton-group">
<hbox id="profiler-controls">
<toolbarbutton id="profiler-start"
tooltiptext="&startProfiler.tooltip;"
class="devtools-toolbarbutton"

1
browser/devtools/shadereditor/shadereditor.xul
View File

@ -27,6 +27,7 @@
flex="1">
<button id="requests-menu-reload-notice-button"
class="devtools-toolbarbutton"
standalone="true"
label="&shaderEditorUI.reloadNotice1;"
oncommand="gFront.setup({ reload: true });"/>
<label id="requests-menu-reload-notice-label"

18
browser/devtools/styleeditor/styleeditor.xul
View File

@ -90,14 +90,16 @@
<xul:box class="splitview-controller">
<xul:box class="splitview-main">
<xul:toolbar class="devtools-toolbar">
<xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
accesskey="&newButton.accesskey;"
tooltiptext="&newButton.tooltip;"
label="&newButton.label;"/>
<xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
accesskey="&importButton.accesskey;"
tooltiptext="&importButton.tooltip;"
label="&importButton.label;"/>
<xul:hbox class="devtools-toolbarbutton-group">
<xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
accesskey="&newButton.accesskey;"
tooltiptext="&newButton.tooltip;"
label="&newButton.label;"/>
<xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
accesskey="&importButton.accesskey;"
tooltiptext="&importButton.tooltip;"
label="&importButton.label;"/>
</xul:hbox>
<xul:spacer/>
<xul:toolbarbutton id="style-editor-options"
class="devtools-option-toolbarbutton"

1
browser/devtools/webaudioeditor/webaudioeditor.xul
View File

@ -30,6 +30,7 @@
flex="1">
<button id="requests-menu-reload-notice-button"
class="devtools-toolbarbutton"
standalone="true"
label="&webAudioEditorUI.reloadNotice1;"
oncommand="gFront.setup({ reload: true });"/>
<label id="requests-menu-reload-notice-label"

151
browser/devtools/webconsole/webconsole.xul
View File

@ -84,81 +84,82 @@ function goUpdateConsoleCommands() {
<box class="hud-outer-wrapper devtools-responsive-container theme-body" flex="1">
<vbox class="hud-console-wrapper" flex="1">
<toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
<toolbarbutton label="&btnPageNet.label;" type="menu-button"
category="net" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageNet.tooltip;"
accesskeyMacOSX="&btnPageNet.accesskeyMacOSX;"
accesskey="&btnPageNet.accesskey;"
tabindex="3">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
prefKey="network"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox" autocheck="false"
prefKey="netwarn"/>
<menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
prefKey="networkinfo"/>
<menuseparator id="saveBodiesSeparator" />
<menuitem id="saveBodies" type="checkbox" label="&saveBodies.label;"
accesskey="&saveBodies.accesskey;"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageCSS.label;" type="menu-button"
category="css" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageCSS.tooltip2;"
accesskey="&btnPageCSS.accesskey;"
tabindex="4">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
prefKey="csserror"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="cssparser"/>
<menuitem label="&btnConsoleReflows;" type="checkbox"
autocheck="false" prefKey="csslog"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageJS.label;" type="menu-button"
category="js" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageJS.tooltip;"
accesskey="&btnPageJS.accesskey;"
tabindex="5">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox"
autocheck="false" prefKey="exception"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="jswarn"/>
<menuitem label="&btnConsoleLog;" type="checkbox"
autocheck="false" prefKey="jslog"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageSecurity.label;" type="menu-button"
category="security" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageSecurity.tooltip;"
accesskey="&btnPageSecurity.accesskey;"
tabindex="6">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox"
autocheck="false" prefKey="secerror"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="secwarn"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageLogging.label;" type="menu-button"
category="logging" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageLogging.tooltip;"
accesskey="&btnPageLogging.accesskey3;"
tabindex="7">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox"
autocheck="false" prefKey="error"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="warn"/>
<menuitem label="&btnConsoleInfo;" type="checkbox" autocheck="false"
prefKey="info"/>
<menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
prefKey="log"/>
</menupopup>
</toolbarbutton>
<hbox class="devtools-toolbarbutton-group">
<toolbarbutton label="&btnPageNet.label;" type="menu-button"
category="net" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageNet.tooltip;"
accesskeyMacOSX="&btnPageNet.accesskeyMacOSX;"
accesskey="&btnPageNet.accesskey;"
tabindex="3">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
prefKey="network"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox" autocheck="false"
prefKey="netwarn"/>
<menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
prefKey="networkinfo"/>
<menuseparator id="saveBodiesSeparator" />
<menuitem id="saveBodies" type="checkbox" label="&saveBodies.label;"
accesskey="&saveBodies.accesskey;"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageCSS.label;" type="menu-button"
category="css" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageCSS.tooltip2;"
accesskey="&btnPageCSS.accesskey;"
tabindex="4">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
prefKey="csserror"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="cssparser"/>
<menuitem label="&btnConsoleReflows;" type="checkbox"
autocheck="false" prefKey="csslog"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageJS.label;" type="menu-button"
category="js" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageJS.tooltip;"
accesskey="&btnPageJS.accesskey;"
tabindex="5">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox"
autocheck="false" prefKey="exception"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="jswarn"/>
<menuitem label="&btnConsoleLog;" type="checkbox"
autocheck="false" prefKey="jslog"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageSecurity.label;" type="menu-button"
category="security" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageSecurity.tooltip;"
accesskey="&btnPageSecurity.accesskey;"
tabindex="6">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox"
autocheck="false" prefKey="secerror"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="secwarn"/>
</menupopup>
</toolbarbutton>
<toolbarbutton label="&btnPageLogging.label;" type="menu-button"
category="logging" class="devtools-toolbarbutton webconsole-filter-button"
tooltiptext="&btnPageLogging.tooltip;"
accesskey="&btnPageLogging.accesskey3;"
tabindex="7">
<menupopup>
<menuitem label="&btnConsoleErrors;" type="checkbox"
autocheck="false" prefKey="error"/>
<menuitem label="&btnConsoleWarnings;" type="checkbox"
autocheck="false" prefKey="warn"/>
<menuitem label="&btnConsoleInfo;" type="checkbox" autocheck="false"
prefKey="info"/>
<menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
prefKey="log"/>
</menupopup>
</toolbarbutton>
</hbox>
<toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"
accesskey="&btnClear.accesskey;"

4
browser/themes/shared/devtools/canvasdebugger.inc.css
View File

@ -27,10 +27,6 @@
color: #585959; /* Grey foreground text */
}
#reload-notice > button {
min-height: 2em;
}
#empty-notice > button {
min-width: 30px;
min-height: 28px;

5
browser/themes/shared/devtools/debugger.inc.css
View File

@ -599,11 +599,6 @@
/* Toolbar controls */
.devtools-sidebar-tabs > tabs > tab {
min-height: 24px !important;
padding: 0 !important;
}
#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
width: 16px;

5
browser/themes/shared/devtools/inspector.css
View File

@ -5,11 +5,6 @@
%ifdef XP_MACOSX
#inspector-toolbar {
padding-top: 4px;
padding-bottom: 4px;
}
#inspector-toolbar:-moz-locale-dir(ltr) {
padding-left: 2px;
padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */

2
browser/themes/shared/devtools/netmonitor.inc.css
View File

@ -84,7 +84,7 @@
-moz-appearance: none;
background: none;
min-width: 1px;
min-height: 32px;
min-height: 24px;
margin: 0;
border: none;
padding: 0;

4
browser/themes/shared/devtools/shadereditor.inc.css
View File

@ -35,10 +35,6 @@
-moz-margin-end: 6px;
}
#requests-menu-reload-notice-button {
min-height: 2em;
}
/* Shaders pane */
#shaders-pane {

270
browser/themes/shared/devtools/toolbars.inc.css
View File

@ -9,24 +9,35 @@
%define solidSeparatorDark linear-gradient(#2d5b7d, #2d5b7d)
%define solidSeparatorLight linear-gradient(#aaa, #aaa)
.devtools-toolbar {
/* Toolbars */
.devtools-toolbar,
.devtools-sidebar-tabs > tabs {
-moz-appearance: none;
padding: 4px 3px;
padding: 0;
border-bottom-width: 1px;
border-bottom-style: solid;
height: 24px;
line-height: 24px;
box-sizing: border-box;
}
.devtools-toolbar {
padding: 0 3px;
}
/* Toolbar buttons */
.devtools-menulist,
.devtools-toolbarbutton {
-moz-appearance: none;
-moz-box-align: center;
background: transparent;
min-width: 78px;
min-height: 22px;
min-height: 18px;
padding: 1px;
text-shadow: none;
border: 1px solid hsla(210,8%,5%,.45);
border-radius: 3px;
margin: 0 3px;
border: none;
border-radius: 0;
margin: 2px 3px;
}
.devtools-menulist:-moz-focusring,
@ -35,11 +46,17 @@
outline-offset: -4px;
}
.devtools-toolbarbutton > .toolbarbutton-icon {
margin: 0;
.devtools-toolbarbutton[standalone] {
-moz-margin-end: 5px;
border-width: 1px;
border-style: solid;
}
.devtools-toolbarbutton[label][standalone] {
min-height: 2em;
}
.devtools-toolbarbutton:not([label]) {
.devtools-toolbarbutton:not([label]),
.devtools-toolbarbutton[text-as-image] {
min-width: 32px;
}
@ -47,74 +64,104 @@
display: none;
}
.devtools-toolbar .devtools-toolbarbutton {
border-width: 0;
}
.devtools-toolbarbutton > .toolbarbutton-icon {
margin: 0;
}
.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal;
padding: 0;
}
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-appearance: none;
color: inherit;
border-width: 0;
}
.devtools-toolbarbutton[type=menu-button] {
padding: 0 1px;
-moz-box-align: stretch;
}
.devtools-menulist > .menulist-dropmarker {
-moz-appearance: none;
display: -moz-box;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
-moz-box-align: center;
min-width: 16px;
}
.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
-moz-box-align: center;
padding: 0 3px;
}
.theme-dark .devtools-menulist,
.theme-dark .devtools-toolbarbutton {
background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
color: #a9bacb; /* Body text - high contrast */
background-color: #343c45; /* Toolbars */
border-color: rgba(0, 0, 0, .4); /* Splitters */
color: inherit;
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.theme-light .devtools-menulist,
.theme-light .devtools-toolbarbutton {
background: #f7f7f7;
color: #18191a;
border-color: #bbb;
color: #292e33; /* Body text - high contrast */
background-color: #f0f1f2; /* Toolbars */
border-color: rgba(170, 170, 170, .5); /* Splitters */
}
/* Text-only buttons */
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]) {
background-color: rgba(170, 170, 170, .2); /* Splitter */
}
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]) {
background-color: rgba(0, 0, 0, .2); /* Splitter */
}
/* Button States */
.theme-dark .devtools-toolbarbutton:hover,
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
background: rgba(0, 0, 0, .3); /* Splitters */
}
.theme-light .devtools-toolbarbutton:hover,
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
background: rgba(170, 170, 170, .3); /* Splitters */
}
.theme-dark .devtools-toolbarbutton:hover:active,
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
background: rgba(0, 0, 0, .4); /* Splitters */
}
.theme-light .devtools-toolbarbutton:hover:active,
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
background: rgba(170, 170, 170, .4); /* Splitters */
}
/* Menu type buttons and checked states */
.theme-dark .devtools-menulist[open=true],
.theme-dark .devtools-toolbarbutton[open=true],
.theme-dark .devtools-toolbarbutton[open=true]:hover,
.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
.theme-dark .devtools-toolbarbutton[checked=true],
.theme-dark .devtools-toolbarbutton[checked=true]:hover {
background: rgba(29, 79, 115, .7); /* Select highlight blue */
color: #f5f7fa;
}
.theme-light .devtools-menulist[open=true],
.theme-light .devtools-toolbarbutton[open=true],
.theme-light .devtools-toolbarbutton[open=true]:hover,
.theme-light .devtools-toolbarbutton[open=true]:hover:active,
.theme-light .devtools-toolbarbutton[checked=true],
.theme-light .devtools-toolbarbutton[checked=true]:hover {
background: #ddd;
}
.theme-light .devtools-toolbarbutton:hover {
background: #eee;
}
.theme-light .devtools-toolbarbutton:hover:active,
.theme-light .devtools-toolbarbutton[checked=true]:hover:active {
background: #e8e8e8;
}
.theme-light .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
color: #667380;
}
.theme-light .devtools-toolbarbutton[type=menu-button][checked=true] > .toolbarbutton-menubutton-button {
color: #18191a;
}
.theme-dark .devtools-toolbarbutton:not([checked]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.theme-dark .devtools-menulist[open=true],
.theme-dark .devtools-toolbarbutton[open=true],
.theme-dark .devtools-toolbarbutton[checked=true] {
border-color: hsla(210,8%,5%,.6) !important;
background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.theme-dark .devtools-toolbarbutton[checked=true] {
color: hsl(208,100%,60%);
}
.theme-dark .devtools-toolbarbutton[checked=true]:hover {
background-color: transparent !important;
}
.theme-dark .devtools-toolbarbutton[checked=true]:hover:active {
background-color: hsla(210,8%,5%,.2) !important;
.theme-light .devtools-toolbarbutton[checked=true]:hover {
background: rgba(76, 158, 217, .2); /* Select highlight blue */
}
.devtools-option-toolbarbutton {
@ -129,79 +176,24 @@
opacity: 1;
}
.devtools-menulist > .menulist-label-box {
text-align: center;
}
.devtools-menulist > .menulist-dropmarker {
-moz-appearance: none;
display: -moz-box;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
-moz-box-align: center;
min-width: 16px;
}
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-appearance: none;
color: inherit;
border-width: 0;
}
.theme-dark .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-border-end: 1px solid hsla(210,8%,5%,.45);
box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
}
.theme-dark .devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
}
.theme-light .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-border-end: 1px solid #bbb;
}
.devtools-toolbarbutton[type=menu-button] {
padding: 0 1px;
-moz-box-align: stretch;
}
.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
-moz-box-align: center;
padding: 0 3px;
}
/* Toolbar button groups */
.theme-light .devtools-toolbarbutton-group > .devtools-toolbarbutton,
.theme-dark .devtools-toolbarbutton-group > .devtools-toolbarbutton {
margin: 0;
box-shadow: none;
border-radius: 0;
border-width: 0;
-moz-border-end-width: 1px;
.devtools-toolbarbutton-group > .devtools-toolbarbutton {
margin-left: 1px;
margin-right: 1px;
outline-offset: -3px;
box-shadow: none;
}
.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-of-type {
-moz-border-end-width: 0;
.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
-moz-margin-end: 0;
}
.devtools-toolbarbutton-group {
border-radius: 3px;
margin: 0 3px;
.devtools-toolbarbutton-group + .devtools-toolbarbutton {
-moz-margin-start: 3px;
}
.theme-dark .devtools-toolbarbutton-group {
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset,
0 0 0 1px hsla(210,16%,76%,.15) inset,
0 1px 0 hsla(210,16%,76%,.15);
border: 1px solid hsla(210,8%,5%,.45);
}
.theme-light .devtools-toolbarbutton-group {
border: 1px solid #bbb;
.devtools-separator + .devtools-toolbarbutton {
-moz-margin-start: 1px;
}
/* Text input */
@ -230,8 +222,9 @@
}
.devtools-searchinput {
padding-top: 3px;
padding-bottom: 3px;
margin-top: 1px;
margin-bottom: 1px;
padding: 0;
-moz-padding-start: 22px;
-moz-padding-end: 12px;
background-position: 8px center;
@ -325,13 +318,9 @@
}
.devtools-sidebar-tabs > tabs {
-moz-appearance: none;
position: static;
font: inherit;
margin-bottom: 0;
padding: 0;
border-width: 0 0 1px 0;
border-style: solid;
overflow: hidden;
}
@ -346,14 +335,10 @@
* First, we need to replicated the padding of toolbar (4px),
* then we need to take the border of the buttons into account (1px).
*/
padding: 5px 3px;
padding: 0 3px;
-moz-padding-start: 6px;
margin: 0;
min-width: 78px;
/* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px.
* -1px because the parent element (<tabs>) comes with a 1px bottom border.
*/
min-height: 32px;
text-align: center;
color: inherit;
-moz-box-flex: 1;
@ -501,7 +486,8 @@
opacity: 1;
}
#toolbox-controls-separator {
.devtools-separator {
margin: 0 2px;
width: 2px;
background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
@ -511,11 +497,15 @@
background-position: 0, 1px, 2px;
}
#toolbox-buttons:empty + #toolbox-controls-separator,
#toolbox-controls-separator[invisible] {
#toolbox-buttons:empty + .devtools-separator,
.devtools-separator[invisible] {
visibility: hidden;
}
#toolbox-controls-separator {
margin: 0;
}
/* Command buttons */
.command-button {

4
browser/themes/shared/devtools/webaudioeditor.inc.css
View File

@ -34,10 +34,6 @@
-moz-margin-end: 6px;
}
#requests-menu-reload-notice-button {
min-height: 2em;
}
/* Context Graph */
svg {
overflow: hidden;

10
browser/themes/shared/devtools/webconsole.inc.css
View File

@ -182,10 +182,6 @@ a {
-moz-user-focus: normal;
}
.webconsole-filter-button[checked] {
color: white !important;
}
.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
content: "";
display: inline-block;
@ -535,7 +531,7 @@ a {
.message > .timestamp {
display: none;
}
.toolbarbutton-text {
.hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
display: none;
}
.hud-console-filter-toolbar .webconsole-filter-button {
@ -545,8 +541,8 @@ a {
min-width: 25px;
}
.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
width: 16px;
height: 16px;
width: 12px;
height: 12px;
margin-left: 1px;
}
.toolbarbutton-menubutton-dropmarker {

19
browser/themes/shared/devtools/widgets.inc.css
View File

@ -61,13 +61,8 @@
.breadcrumbs-widget-container {
-moz-margin-end: 3px;
max-height: 25px; /* Set max-height for proper sizing on linux */
height: 25px; /* Set height to prevent starting small waiting for content */
/* A fake 1px-shadow is included in the border-images of the
breadcrumbs-widget-items, to match toolbar-buttons style.
This negative margin compensates the extra row of pixels created
by the shadow.*/
margin-bottom: -1px;
max-height: 24px; /* Set max-height for proper sizing on linux */
height: 24px; /* Set height to prevent starting small waiting for content */
}
.scrollbutton-up,
@ -152,7 +147,7 @@
#breadcrumb-separator-after,
#breadcrumb-separator-normal {
width: 12px;
height: 25px;
height: 24px;
overflow: hidden;
}
@ -191,7 +186,7 @@
content: "";
display: block;
width: 25px;
height: 25px;
height: 24px;
transform: translateX(-18px) rotate(45deg);
-moz-box-sizing: border-box;
}
@ -199,7 +194,7 @@
.breadcrumbs-widget-item {
background-color: transparent;
-moz-appearance: none;
min-height: 25px;
min-height: 24px;
min-width: 65px;
margin: 0;
padding: 0 8px 0 20px;
@ -887,10 +882,6 @@
/* Variables and properties searching */
.variables-view-searchinput {
min-height: 24px;
}
.variable-or-property[unmatched] {
border: none;
margin: 0;