make new dev toolbox in FF 20+ look good as well

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 07e118c76a84627c3231f8a07d02c727ca2fc689..f583841fea1ecd6004748bc6c1ed36fdcc5032dd 100644 (file)
--- 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 (file)
index 0000000..39b1ecd
Binary files /dev/null and b/LCARStrek/browser/devtools/command-responsivemode.png differ

diff --git a/LCARStrek/browser/devtools/command-scratchpad.png b/LCARStrek/browser/devtools/command-scratchpad.png
new file mode 100644 (file)
index 0000000..1fa76f5
Binary files /dev/null and b/LCARStrek/browser/devtools/command-scratchpad.png differ

diff --git a/LCARStrek/browser/devtools/command-tilt.png b/LCARStrek/browser/devtools/command-tilt.png
new file mode 100644 (file)
index 0000000..18540c4
Binary files /dev/null and b/LCARStrek/browser/devtools/command-tilt.png differ

diff --git a/LCARStrek/browser/devtools/common.css b/LCARStrek/browser/devtools/common.css
index a65d166004158755e7f13f4b48a59fb040691082..5c94eaa4ef6c91fefcc8e0e6b0109a89c9d8fe36 100644 (file)
--- 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 (file)
index 0000000..13258c3
Binary files /dev/null and b/LCARStrek/browser/devtools/dock-bottom.png differ

diff --git a/LCARStrek/browser/devtools/dock-side.png b/LCARStrek/browser/devtools/dock-side.png
new file mode 100644 (file)
index 0000000..ded21a7
Binary files /dev/null and b/LCARStrek/browser/devtools/dock-side.png differ

diff --git a/LCARStrek/browser/devtools/dock-window.png b/LCARStrek/browser/devtools/dock-window.png
new file mode 100644 (file)
index 0000000..bac6c6c
Binary files /dev/null and b/LCARStrek/browser/devtools/dock-window.png differ

diff --git a/LCARStrek/browser/devtools/inspector.css b/LCARStrek/browser/devtools/inspector.css
new file mode 100644 (file)
index 0000000..f05bf34
--- /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 6d0c2e1dbdcc68411db8db94726085dc1a7782a6..b3cc37a408af48c4deb08526141c53766501d098 100644 (file)
--- 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 (file)
index 0000000..577e64f
--- /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
+}