From 4931dbf456a64c61875220987fca84c6c08819df Mon Sep 17 00:00:00 2001
From: Horst3180
Date: Wed, 4 Nov 2015 14:53:46 +0100
Subject: update to 43.0b1

---
 .../chrome/browser/devtools/animationinspector.css | 196 ++++++++++++++-------
 .../chrome/browser/devtools/canvasdebugger.css     |   4 +-
 .../chrome/browser/devtools/computedview.css       |   2 +-
 .../chrome/browser/devtools/dark-theme.css         |  11 +-
 .../chrome/browser/devtools/debugger.css           |  27 +--
 .../browser/devtools/editor-breakpoint@2x.png      | Bin 0 -> 773 bytes
 .../browser/devtools/floating-scrollbars-light.css |   2 +-
 .../browser/devtools/floating-scrollbars.css       |   1 -
 .../chrome/browser/devtools/inspector.css          |   2 +-
 .../chrome/browser/devtools/light-theme.css        |  11 +-
 .../chrome/browser/devtools/markup-view.css        |  12 ++
 .../chrome/browser/devtools/memory.css             |  81 +++++++++
 .../chrome/browser/devtools/netmonitor.css         |  28 +--
 .../chrome/browser/devtools/performance.css        |  68 +++++--
 .../chrome/browser/devtools/ruleview.css           |  23 ++-
 .../chrome/browser/devtools/shadereditor.css       |   2 +-
 .../chrome/browser/devtools/styleeditor.css        |   2 +-
 .../chrome/browser/devtools/webaudioeditor.css     |   2 +-
 .../chrome/browser/devtools/webconsole.css         |  29 +--
 .../browser/devtools/webconsole_networkpanel.css   |  99 -----------
 .../chrome/browser/devtools/widgets.css            |  23 +--
 21 files changed, 375 insertions(+), 250 deletions(-)
 create mode 100644 arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png
 create mode 100644 arc-firefox-theme/chrome/browser/devtools/memory.css
 delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css

(limited to 'arc-firefox-theme/chrome/browser/devtools')

diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
index 40efab7..dfd1b3d 100644
--- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
+++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
@@ -12,6 +12,15 @@
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
 }
 
+:root {
+  /* How high should toolbars be */
+  --toolbar-height: 20px;
+  /* How wide should the sidebar be */
+  --timeline-sidebar-width: 150px;
+  /* How high should animations displayed in the timeline be */
+  --timeline-animation-height: 20px;
+}
+
 html {
   height: 100%;
 }
@@ -26,33 +35,47 @@ body {
   color: var(--theme-content-color3);
 }
 
-/* The top toolbar, containing the toggle-all button */
+/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
+   containing playback control buttons, shown only when there are animations
+   displayed in the timeline */
 
-#toolbar {
+#global-toolbar,
+#timeline-toolbar {
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  height: 20px;
+  height: var(--toolbar-height);
 }
 
-#toolbar .label {
-  padding: 1px 4px;
+#timeline-toolbar {
+  display: none;
 }
 
-#toggle-all {
-  border-width: 0 0 0 1px;
-  min-height: 20px;
+[timeline] #global-toolbar {
+  display: none;
+}
+
+[timeline] #timeline-toolbar {
+  display: flex;
+}
+
+#global-toolbar .label {
+  padding: 1px 4px;
 }
 
 /* The main animations container */
 
 #players {
-  height: calc(100% - 20px);
+  height: calc(100% - var(--toolbar-height));
   overflow: auto;
 }
 
+[empty] #players {
+  display: none;
+}
+
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
@@ -65,16 +88,23 @@ body {
   display: none;
 }
 
+[empty] #error-message {
+  display: block;
+}
 
-/* Element picker and toggle-all buttons */
+/* Element picker, toggle-all buttons, timeline pause button, ... */
 
-#element-picker,
-#toggle-all {
+#global-toolbar .devtools-button,
+#timeline-toolbar .devtools-button {
+  border-width: 0 0 0 1px;
+  min-height: var(--toolbar-height);
+}
+
+.devtools-button {
   position: relative;
 }
 
-#element-picker::before,
-#toggle-all::before {
+.devtools-button::before {
   content: "";
   display: block;
   width: 16px;
@@ -83,10 +113,13 @@ body {
   left: 50%;
   top: 50%;
   margin: -8px 0 0 -8px;
+}
+
+#element-picker::before {
   background-image: url("chrome://browser/skin/devtools/command-pick.png");
 }
 
-#toggle-all::before {
+.pause-button::before {
   background-image: url("debugger-pause.png");
 }
 
@@ -95,21 +128,21 @@ body {
   filter: none; /* Icon is blue when checked, don't invert for light theme */
 }
 
-#toggle-all.paused::before {
+.pause-button.paused::before {
   background-image: url("debugger-play.png");
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #element-picker::before {
     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
     background-size: 64px;
   }
 
-  #toggle-all::before {
+  .pause-button::before {
     background-image: url("debugger-pause@2x.png");
   }
 
-  #toggle-all.paused::before {
+  .pause-button.paused::before {
     background-image: url("debugger-play@2x.png");
   }
 }
@@ -119,6 +152,7 @@ body {
 .animation-timeline {
   height: 100%;
   overflow: hidden;
+  position: relative;
   /* The timeline gets its background-image from a canvas element created in
      /browser/devtools/animationinspector/utils.js drawGraphElementBackground
      thanks to document.mozSetImageElement("time-graduations", canvas)
@@ -127,17 +161,42 @@ body {
   background-repeat: repeat-y;
   /* The animations are drawn 150px from the left edge so that animated nodes
      can be displayed in a sidebar */
-  background-position: 150px 0;
+  background-position: var(--timeline-sidebar-width) 0;
   display: flex;
   flex-direction: column;
 }
 
+.animation-timeline .scrubber {
+  position: absolute;
+  height: 100%;
+  width: var(--timeline-sidebar-width);
+  border-right: 1px solid red;
+  box-sizing: border-box;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.animation-timeline .scrubber::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 1px;
+  right: -6px;
+  border-top: 5px solid red;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
 .animation-timeline .time-header {
-  margin-left: 150px;
-  height: 20px;
+  margin-left: var(--timeline-sidebar-width);
+  min-height: var(--toolbar-height);
   overflow: hidden;
   position: relative;
-  border-bottom: 1px solid var(--theme-splitter-color);
+  /* This is the same color as the time graduations in
+     browser/devtools/animationinspector/utils.js */
+  border-bottom: 1px solid rgba(128, 136, 144, .5);
+  cursor: col-resize;
+  -moz-user-select: none;
 }
 
 .animation-timeline .time-header .time-tick {
@@ -158,7 +217,7 @@ body {
 
 .animation-timeline .animation {
   margin: 4px 0;
-  height: 20px;
+  height: var(--timeline-animation-height);
   position: relative;
 }
 
@@ -167,7 +226,7 @@ body {
 }
 
 .animation-timeline .animation .target {
-  width: 150px;
+  width: var(--timeline-sidebar-width);
   overflow: hidden;
   height: 100%;
 }
@@ -179,7 +238,7 @@ body {
 .animation-timeline .animation .time-block {
   position: absolute;
   top: 0;
-  left: 150px;
+  left: var(--timeline-sidebar-width);
   right: 0;
   height: 100%;
 }
@@ -189,19 +248,37 @@ body {
 .animation-timeline .animation .iterations {
   position: relative;
   height: 100%;
-  border: 1px solid var(--theme-highlight-lightorange);
   box-sizing: border-box;
-  background: var(--theme-contrast-background);
-  /* Iterations are displayed with a repeating linear-gradient which size is
-     dynamically changed from JS */
+
+  --timelime-border-color: var(--theme-body-color);
+  --timeline-background-color: var(--theme-splitter-color);
+
+  /* Iterations of the animation are displayed with a repeating linear-gradient
+     which size is dynamically changed from JS. The gradient only draws 1px
+     borders between each iteration. These borders must have the same color as
+     the border of this element */
   background-image:
     linear-gradient(to right,
-                    var(--theme-highlight-lightorange) 0,
-                    var(--theme-highlight-lightorange) 1px,
+                    var(--timelime-border-color) 0,
+                    var(--timelime-border-color) 1px,
                     transparent 1px,
                     transparent 2px);
   background-repeat: repeat-x;
   background-position: -1px 0;
+  border: 1px solid var(--timelime-border-color);
+
+  /* The background color is set independently */
+  background-color: var(--timeline-background-color);
+}
+
+.animation-timeline .animation .cssanimation {
+  --timelime-border-color: var(--theme-highlight-lightorange);
+  --timeline-background-color: var(--theme-contrast-background);
+}
+
+.animation-timeline .animation .csstransition {
+  --timelime-border-color: var(--theme-highlight-bluegrey);
+  --timeline-background-color: var(--theme-highlight-blue);
 }
 
 .animation-timeline .animation .iterations.infinite {
@@ -226,42 +303,41 @@ body {
   top: unset;
 }
 
-.animation-timeline .animation .animation-title {
-  height: 1.5em;
+.animation-timeline .animation .name {
+  color: var(--theme-selection-color);
+  height: 100%;
   width: 100%;
-  box-sizing: border-box;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 150%;
+  padding: 0 2px;
 }
 
 .animation-timeline .animation .delay {
   position: absolute;
   top: 0;
-  height: 100%;
-  background-image: linear-gradient(to bottom,
-                                    transparent,
-                                    transparent 9px,
-                                    var(--theme-highlight-lightorange) 9px,
-                                    var(--theme-highlight-lightorange) 11px,
-                                    transparent 11px,
-                                    transparent);
-}
+  /* Make sure the delay covers up the animation border */
+  transform: translate(-1px, -1px);
+  box-sizing: border-box;
+  height: calc(100% + 2px);
 
-.animation-timeline .animation .delay::before {
-  position: absolute;
-  content: "";
-  left: 0;
-  width: 2px;
-  height: 8px;
-  top: 50%;
-  margin-top: -4px;
-  background: var(--theme-highlight-lightorange);
+  border: 1px solid var(--timelime-border-color);
+  border-width: 1px 0 1px 1px;
+  background-image: repeating-linear-gradient(45deg,
+                                              transparent,
+                                              transparent 1px,
+                                              var(--theme-selection-color) 1px,
+                                              var(--theme-selection-color) 4px);
+  background-color: var(--timelime-border-color);
 }
 
-.animation-timeline .animation .name {
-  position: absolute;
-  z-index: 1;
-  padding: 2px;
-  white-space: nowrap;
+.animation-timeline .animation .delay.negative {
+  /* Negative delays are displayed on top of the animation, so they need a
+     right border. Whereas normal delays are displayed just before the
+     animation, so there's already the animation's left border that serves as
+     a separation. */
+  border-width: 1px;
 }
 
 /* Animation target node gutter, contains a preview of the dom node */
@@ -326,7 +402,7 @@ body {
 /* Timeline wiget */
 
 .timeline {
-  height: 20px;
+  height: var(--timeline-animation-height);
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -362,7 +438,7 @@ body {
   background-image: url(rewind.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .timeline .toggle::before {
     background-image: url(debugger-pause@2x.png);
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css
index a749260..efeac51 100644
--- a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css
+++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css
@@ -138,7 +138,7 @@
   list-style-image: url(debugger-step-out.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #resume {
     list-style-image: url(debugger-play@2x.png);
     -moz-image-region: rect(0px,64px,32px,32px);
@@ -243,7 +243,7 @@
   background-size: 12px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .selected .call-item-gutter {
     background-image: url("editor-debug-location@2x.png");
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css
index f770681..a4eff43 100644
--- a/arc-firefox-theme/chrome/browser/devtools/computedview.css
+++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css
@@ -61,7 +61,7 @@ body {
   background-size: 5px 8px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .property-value, .other-property-value {
     background-image: url(arrow-e@2x.png);
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
index 53a868f..22480b2 100644
--- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
+++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
@@ -38,6 +38,7 @@
   /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
   --theme-graphs-green: #70bf53;
   --theme-graphs-blue: #46afe3;
+  --theme-graphs-bluegrey: #5e88b0;
   --theme-graphs-purple: #df80ff;
   --theme-graphs-yellow: #d99b28;
   --theme-graphs-red: #eb5368;
@@ -334,7 +335,7 @@ div.CodeMirror span.eval-text {
   background-position: -42px 0;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .theme-twisty, .theme-checkbox {
     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
   }
@@ -372,7 +373,7 @@ div.CodeMirror span.eval-text {
   margin-left: -4px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .theme-tooltip-panel .panel-arrow[side="top"],
   .theme-tooltip-panel .panel-arrow[side="bottom"] {
     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
@@ -725,7 +726,7 @@ div.CodeMirror span.eval-text {
   opacity: 0.5;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .devtools-button::before {
     background-size: 32px;
   }
@@ -842,7 +843,7 @@ div.CodeMirror span.eval-text {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .theme-dark .devtools-searchinput {
     background-image: url(magnifying-glass@2x.png);
   }
@@ -1172,7 +1173,7 @@ div.CodeMirror span.eval-text {
   background-image: url("chrome://browser/skin/devtools/command-rulers.png");
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #command-button-paintflashing > image {
     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css
index 97eb3b0..e16cdb8 100644
--- a/arc-firefox-theme/chrome/browser/devtools/debugger.css
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css
@@ -66,7 +66,7 @@
   list-style-image: url(debugger-blackbox.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #black-box {
     list-style-image: url(debugger-blackbox@2x.png);
   }
@@ -76,7 +76,7 @@
   list-style-image: url(debugger-prettyprint.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #pretty-print {
     list-style-image: url(debugger-prettyprint@2x.png);
   }
@@ -86,7 +86,7 @@
   list-style-image: url(debugger-toggleBreakpoints.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #toggle-breakpoints {
     list-style-image: url(debugger-toggleBreakpoints@2x.png);
   }
@@ -104,7 +104,7 @@
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #sources-toolbar .devtools-toolbarbutton:not([label]) {
     -moz-image-region: rect(0px,32px,32px,0px);
   }
@@ -138,7 +138,7 @@
   -moz-margin-end: 5px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #black-boxed-message-button > .button-box > .button-icon {
     background-image: url(debugger-blackbox@2x.png);
   }
@@ -226,7 +226,7 @@
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #trace {
     list-style-image: url(tracer-icon@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
@@ -328,7 +328,7 @@
   margin: 2px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .dbg-expression-arrow {
     background-image: url(commandline-icon@2x.png);
   }
@@ -564,7 +564,7 @@
   list-style-image: url(debugger-play.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #resume {
     list-style-image: url(debugger-pause@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
@@ -581,7 +581,12 @@
 }
 
 #debugger-controls toolbarbutton[disabled] {
-    opacity: .5;
+  opacity: .5;
+  transition: none;
+}
+
+#resume[break-on-next] {
+  background: var(--theme-highlight-lightorange);
 }
 
 #step-over {
@@ -596,7 +601,7 @@
   list-style-image: url(debugger-step-out.png);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #step-over {
     list-style-image: url(debugger-step-over@2x.png);
   }
@@ -626,7 +631,7 @@
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #instruments-pane-toggle {
     list-style-image: url(debugger-collapse@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png
new file mode 100644
index 0000000..7253aee
Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png differ
diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css
index 7e38611..01b622f 100644
--- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css
+++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css
@@ -3,7 +3,7 @@
  * 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/. */
 
-@import url("floating-scrollbars.css");
+@import url("chrome://browser/skin/devtools/floating-scrollbars.css");
 
 scrollbar thumb {
   background-color: rgba(170,170,170,0.2) !important;
diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
index 934a38e..61c66c8 100644
--- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
+++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
@@ -29,7 +29,6 @@ scrollbar thumb {
   background-color: rgba(170,170,170,0.2) !important;
   border-radius: 3px !important;
 }
-
 scrollbar scrollbarbutton, scrollbar gripper {
   display: none;
 }
diff --git a/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css
index cab78e7..a892ec3 100644
--- a/arc-firefox-theme/chrome/browser/devtools/inspector.css
+++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css
@@ -49,7 +49,7 @@
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #inspector-pane-toggle {
     list-style-image: url(debugger-collapse@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css
index 92515ff..276b34a 100644
--- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css
+++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css
@@ -38,6 +38,7 @@
   /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
   --theme-graphs-green: #85d175;
   --theme-graphs-blue: #83b7f6;
+  --theme-graphs-bluegrey: #0072ab;
   --theme-graphs-purple: #b693eb;
   --theme-graphs-yellow: #efc052;
   --theme-graphs-red: #e57180;
@@ -343,7 +344,7 @@ div.CodeMirror span.eval-text {
   background-position: -14px 0;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .theme-twisty, .theme-checkbox {
     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
   }
@@ -381,7 +382,7 @@ div.CodeMirror span.eval-text {
   margin-left: -4px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .theme-tooltip-panel .panel-arrow[side="top"],
   .theme-tooltip-panel .panel-arrow[side="bottom"] {
     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png");
@@ -723,7 +724,7 @@ div.CodeMirror span.eval-text {
   opacity: 0.5;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .devtools-button::before {
     background-size: 32px;
   }
@@ -840,7 +841,7 @@ div.CodeMirror span.eval-text {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .theme-dark .devtools-searchinput {
     background-image: url(magnifying-glass@2x.png);
   }
@@ -1170,7 +1171,7 @@ div.CodeMirror span.eval-text {
   background-image: url("chrome://browser/skin/devtools/command-rulers.png");
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #command-button-paintflashing > image {
     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/markup-view.css b/arc-firefox-theme/chrome/browser/devtools/markup-view.css
index e1912d8..fb3d958 100644
--- a/arc-firefox-theme/chrome/browser/devtools/markup-view.css
+++ b/arc-firefox-theme/chrome/browser/devtools/markup-view.css
@@ -15,6 +15,18 @@
   border: 1px solid #CCC;
 }
 
+/* Draw a circle next to nodes that have a pseudo class lock.
+   Center vertically with the 1.4em line height on .tag-line */
+.child.pseudoclass-locked::before {
+  content: "";
+  background: var(--theme-highlight-lightorange);
+  border-radius: 50%;
+  width: .8em;
+  height: .8em;
+  margin-top: .3em;
+  left: 1px;
+  position: absolute;
+}
 
 /* Selected nodes in the tree should have light selected text.
    theme-selected doesn't work in this case since the text is a
diff --git a/arc-firefox-theme/chrome/browser/devtools/memory.css b/arc-firefox-theme/chrome/browser/devtools/memory.css
new file mode 100644
index 0000000..78f8f1f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/memory.css
@@ -0,0 +1,81 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/* CSS Variables specific to this panel that aren't defined by the themes */
+.theme-dark {
+  --cell-border-color: rgba(255,255,255,0.15);
+  --cell-border-color-light: rgba(255,255,255,0.1);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(29,79,115,0.15);
+  --row-hover-background-color: rgba(29,79,115,0.25);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --cell-border-color-light: rgba(0,0,0,0.1);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
+.heap-view {
+  position: relative;
+}
+
+.heap-view .theme-twisty {
+  text-align: end;
+}
+
+.heap-tree-item {
+  list-style-type: none;
+  /* display: none; */
+}
+
+.heap-tree-item[expanded] {
+  display: block;
+}
+
+.heap-tree-item:nth-child(2n) {
+  background-color: var(--row-alt-background-color);
+}
+
+.heap-tree-item:hover {
+  background-color: var(--row-hover-background-color);
+}
+
+.heap-tree-item:focus {
+  background-color: var(--theme-selection-background);
+}
+
+.heap-tree-item:focus description {
+  color: var(--theme-selection-color) !important;
+}
+
+.heap-tree-item:focus .call-tree-cell {
+  -moz-border-end-color: var(--focus-cell-border-color);
+}
+
+
+.heap-tree-cell[type="bytes"], .heap-tree-cell[type="count"] {
+  position: absolute;
+  text-align: right;
+  width: 40px;
+}
+
+.heap-tree-cell[type="name"] {
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.heap-tree-cell[type="count"] {
+  left: 300px;
+}
+
+.heap-tree-cell[type="bytes"] {
+  left: 250px;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
index 9448a39..d47f112 100644
--- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
+++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
@@ -1,7 +1,3 @@
-/* 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/. */
-
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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
@@ -146,25 +142,27 @@
   width: 16px;
   height: 16px;
   -moz-margin-end: 4px;
+  cursor: pointer;
 }
 
 .security-state-insecure {
-  list-style-image: url(chrome://browser/skin/identity-not-secure.svg);
+  list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
 }
 
 .security-state-secure {
-  cursor: pointer;
   list-style-image: url(chrome://browser/skin/identity-secure.svg);
 }
 
 .security-state-weak {
-  cursor: pointer;
   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
 }
 
 .security-state-broken {
-  cursor: pointer;
-  list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
+  list-style-image: url(chrome://browser/skin/controlcenter/warning-gray.svg);
+}
+
+.security-state-local {
+  list-style-image: url(chrome://browser/skin/identity-not-secure.svg);
 }
 
 .requests-menu-type {
@@ -200,7 +198,8 @@ label.requests-menu-status-code {
 }
 
 box.requests-menu-status:not([code]) {
-  background-color: var(--theme-content-color2);
+  background-color: var(--theme-highlight-red);
+  border-radius: 0; /* squares */
 }
 
 box.requests-menu-status[code="cached"] {
@@ -420,7 +419,7 @@ box.requests-menu-status[code^="5"] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #details-pane-toggle {
     list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
     -moz-image-region: rect(0px,32px,32px,0px);
@@ -547,6 +546,10 @@ box.requests-menu-status[code^="5"] {
   -moz-padding-start: 1em;
 }
 
+.theme-dark #security-error-message {
+  color: var(--theme-selection-color);
+}
+
 #security-tabpanel {
   overflow: auto;
 }
@@ -560,7 +563,7 @@ box.requests-menu-status[code^="5"] {
   height: 12px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .security-warning-icon {
     background-image: url(alerticon-warning@2x.png);
   }
@@ -832,6 +835,7 @@ box.requests-menu-status[code^="5"] {
   }
 }
 
+/* Platform overrides (copied in from the old platform specific files) */
 #headers-summary-resend {
   padding: 4px;
 }
diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css
index 8eafa36..4279a16 100644
--- a/arc-firefox-theme/chrome/browser/devtools/performance.css
+++ b/arc-firefox-theme/chrome/browser/devtools/performance.css
@@ -20,6 +20,16 @@
   --row-hover-background-color: rgba(76,158,217,0.2);
 }
 
+/**
+ * A generic class to hide elements, replacing the `element.hidden` attribute
+ * that we use to hide elements that can later be active
+ */
+.hidden {
+  display: none;
+  width: 0px;
+  height: 0px;
+}
+
 /* Toolbar */
 
 #performance-toolbar-control-other {
@@ -224,8 +234,20 @@
 .call-tree-header[type="count"],
 .call-tree-cell[type="count"],
 .call-tree-header[type="self-count"],
-.call-tree-cell[type="self-count"] {
-  width: 9vw;
+.call-tree-cell[type="self-count"],
+.call-tree-header[type="size"],
+.call-tree-cell[type="size"],
+.call-tree-header[type="self-size"],
+.call-tree-cell[type="self-size"],
+.call-tree-header[type="count-percentage"],
+.call-tree-cell[type="count-percentage"],
+.call-tree-header[type="self-count-percentage"],
+.call-tree-cell[type="self-count-percentage"],
+.call-tree-header[type="size-percentage"],
+.call-tree-cell[type="size-percentage"],
+.call-tree-header[type="self-size-percentage"],
+.call-tree-cell[type="self-size-percentage"] {
+  width: 6vw;
 }
 
 .call-tree-header[type="function"],
@@ -518,22 +540,31 @@
   font-weight: bold;
 }
 
+.marker-details-customcontainer .custom-button {
+  padding: 2px 5px;
+  border-width: 1px;
+}
+
 /**
  * Marker colors
  */
 
-menuitem.marker-color-graphs-purple:before,
-.marker-color-graphs-purple {
-  background-color: var(--theme-graphs-purple);
-}
-menuitem.marker-color-graphs-grey:before,
-.marker-color-graphs-grey{
-  background-color: var(--theme-graphs-grey);
-}
 menuitem.marker-color-graphs-green:before,
 .marker-color-graphs-green {
   background-color: var(--theme-graphs-green);
 }
+menuitem.marker-color-graphs-blue:before,
+.marker-color-graphs-blue {
+  background-color: var(--theme-graphs-blue);
+}
+menuitem.marker-color-graphs-bluegrey:before,
+.marker-color-graphs-bluegrey {
+  background-color: var(--theme-graphs-bluegrey);
+}
+menuitem.marker-color-graphs-purple:before,
+.marker-color-graphs-purple {
+  background-color: var(--theme-graphs-purple);
+}
 menuitem.marker-color-graphs-yellow:before,
 .marker-color-graphs-yellow {
   background-color: var(--theme-graphs-yellow);
@@ -542,9 +573,9 @@ menuitem.marker-color-graphs-red:before,
 .marker-color-graphs-red {
   background-color: var(--theme-graphs-red);
 }
-menuitem.marker-color-graphs-blue:before,
-.marker-color-graphs-blue {
-  background-color: var(--theme-graphs-blue);
+menuitem.marker-color-graphs-grey:before,
+.marker-color-graphs-grey{
+  background-color: var(--theme-graphs-grey);
 }
 
 /**
@@ -558,6 +589,14 @@ menuitem.marker-color-graphs-blue:before,
   min-width: 200px;
 }
 
+#optimizations-graph {
+  height: 30px;
+}
+
+#jit-optimizations-view.empty #optimizations-graph {
+  display: none !important;
+}
+
 /* override default styles for tree widget */
 #jit-optimizations-view .tree-widget-empty-text {
   font-size: inherit;
@@ -670,9 +709,6 @@ description.opt-icon::before {
 .opt-icon[severity=warning]::before {
   background-position: -24px -24px;
 }
-.opt-icon[type=linkable]::before {
-  cursor: pointer;
-}
 
 ul.frames-list {
   list-style-type: none;
diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css
index 8fad666..e9ae604 100644
--- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css
+++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css
@@ -5,10 +5,12 @@
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
   --rule-highlight-background-color: #ffee99;
+  --rule-filter-icon: url(magnifying-glass-light.png);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
+  --rule-filter-icon: url(magnifying-glass.png);
 }
 
 .ruleview {
@@ -103,18 +105,25 @@
   background-size: 13px 12px;
   -moz-margin-start: 5px;
   display: inline-block;
-  vertical-align: top;
   width: 13px;
   height: 12px;
 }
 
-
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .ruleview-warning {
     background-image: url(alerticon-warning@2x.png);
   }
 }
 
+.ruleview-overridden-rule-filter {
+  background-image: var(--rule-filter-icon);
+  background-size: 11px 11px;
+  -moz-margin-start: 5px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+}
+
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
@@ -196,7 +205,7 @@
   background-size: 1em;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .ruleview-bezierswatch {
     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
     background-size: 1em;
@@ -300,13 +309,15 @@
  * the state
  */
 #ruleview-add-rule-button,
-#pseudo-class-panel-toggle {
+#pseudo-class-panel-toggle,
+.ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
 
 #ruleview-add-rule-button:not([disabled]):hover,
 #pseudo-class-panel-toggle:hover,
-#pseudo-class-panel-toggle[checked] {
+#pseudo-class-panel-toggle[checked],
+.ruleview-overridden-rule-filter:hover {
   opacity: 1;
 }
 
diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css
index 9ba9ff8..4626a38 100644
--- a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css
+++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css
@@ -60,7 +60,7 @@
   border: 0;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .side-menu-widget-item-checkbox .checkbox-check {
     background-image: url(itemToggle@2x.png);
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css
index a4a300f..0cc2fca 100644
--- a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css
+++ b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css
@@ -115,7 +115,7 @@
   height: 40px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .stylesheet-enabled {
     background-image: url(itemToggle@2x.png);
   }
diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css
index 0d66638..3be55bd 100644
--- a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css
+++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css
@@ -187,7 +187,7 @@ text {
   -moz-box-flex: 1;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   #inspector-pane-toggle {
     list-style-image: url(debugger-collapse@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css
index d875c23..d17690e 100644
--- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css
@@ -2,10 +2,6 @@
  * 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/. */
 
-/* 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/. */
-
 /* General output styles */
 
 a {
@@ -323,18 +319,32 @@ a {
 }
 
 .message[category=console][severity=error] > .icon::before,
-.message[category=output][severity=error] > .icon::before {
+.message[category=output][severity=error] > .icon::before,
+.message[category=server][severity=error] > .icon::before {
   background-position: -12px -36px;
 }
 
-.message[category=console][severity=warn] > .icon::before {
+.message[category=console][severity=warn] > .icon::before,
+.message[category=server][severity=warn] > .icon::before {
   background-position: -24px -36px;
 }
 
-.message[category=console][severity=info] > .icon::before {
+.message[category=console][severity=info] > .icon::before,
+.message[category=server][severity=info] > .icon::before {
   background-position: -36px -36px;
 }
 
+/* Server Logging Styles */
+
+.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99));
+  border-color: rgb(76, 143, 76);
+}
+
+.message[category=server] > .indent {
+  -moz-border-end: solid #90B090 6px;
+}
+
 /* Input and output styles */
 .message[category=input] > .indent,
 .message[category=output] > .indent {
@@ -364,7 +374,7 @@ a {
   background-size: 16px 16px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .jsterm-input-node {
     background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
   }
@@ -586,6 +596,3 @@ a {
   }
 }
 
-.jsterm-input-node {
-  width: 98%;
-}
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css
deleted file mode 100644
index 3803fe3..0000000
--- a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/* 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/. */
-
-body {
-  font-family: sans-serif;
-  font-size: 11px;
-  background: #EEE;
-  color: #000;
-}
-
-#header {
-  padding: 5px;
-  overflow-x:auto;
-  display: block;
-}
-
-h1 {
-  font-size: 13px;
-  line-height: 15px;
-  padding: 3px 10px;
-  vertical-align: bottom;
-  margin: 0px;
-  background: linear-gradient(#BBB, #999);
-  border-radius: 2px;
-  text-shadow: #FFF 0px 1px 0px;
-}
-
-h1 .info {
-  font-size: 11px;
-  line-height: 15px;
-  vertical-align: bottom;
-  float: right;
-  color: #333;
-  padding-right: 3px;
-}
-
-.property-table {
-  padding: 2px 5px;
-  background: linear-gradient(#FFF, #F8F8F8);
-  color: #333;
-  width: 100%;
-  max-height: 330px;
-  overflow: auto;
-  display: block;
-}
-
-.property-name {
-  font-size: 11px;
-  font-weight: bold;
-  color: #000;
-  white-space: nowrap;
-  text-align: end;
-  vertical-align: top;
-  width: 10%;
-}
-
-.property-value {
-  padding-right: 5px;
-  font-size: 11px;
-  word-wrap: break-word;
-  width: 90%;
-}
-
-div.group {
-  margin-top: 10px;
-}
-
-div.group,
-#header {
-  background: #FFF;
-  border-color: #E1E1E1;
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2);
-  border-radius: 4px 4px 4px 4px;
-}
-
-img#responseImageNode {
-  box-shadow: rgba(0,0,0,0.2) 0px 3px 3.5px;
-  max-width: 100%;
-}
-
-#responseImageNodeDiv {
-  padding: 5px;
-}
-
-#responseBodyFetchLink, #requestBodyFetchLink {
-  padding: 5px;
-  margin: 0;
-  cursor: pointer;
-  font-weight: bold;
-  font-size: 1.1em;
-  text-decoration: underline;
-}
-
-.longStringEllipsis {
-  margin-left: 0.6em;
-}
diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css
index 18a6757..a23f0f5 100644
--- a/arc-firefox-theme/chrome/browser/devtools/widgets.css
+++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css
@@ -1,7 +1,3 @@
-/* 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/. */
-
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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
@@ -108,7 +104,7 @@
   padding: 0;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .scrollbutton-up > .toolbarbutton-icon,
   .scrollbutton-down > .toolbarbutton-icon {
     background-image: url("breadcrumbs-scrollbutton@2x.png");
@@ -217,6 +213,7 @@
   padding-bottom: 0;
 }
 
+
 .breadcrumbs-widget-item:not([checked]) {
   background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
 }
@@ -638,7 +635,7 @@
   height: 16px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .variable-or-property-non-writable-icon {
     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
   }
@@ -738,7 +735,7 @@
   height: 16px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .variables-view-delete {
     background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
   }
@@ -764,7 +761,7 @@
   cursor: pointer;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .variables-view-edit {
     background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
   }
@@ -790,7 +787,7 @@
   cursor: pointer;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .variables-view-open-inspector {
     background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png");
   }
@@ -1421,7 +1418,7 @@
   }
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .tree-widget-item:before {
     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
   }
@@ -1591,9 +1588,3 @@
   background-image: url("app-manager/add.svg");
   -moz-margin-end: 2px;
 }
-
-.side-menu-widget-group-checkbox .checkbox-spacer-box,
-.side-menu-widget-item-checkbox .checkbox-spacer-box {
-  margin: 0;
-  border: none;
-}
-- 
cgit v1.2.3