Update *.css

Update developer tools style sheets for the 'Firebug' theme introduced with Firefox 48. Make other corrections.
3marcusw · May 19, 2016 · 3adfbf7 · 3adfbf7
1 parent bb7874c
commit 3adfbf7
Show file tree

Hide file tree

Showing 18 changed files with 1,070 additions and 183 deletions.
diff --git a/whitefox/browser/devtools/animationinspector.css b/whitefox/browser/devtools/animationinspector.css
@@ -12,6 +12,10 @@
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
 }
 
+.theme-firebug {
+  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
+}
+
 :root {
   /* How high should toolbars be */
   --toolbar-height: 20px;
@@ -89,6 +93,19 @@ body {
   display: flex;
 }
 
+.theme-firebug .theme-toolbar{
+  height: 29px !important; /* To override 28px setting in firebug-theme.css --johnGraciliano */
+  min-height: 29px !important; /* To override 28px setting in firebug-theme.css --johnGraciliano */
+}
+
+.theme-firebug #timeline-toolbar.theme-toolbar {
+  padding: 0 4px;        /* To maintain uniform appearance. --johnGraciliano */
+}
+
+.theme-firebug #timeline-rate{
+  box-sizing: border-box;        /* To maintain uniform appearance. --johnGraciliano */
+}
+
 #toolbar .label, /* Firefox 42 & earlier */
 #global-toolbar .label,
 #timeline-toolbar .label {
@@ -166,39 +183,57 @@ body {
 }
 
 #element-picker::before {
-  background-image: url("./images/command-pick.png");
+  background-image: url(images/command-pick.png);
 }
 
 .pause-button::before {
-  background-image: url("images/debugger-pause.png");
+  background-image: url(images/debugger-pause.png);
 }
 
 #rewind-timeline::before {
-  background-image: url("images/rewind.png");
+  background-image: url(images/rewind.png);
 }
 
 .pause-button.paused::before {
-  background-image: url("images/debugger-play.png");
+  background-image: url(images/debugger-play.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #element-picker::before {
-    background-image: url("./images/command-pick@2x.png");
+    background-image: url(images/command-pick@2x.png);
   }
 
   .pause-button::before {
-    background-image: url("images/debugger-pause@2x.png");
+    background-image: url(images/debugger-pause@2x.png);
   }
 
   .pause-button.paused::before {
-    background-image: url("images/debugger-play@2x.png");
+    background-image: url(images/debugger-play@2x.png);
   }
 
   #rewind-timeline::before {
-    background-image: url("images/rewind@2x.png");
+    background-image: url(images/rewind@2x.png);
   }
 }
 
+.theme-firebug #element-picker::before {
+  background-image: url(images/firebug/command-pick.svg);
+}
+
+.theme-firebug #toggle-all::before,
+.theme-firebug .pause-button::before {
+  background-image: url(images/firebug/pause.svg);
+}
+
+.theme-firebug #rewind-timeline::before {
+  background-image: url(images/firebug/rewind.svg);
+}
+
+.theme-firebug #toggle-all.paused::before,
+.theme-firebug .pause-button.paused::before {
+  background-image: url(images/firebug/play.svg);
+}
+
 #timeline-rate select.devtools-button {
   -moz-appearance: none;
   text-align: center;
@@ -210,7 +245,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url("./images/dropmarker.svg");
+  background-image: url(images/dropmarker.svg);
   background-repeat: no-repeat;
   background-position: calc(100% - 4px) center;
   padding-right: 1em;

diff --git a/whitefox/browser/devtools/common.css b/whitefox/browser/devtools/common.css
@@ -27,7 +27,8 @@
   }
 }
 
-:root[platform="linux"] {
+:root[platform="linux"],
+:root.theme-firebug {
   --monospace-font-family: monospace;
 }
 @media not all and (-moz-os-version) { /* For FF < 45 where the attribute platform is absent, this matches non-Windows OS */
@@ -38,6 +39,10 @@
   }
 }
 
+:root.theme-firebug {
+  --proportional-font-family: Lucida Grande, Tahoma, sans-serif;
+}
+
 .devtools-monospace {
   font-family: var(--monospace-font-family);
 }
@@ -63,7 +68,6 @@
 }
 
 /* Autocomplete Popup */
-/* Dark and light theme */
 
 .devtools-autocomplete-popup {
   -moz-appearance: none !important;
@@ -146,16 +150,31 @@
   box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
 }
 
+.theme-firebug .devtools-autocomplete-popup {
+  border-color: var(--theme-splitter-color);
+  border-radius: 5px;
+  font-size: var(--theme-autompletion-font-size);
+}
+
+.devtools-autocomplete-popup.firebug-theme {
+  background: var(--theme-body-background);
+}
+
+.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected],
+.devtools-autocomplete-listbox.firebug-theme > richlistitem:hover,
 .devtools-autocomplete-listbox.light-theme > richlistitem[selected],
 .devtools-autocomplete-listbox.light-theme > richlistitem:hover {
   background-color: rgba(128,128,128,0.3);
 }
 
+.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected] > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.firebug-theme > richlistitem[selected] > .initial-value,
 .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
 .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
   color: #222;
 }
 
+.devtools-autocomplete-listbox.firebug-theme > richlistitem > label,
 .devtools-autocomplete-listbox.light-theme > richlistitem > label {
   color: #666;
 }

diff --git a/whitefox/browser/devtools/computedview.css b/whitefox/browser/devtools/computedview.css
@@ -38,6 +38,10 @@ body {
   box-sizing: content-box;
 }
 
+.theme-firebug #sidebar-panel-computedview > .devtools-toolbar {
+  height: 23px !important; /* To override 28px setting in firebug-theme.css --johnGraciliano */
+}
+
 #browser-style-checkbox {
   /* Bug 1200073 - extra space before the browser styles checkbox so
      they aren't squished together in a small window. */
@@ -147,6 +151,15 @@ body > #propertyContainer > .property-view > * {
   padding-left: 17px;
 }
 
+.theme-firebug .property-view,
+.theme-firebug .property-content {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug .property-view {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 /* From skin */
 .expander {
   visibility: hidden;

diff --git a/whitefox/browser/devtools/debugger.css b/whitefox/browser/devtools/debugger.css
@@ -69,6 +69,24 @@
   margin: 2px;
 }
 
+/* Firebug theme uses breakpoint icon istead of a checkbox */
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
+  -moz-appearance: none;
+  border: none;
+  background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
+}
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) > .checkbox-check,
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) ~ * {
+  opacity: 0.5;
+}
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox {
+  padding-inline-end: 0;
+  margin-inline-end: 0;
+}
+
 .dbg-breakpoint-condition-thrown-message {
   display: none;
   color: var(--theme-highlight-red);
@@ -86,12 +104,12 @@
   min-width: 32px;
 }
 
-#sources-toolbar .devtools-toolbarbutton:not([label]) {
+:root:not(.theme-firebug) #sources-toolbar .devtools-toolbarbutton:not([label]) {
   -moz-image-region: rect(0,16px,16px,0);
 }
 
 @media (min-resolution: 1.1dppx) {
-  #sources-toolbar .devtools-toolbarbutton:not([label]) {
+  :root:not(.theme-firebug) #sources-toolbar .devtools-toolbarbutton:not([label]) {
     -moz-image-region: rect(0,32px,32px,0);
   }
 }
@@ -106,6 +124,10 @@
   }
 }
 
+.theme-firebug #black-box {
+  list-style-image: url(images/firebug/debugger-blackbox.svg);
+}
+
 #pretty-print {
   list-style-image: url(images/debugger-prettyprint.png);
 }
@@ -116,11 +138,20 @@
   }
 }
 
+.theme-firebug #pretty-print {
+  list-style-image: url(images/firebug/debugger-prettyprint.svg);
+}
+
 #toggle-breakpoints {
   list-style-image: url(images/debugger-toggleBreakpoints.svg);
   -moz-image-region: rect(0,32px,16px,16px) !important;
 }
 
+.theme-firebug #toggle-breakpoints {
+  list-style-image: url(images/firebug/debugger-toggleBreakpoints.svg);
+  -moz-image-region: unset !important;
+}
+
 #toggle-breakpoints[checked] {
   -moz-image-region: rect(0,16px,16px,0) !important;
 }
@@ -577,6 +608,14 @@
   }
 }
 
+.theme-firebug #resume {
+  list-style-image: url(images/firebug/pause.svg);
+}
+
+.theme-firebug #resume[checked] {
+  list-style-image: url(images/firebug/play.svg);
+}
+
 #resume[break-on-next] {
   background: var(--theme-highlight-lightorange);
 }
@@ -611,6 +650,18 @@
   }
 }
 
+.theme-firebug #step-over {
+  list-style-image: url(images/firebug/debugger-step-over.svg);
+}
+
+.theme-firebug #step-in {
+  list-style-image: url(images/firebug/debugger-step-in.svg);
+}
+
+.theme-firebug #step-out {
+  list-style-image: url(images/firebug/debugger-step-out.svg);
+}
+
 #instruments-pane-toggle {
   list-style-image: url(images/pane-toggle.svg#collapse);
 }
@@ -619,6 +670,14 @@
   list-style-image: url(images/pane-toggle.svg#expand);
 }
 
+.theme-firebug #instruments-pane-toggle {
+  list-style-image: url(images/firebug/pane-collapse.svg);
+}
+
+.theme-firebug #instruments-pane-toggle[pane-collapsed] {
+  list-style-image: url(images/firebug/pane-expand.svg);
+}
+
 /* Horizontal vs. vertical layout */
 
 #vertical-layout-panes-container {
@@ -648,3 +707,53 @@
 #body[layout=vertical] .side-menu-widget-item {
   -moz-margin-end: 0;
 }
+
+/* Firebug theme customization of source group title */
+.theme-firebug #sources-pane .side-menu-widget-group-title {
+  border-bottom: none;
+  padding: 2px 4px;
+  background: var(--theme-header-background);
+  font-weight: bold;
+}
+
+/* Sections titles (toolbars) in Variables panel they have different height */
+.theme-firebug #variables-tabpanel .title.devtools-toolbar {
+  display: -moz-box;
+  height: 20px !important;
+}
+
+/* Firebug theme support for the Callstack Panel */
+
+.theme-firebug #callstack-list {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #callstack-list .dbg-classic-stackframe-title {
+  color: var(--theme-content-color2);
+  font-weight: normal;
+  font-family: monospace;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-url,
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-sep,
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-line {
+  color: blue;
+  font-weight: bold;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item {
+  margin: 0 4px;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item.selected {
+  color: var(--theme-selection-color);
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item:first-child {
+  border-top: none;
+}
diff --git a/whitefox/browser/devtools/font-inspector.css b/whitefox/browser/devtools/font-inspector.css
@@ -38,6 +38,11 @@ body {
   display: flex;
 }
 
+.theme-firebug #sidebar-panel-fontinspector > .devtools-toolbar {
+  height: 23px !important; /* To override 28px setting in firebug-theme.css --johnGraciliano */
+  box-sizing: content-box;
+}
+
 #font-container {
   overflow: auto;
   flex: auto;