From 445863a284a9920d9f9633ca01b87ca65609a94c Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 30 Dec 2012 21:26:14 +0100 Subject: [PATCH] make new dev toolbox in FF 20+ look good as well --- LCARStrek/browser/browser.css | 4 + .../devtools/command-responsivemode.png | Bin 0 -> 209 bytes .../browser/devtools/command-scratchpad.png | Bin 0 -> 230 bytes LCARStrek/browser/devtools/command-tilt.png | Bin 0 -> 234 bytes LCARStrek/browser/devtools/common.css | 9 + LCARStrek/browser/devtools/dock-bottom.png | Bin 0 -> 164 bytes LCARStrek/browser/devtools/dock-side.png | Bin 0 -> 162 bytes LCARStrek/browser/devtools/dock-window.png | Bin 0 -> 176 bytes LCARStrek/browser/devtools/inspector.css | 232 ++++++++++++++++++ LCARStrek/browser/devtools/styleeditor.css | 6 + LCARStrek/browser/devtools/toolbox.css | 95 +++++++ 11 files changed, 346 insertions(+) create mode 100644 LCARStrek/browser/devtools/command-responsivemode.png create mode 100644 LCARStrek/browser/devtools/command-scratchpad.png create mode 100644 LCARStrek/browser/devtools/command-tilt.png create mode 100644 LCARStrek/browser/devtools/dock-bottom.png create mode 100644 LCARStrek/browser/devtools/dock-side.png create mode 100644 LCARStrek/browser/devtools/dock-window.png create mode 100644 LCARStrek/browser/devtools/inspector.css create mode 100644 LCARStrek/browser/devtools/toolbox.css diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 07e118c7..f583841f 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -3144,6 +3144,10 @@ html|*#gcli-output-frame { display: none; } +#developer-toolbar-toolbox-button { + -moz-image-region: rect(64px, 16px, 80px, 0); +} + /* Error counter */ #developer-toolbar-webconsole[error-count]:before { diff --git a/LCARStrek/browser/devtools/command-responsivemode.png b/LCARStrek/browser/devtools/command-responsivemode.png new file mode 100644 index 0000000000000000000000000000000000000000..39b1ecd2d8a90657240f3bec7d00dc058d3ddbea GIT binary patch literal 209 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et#0(_4@}`~wQk(%kA+8Jz=|JZH^9=SKDaU~< z#*!evUYh7ML)50LT#kH}&M25w;xW@MN(M*=9wUgGKN%6^AOT!=wn zG4te=Kp{s@7sn8e>&XcXjB7(zhjp~IwJAtQ@$g6~@$e||NXha_De3Vkc_{HZ2(pU^ twn*_U;Nb39$e7Zhu)5LE;B6Bl!xRaz(#6L%SOE=V@O1TaS?83{1OQ?sFD(E7 literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/devtools/command-scratchpad.png b/LCARStrek/browser/devtools/command-scratchpad.png new file mode 100644 index 0000000000000000000000000000000000000000..1fa76f57ac678d273a44aa95fc8b7bd374d95521 GIT binary patch literal 230 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et#0(_4@}`~wQk(%kA+8Jz=|JZH^9=SKDaU~< z#*!evUYh7ML)50LT#kH}&M25w;xW@MN(M*=9wUgGKN%6^AOT+rIc zV|ud=P$^7av=L^j|JS!#~11GPICwsWLp=yI&4E* zTbn_F!J4RphZs^0xbBdUu!xY9h?wBIC2WIHN1MXyB&JtMF4tI-4=^y~c*`8vzk2ps PpbZS3u6{1-oD!M<5z;-T literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/devtools/command-tilt.png b/LCARStrek/browser/devtools/command-tilt.png new file mode 100644 index 0000000000000000000000000000000000000000..18540c4830241859689bf012168ee533720bc24d GIT binary patch literal 234 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et#0(_4@}`~wQk(%kA+8Jz=|JZH^9=SKDaU~< z#*!evUYh7ML)50LT#kH}&M25w;xW@MN(M*=9wUgGKN%6^AOT!?`w zVArFEK%pp47sn8e>!rOLc@G$Hu*gq2#C(9SLsP@3X)k}O+eVwz4I-|YpRWED{eM8( zuVK*v9)X)plNW`QuGahT#Jkz=$ChQWd_PVtQ#M<`V4uLs6lZGjt=-?@_xCR+c~6!I VZt(iQ-VkUDgQu&X%Q~loCIE=CNKpU) literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/devtools/common.css b/LCARStrek/browser/devtools/common.css index a65d1660..5c94eaa4 100644 --- a/LCARStrek/browser/devtools/common.css +++ b/LCARStrek/browser/devtools/common.css @@ -149,3 +149,12 @@ devtools-menulist:-moz-focusring, width: 3px; position: relative; } + +#profiler-chrome { + /* HACK for profiler in the dev toolbox in FF 20+. */ + margin: -3px; +} + +#profiler-chrome > box > box > .devtools-toolbar { + border-bottom: none; +} \ No newline at end of file diff --git a/LCARStrek/browser/devtools/dock-bottom.png b/LCARStrek/browser/devtools/dock-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..13258c338315ef43f0781f0823698a1ef6a63cca GIT binary patch literal 164 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;TYyi9E0F$wo*{g$+hQP#u_VYZ zn8D%MjWiG^$=lt9p@UV{1IXbl@Q5sCVBi)4Va7{$>;3=**-JcqUD@yOhzlAjtv_FV z2q+}(>Eal|aXmSqf$_J!LdpSVR{=elgA5Gkzi|frskS%^RKnot>gTe~DWM4f%snUv literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/devtools/dock-side.png b/LCARStrek/browser/devtools/dock-side.png new file mode 100644 index 0000000000000000000000000000000000000000..ded21a7f9829c55a8fc349e4915c7f626097bcac GIT binary patch literal 162 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;TYyi9E0F$wo*{g$+hQP#u_VYZ zn8D%MjWiG^$=lt9p@UV{1IXbl@Q5sCVBi)4Va7{$>;3=**-JcqUD@yOhzlB;>d5?K w1qz9Jx;Tb#Tu)ADVEk>bkkZho@W_CHLE4e~>!}akAwUHTp00i_>zopr06a-0(EtDd literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/devtools/dock-window.png b/LCARStrek/browser/devtools/dock-window.png new file mode 100644 index 0000000000000000000000000000000000000000..bac6c6c2a94d055262d5f28fd273c3c4ade16206 GIT binary patch literal 176 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;TYyi9E0F$wo*{g$+hQP#u_VYZ zn8D%MjWiG^$=lt9p@UV{1IXbl@Q5sCVBi)4Va7{$>;3=**-JcqUD@yOhzlC2+lk>a(5;7tVEB-Mu^DrgTe~DWM4fhrucd literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/devtools/inspector.css b/LCARStrek/browser/devtools/inspector.css new file mode 100644 index 00000000..f05bf34d --- /dev/null +++ b/LCARStrek/browser/devtools/inspector.css @@ -0,0 +1,232 @@ +window { + padding: 0; +} + +#inspector-toolbar { + border-top: none; +} + +.devtools-side-splitter { + border: none; +} + +/* +#inspector-inspect-toolbutton { + list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); + -moz-image-region: rect(0px 16px 16px 0px); +} + +#inspector-inspect-toolbutton[checked=true] { + -moz-image-region: rect(0px 32px 16px 16px); +} + +/* Highlighter toolbar - breadcrumbs * + +#inspector-breadcrumbs { + -moz-margin-end: 3px; + /* A fake 1px-shadow is included in the border-images of the + inspector-breadcrumbs-buttons, to match toolbar-buttons style. + This negative margin compensate the extra row of pixels created + by the shadow.* + margin: -1px 0; +} + +#inspector-breadcrumbs > .scrollbutton-up, +#inspector-breadcrumbs > .scrollbutton-down { + -moz-appearance: none; + border: 1px solid hsla(210,8%,5%,.45); + background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box; + 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); + margin: 1px 0 1px; +} + +#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover, +#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover { + border-color: hsla(210,8%,5%,.6); + background: -moz-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); +} + +#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon, +#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon { + -moz-appearance: none; + list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png"); + -moz-image-region: rect(0px 7px 16px 0px); + margin: 0 5px; +} + +#inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon, +#inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon { + opacity: 0.5; +} + +#inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, +#inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { + -moz-image-region: rect(0px 14px 16px 7px); +} + +#inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), +#inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +.inspector-breadcrumbs-button { + -moz-appearance: none; + background-color: transparent; + border-style: solid; + border-width: 2px 13px; + outline: none; + color: hsl(210,30%,85%); + width: 85px; /* Can't use max-width. See bug 723132 * + /* The content of the button can be larger than the button * + overflow: hidden; + min-height: 25px; + margin: 0 -11px 0 0; + padding: 0 9px; +} + +.inspector-breadcrumbs-button:-moz-focusring > .button-box { + border-width: 0; +} + +.inspector-breadcrumbs-button:-moz-focusring > label { + border-bottom: 1px dotted hsla(210,30%,85%,0.4); +} + +.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag { + color: hsl(200,100%,60%); +} + +.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id { + color: hsl(200,100%,70%); +} + +.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes { + color: hsl(20, 100%, 70%); +} + +.inspector-breadcrumbs-id, +.inspector-breadcrumbs-classes { + color: #8d99a6; +} + +.inspector-breadcrumbs-pseudo-classes { + color: hsl(20, 100%, 85%); +} + +/* Highlighter toolbar - breadcrumbs - LTR * + +.inspector-breadcrumbs-button { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:not([checked]):hover:active { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button[checked] { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button[checked]:hover:active { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type[checked] { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type[checked]:hover:active { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:last-of-type { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch; +} + +#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type { + border-left-width: 0; +} + +#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type { + border-right-width: 0; +} + +.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:last-of-type[checked] { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:last-of-type[checked]:hover:active { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch; +} + +/* Highlighter toolbar - breadcrumbs - RTL * + +.inspector-breadcrumbs-button:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch; +} + +#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type { + border-right-width: 0; +} + +#inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) { + border-left-width: 0; +} + +.inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch; +} + +.inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) { + -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch; +} +*/ \ No newline at end of file diff --git a/LCARStrek/browser/devtools/styleeditor.css b/LCARStrek/browser/devtools/styleeditor.css index 6d0c2e1d..b3cc37a4 100644 --- a/LCARStrek/browser/devtools/styleeditor.css +++ b/LCARStrek/browser/devtools/styleeditor.css @@ -3,6 +3,12 @@ * 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/. */ +window:not([windowtype]) { + /* This does not apply to the standalone window in FF 19 and lower, + * only to the dev toolbox in FF 20+. */ + padding: 0; +} + #style-editor-chrome { background-color: #000000; } diff --git a/LCARStrek/browser/devtools/toolbox.css b/LCARStrek/browser/devtools/toolbox.css new file mode 100644 index 00000000..577e64fd --- /dev/null +++ b/LCARStrek/browser/devtools/toolbox.css @@ -0,0 +1,95 @@ +/* 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/. */ + +window { + padding: 0; +} + +#toolbox-tabs { + margin: 0; +} + +#toolbox-dock-bottom { + list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); +} + +#toolbox-dock-side { + list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); +} + +#toolbox-dock-window { + list-style-image: url("chrome://browser/skin/devtools/dock-window.png"); +} + +#command-button-responsive { + list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +#command-button-responsive:hover, +#command-button-responsive:hover:active, +#command-button-responsive[checked=true] { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +#command-button-tilt { + list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +#command-button-tilt:hover, +#command-button-tilt:hover:active, +#command-button-tilt[checked=true] { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +#command-button-scratchpad { + list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +#command-button-scratchpad:hover, +#command-button-scratchpad:hover:active { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + + +/* Tabs */ + +.devtools-tabbar { +} + +#toolbox-tabs { + background-color: #000000; + color: #FFCF00; +} + +.devtools-tab { + min-width: 78px; + min-height: 22px; + border-radius: 3px 3px 0 0; + margin: 0; + -moz-margin-end: 3px; + -moz-padding-start: 5px; +} + +.devtools-tab[selected=true] { + background-color: #008484; + color: #000000; +} + +.devtools-tab:hover, +.devtools-tab:hover:active { + background-color: #FFCF00; + color: #000000; +} + +.devtools-tab:hover > .radio-label-center-box > .radio-label-box, +.devtools-tab:hover:active > .radio-label-center-box > .radio-label-box { + color: #000000; +} + +.devtools-tab > .radio-label-box { + -moz-margin-start: 0px +} -- 2.43.0