From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 13 Sep 2015 18:51:33 +0000 (+0200)
Subject: second and last part of syncing LCARStrek with Firefox 40 windows theme changes
X-Git-Tag: LCARStrek-2.37~2
X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=d74db93877c7a404babddcf7b0523fa2b1f6f2bf;p=themes.git

second and last part of syncing LCARStrek with Firefox 40 windows theme changes
---

diff --git a/LCARStrek/browser/aboutSocialError.css b/LCARStrek/browser/aboutSocialError.css
index 20f86d32..99e1e463 100644
--- a/LCARStrek/browser/aboutSocialError.css
+++ b/LCARStrek/browser/aboutSocialError.css
@@ -1,28 +1,7 @@
-body {
-  background-color: #000000;
-  color: #FF9F00;
-  margin-top: 2em;
-  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
-  font-size: 100%;
-  min-height: 200px;
-}
-
-p {
-  font-size: .8em;
-}
-
-#error-box {
-  background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px;
-  -moz-padding-start: 30px;
-}
-
-#error-box:-moz-locale-dir(rtl) {
-  background-position: right 4px;
-}
+@import url("chrome://global/skin/in-content/common.css");
 
-#main-error-msg {
-  color: #4b4b4b;
-  font-weight: bold;
+#errorPageContainer {
+  min-width: 50%;
 }
 
 
@@ -32,57 +11,25 @@ p {
   margin: 0 auto;
 }
 
-@media all and (min-width: 300px) {
-  #error-box {
-    max-width: 50%;
-    margin: 0 auto;
-    background-image: url('chrome://global/skin/icons/information-32.png');
-    min-height: 36px;
-    -moz-padding-start: 38px;
+button {
+  width: auto !important;
+  min-width: 150px;
+}
+
+@media all and (max-width: 300px) {
+  body {
+    padding: 0px 10px;
   }
 
+  #errorPageContainer {
+    min-width: 100%;
+  }
+  #errorTitle {
+    background: none;
+    -moz-padding-start: 0 !important;
+  }
   button {
     width: auto !important;
-    min-width: 150px;
+    min-width: auto !important;
   }
 }
-
-@media all and (min-width: 780px) {
-  #error-box {
-    max-width: 30%;
-  }
-}
-
-button {
-  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
-  font-size: 0.6875em;
-  -moz-user-select: none;
-  width: 100%;
-  margin: 2px 0;
-  padding: 2px 6px;
-  line-height: 1.2;
-  background-color: #000000;
-  color: #FFCF00;
-  background-clip: padding-box;
-  border: none;
-  border-radius: 3px;
-
-  transition-property: background-color, color;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-
-}
-
-button:hover {
-  background-color: #FFCF00;
-  color: #000000;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-}
-
-button:hover:active {
-  background-color: #FF9F00;
-  color: #000000;
-  transition-duration: 10ms;
-  transition-timing-function: linear;
-}
diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 0ab0b84e..3fe80e9a 100644
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -4799,6 +4799,30 @@ notification.pluginVulnerable .messageImage {
 
 /* === END badcontent-doorhanger.inc.css === */
 
+/* === BEGIN login-doorhanger.inc.css === */
+
+#login-fill-testing {
+  color: #FF0000;
+  font-weight: bold;
+}
+
+#login-fill-list {
+  border: 1px solid #9C9CFF;
+  max-height: 20em;
+}
+
+.login-hostname {
+  margin: 4px;
+  font-weight: bold;
+}
+
+.login-username {
+  margin: 4px;
+  color: #A09090;
+}
+
+/* === END login-doorhanger.inc.css === */
+
 /* === BEGIN customizeMode.inc.css === */
 
 /* Customization mode */
diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css
index 1d30bb31..920437f0 100644
--- a/LCARStrek/browser/customizableui/panelUIOverlay.css
+++ b/LCARStrek/browser/customizableui/panelUIOverlay.css
@@ -432,7 +432,8 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
 /* above we treat the container as the icon for the margins, that is so the
 /* badge itself is positioned correctly. Here we make sure that the icon itself
 /* has the minum size we want, but no padding/margin. */
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
+.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon,
+.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
   min-width: 32px;
   min-height: 32px;
   margin: 0;
diff --git a/LCARStrek/browser/devtools/animationinspector.css b/LCARStrek/browser/devtools/animationinspector.css
index dd24562f..6cc0bdbd 100644
--- a/LCARStrek/browser/devtools/animationinspector.css
+++ b/LCARStrek/browser/devtools/animationinspector.css
@@ -84,7 +84,7 @@ body {
   background-image: url("debugger-play.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #element-picker::before {
     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
     background-size: 64px;
@@ -99,6 +99,36 @@ body {
   }
 }
 
+/* Animation target node gutter, contains a preview of the dom node */
+
+.animation-target {
+  background-color: var(--theme-toolbar-background);
+  padding: 1px 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.animation-target .attribute-name {
+  padding-left: 4px;
+}
+
+.animation-target .node-selector {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.animation-target .node-selector:hover {
+  background-position: -32px 0;
+}
+
+.animation-target .node-selector:active {
+  background-position: -16px 0;
+}
+
 /* Animation title gutter, contains the name, duration, iteration */
 
 .animation-title {
@@ -156,7 +186,7 @@ body {
   background-image: url(rewind.png);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .timeline .toggle::before {
     background-image: url(debugger-pause@2x.png);
   }
diff --git a/LCARStrek/browser/devtools/canvasdebugger.css b/LCARStrek/browser/devtools/canvasdebugger.css
index b899dccc..5072242f 100644
--- a/LCARStrek/browser/devtools/canvasdebugger.css
+++ b/LCARStrek/browser/devtools/canvasdebugger.css
@@ -138,7 +138,7 @@
   list-style-image: url("debugger-step-out.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #resume {
     list-style-image: url(debugger-play@2x.png);
     -moz-image-region: rect(0px,64px,32px,32px);
@@ -226,7 +226,7 @@
   background-size: 12px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .selected .call-item-gutter {
     background-image: url("editor-debug-location@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/common.css b/LCARStrek/browser/devtools/common.css
index cd3e746f..07c7e20d 100644
--- a/LCARStrek/browser/devtools/common.css
+++ b/LCARStrek/browser/devtools/common.css
@@ -14,10 +14,16 @@ notification {
 
 /* End LCARStrek toolbox rules */
 
+:root {
+  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
+  --monospace-font-family: "Liberation Mono", Consolas, "Courier New", monospace;
+  --monospace-font-size: 12px;
+}
 
 /* Font for code */
 .devtools-monospace {
-  font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
 }
 
 /* Splitters */
@@ -286,5 +292,36 @@ notification {
   color: #FFCF00;
 }
 
+/* Links to source code, like displaying `myfile.js:45` */
+
+.devtools-source-link {
+  font-family: var(--monospace-font-family);
+  color: var(--theme-text-blue);
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-self: flex-start;
+  text-decoration: none;
+  font-size: 11px;
+  width: 12em; /* probably should be changed for each tool */
+}
+
+.devtools-source-link:hover {
+  text-decoration: underline;
+}
+
+.devtools-source-link > .filename {
+  text-overflow: ellipsis;
+  text-align: end;
+  overflow: hidden;
+  margin: 2px 0px;
+  cursor: pointer;
+}
+
+.devtools-source-link > .line-number {
+  flex: none;
+  margin: 2px 0px;
+  cursor: pointer;
+}
 
 /* === END common.inc.css === */
diff --git a/LCARStrek/browser/devtools/computedview.css b/LCARStrek/browser/devtools/computedview.css
index 1f334c73..4efe970e 100644
--- a/LCARStrek/browser/devtools/computedview.css
+++ b/LCARStrek/browser/devtools/computedview.css
@@ -61,7 +61,7 @@ body {
   background-size: 5px 8px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .property-value, .other-property-value {
     background-image: url("arrow-e@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index 5095b129..8c0f9a5a 100644
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -37,6 +37,7 @@
   --theme-content-color1: #FF9F00;
   --theme-content-color2: #A09090;
   --theme-content-color3: #FF9F00;
+  --theme-content-color4: #9C9CFF;
   --theme-content-disabled: #8050B0;
 
   --theme-text-blue: #3333FF;
@@ -49,6 +50,14 @@
   --theme-highlight-orange: #FF9F00;
   --theme-highlight-red: #FF0000;
   --theme-highlight-pink: #E7ADE7;
+
+  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
+  --theme-graphs-green: #008484;
+  --theme-graphs-blue: #9C9CFF;
+  --theme-graphs-purple: #C09070;
+  --theme-graphs-yellow: #FFCF00;
+  --theme-graphs-red: #FF0000;
+  --theme-graphs-grey: #A09090;
 }
 
 .theme-body {
@@ -347,7 +356,7 @@ div.CodeMirror span.eval-text {
   background-position: -14px 0;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .theme-twisty, .theme-checkbox {
     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
   }
@@ -385,7 +394,7 @@ div.CodeMirror span.eval-text {
   margin-left: -4px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .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");
@@ -633,7 +642,7 @@ div.CodeMirror span.eval-text {
   background-repeat: no-repeat;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .devtools-button::before {
     background-size: 32px;
   }
@@ -736,7 +745,7 @@ div.CodeMirror span.eval-text {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .devtools-searchinput {
     background-image: url("magnifying-glass@2x.png");
   }
@@ -979,7 +988,7 @@ div.CodeMirror span.eval-text {
   background-image: url("chrome://browser/skin/devtools/command-rulers.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #command-button-paintflashing > image {
     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/debugger.css b/LCARStrek/browser/devtools/debugger.css
index 217e916b..4083c5a2 100644
--- a/LCARStrek/browser/devtools/debugger.css
+++ b/LCARStrek/browser/devtools/debugger.css
@@ -39,7 +39,7 @@ window {
   list-style-image: url("debugger-blackbox.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #black-box {
     list-style-image: url(debugger-blackbox@2x.png);
   }
@@ -49,7 +49,7 @@ window {
   list-style-image: url(debugger-prettyprint.png);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #pretty-print {
     list-style-image: url(debugger-prettyprint@2x.png);
   }
@@ -59,7 +59,7 @@ window {
   list-style-image: url("debugger-toggleBreakpoints.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #toggle-breakpoints {
     list-style-image: url(debugger-toggleBreakpoints@2x.png);
   }
@@ -81,7 +81,7 @@ window {
   -moz-image-region: rect(16px, 32px, 32px, 16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #sources-toolbar .devtools-toolbarbutton:not([label]) {
     -moz-image-region: rect(0px,32px,32px,0px);
   }
@@ -133,7 +133,7 @@ window {
   -moz-margin-end: 5px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #black-boxed-message-button > .button-box > .button-icon {
     background-image: url("debugger-blackbox@2x.png");
   }
@@ -178,7 +178,7 @@ window {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #trace {
     list-style-image: url(tracer-icon@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
@@ -368,7 +368,7 @@ window {
   margin: 2px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .dbg-expression-arrow {
     background-image: url(commandline-icon@2x.png);
   }
@@ -596,7 +596,7 @@ window {
   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #resume {
     list-style-image: url(debugger-pause@2x.png);
     -moz-image-region: rect(0px, 32px, 32px, 0px);
@@ -643,7 +643,7 @@ window {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #step-over {
     list-style-image: url(debugger-step-over@2x.png);
     -moz-image-region: rect(0px, 32px, 32px, 0);
@@ -688,7 +688,7 @@ window {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #instruments-pane-toggle {
     list-style-image: url(debugger-collapse@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
diff --git a/LCARStrek/browser/devtools/inspector.css b/LCARStrek/browser/devtools/inspector.css
index 2e3b0827..3a6a7b55 100644
--- a/LCARStrek/browser/devtools/inspector.css
+++ b/LCARStrek/browser/devtools/inspector.css
@@ -309,7 +309,7 @@ window {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #inspector-pane-toggle {
     list-style-image: url("debugger-collapse@2x.png");
     -moz-image-region: rect(0px,32px,32px,0px);
diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css
index 7bbf4006..88fc4089 100644
--- a/LCARStrek/browser/devtools/netmonitor.css
+++ b/LCARStrek/browser/devtools/netmonitor.css
@@ -406,7 +406,7 @@ box.requests-menu-status[code^="5"] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #details-pane-toggle {
     list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
     -moz-image-region: rect(0px,32px,32px,0px);
@@ -536,7 +536,7 @@ box.requests-menu-status[code^="5"] {
   height: 12px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .security-warning-icon {
     background-image: url("alerticon-warning@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css
index b53bda6e..3583d718 100644
--- a/LCARStrek/browser/devtools/performance.css
+++ b/LCARStrek/browser/devtools/performance.css
@@ -97,31 +97,91 @@
   text-align: center;
 }
 
+.console-profile-command {
+  font-family: monospace;
+  margin: 3px 2px;
+}
+
+#performance-view .realtime-message {
+  opacity: 0.5;
+  display: block;
+}
+
+#performance-view toolbarbutton.record-button {
+  padding: 5px;
+}
+
+#performance-view toolbarbutton.record-button[checked],
+#performance-view toolbarbutton.record-button[checked] {
+  color: var(--theme-selection-color);
+  background: var(--theme-selection-background);
+}
+
+#performance-view .realtime-disabled-message,
+#performance-view .realtime-disabled-on-e10s-message {
+  display: none;
+  /* This label does not want to wrap naturally (based on some combination of
+     it's parents and flex).  Quick and dirty way to force it to wrap -> don't
+     let it get bigger than half the screen size */
+  max-width: 60vw;
+}
+
+#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message {
+  display: block;
+  opacity: 0.5;
+
+}
+#performance-view[e10s="unsupported"] .realtime-disabled-message {
+  display: block;
+  opacity: 0.5;
+}
+
+#details-pane-container .buffer-status-message,
+#details-pane-container .buffer-status-message-full {
+  display: none;
+}
+
+#details-pane-container[buffer-status="in-progress"] .buffer-status-message {
+  display: block;
+  opacity: 0.5;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message {
+  display: block;
+  color: var(--theme-highlight-red);
+  font-weight: bold;
+  opacity: 1;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message-full {
+  display: block;
+}
+
 /* Overview Panel */
 
-.record-button {
+#main-record-button {
   list-style-image: url(profiler-stopwatch-tbutton.svg);
 }
 
 #empty-notice > .record-button,
-.record-button:hover,
-.record-button:hover:active {
+#main-record-button:hover,
+#main-record-button:hover:active {
   list-style-image: url(profiler-stopwatch.svg);
 }
 
-.record-button[checked] {
+#main-record-button[checked] {
   list-style-image: url(profiler-stopwatch-checked.svg);
 }
 
-.record-button[locked] {
+#main-record-button[locked] {
   pointer-events: none;
 }
 
-.record-button .button-icon {
+#main-record-button .button-icon {
   margin: 0;
 }
 
-.record-button .button-text {
+#main-record-button .button-text {
   display: none;
 }
 
@@ -273,8 +333,11 @@
   opacity: 0.6;
 }
 
+.call-tree-name {
+  -moz-margin-end: 4px !important;
+}
+
 .call-tree-url {
-  -moz-margin-start: 4px !important;
   cursor: pointer;
 }
 
@@ -301,14 +364,6 @@
   color: var(--theme-content-color2);
 }
 
-.call-tree-name[value=""],
-.call-tree-url[value=""],
-.call-tree-line[value=""],
-.call-tree-column[value=""],
-.call-tree-host[value=""] {
-  display: none;
-}
-
 .call-tree-zoom {
   -moz-appearance: none;
   background-color: transparent;
@@ -329,7 +384,7 @@
   background-image: url(magnifying-glass-light.png);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .theme-dark .call-tree-zoom {
     background-image: url(magnifying-glass@2x.png);
   }
@@ -441,20 +496,12 @@
   color: var(--theme-selection-color);
 }
 
-.waterfall-marker-location {
-   color: #3333FF;
-}
-
-.waterfall-marker-location:hover,
-.waterfall-marker-location:focus {
-   text-decoration: underline;
-}
-
 #waterfall-details {
   -moz-padding-start: 8px;
   -moz-padding-end: 8px;
   padding-top: 2vh;
   overflow: auto;
+  min-width: 50px;
 }
 
 .marker-details-bullet {
@@ -463,35 +510,34 @@
   border-radius: 1px;
 }
 
-#performance-filter-menupopup > menuitem.highlight-pink:before,
-.marker-details-bullet.highlight-pink,
-.waterfall-marker-bar.highlight-pink,
-.waterfall-marker-bullet.highlight-pink {
-  background-color: var(--theme-highlight-pink);
+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);
 }
-#performance-filter-menupopup > menuitem.highlight-bluegrey:before,
-.marker-details-bullet.highlight-bluegrey,
-.waterfall-marker-bar.highlight-bluegrey,
-.waterfall-marker-bullet.highlight-bluegrey {
-  background-color: var(--theme-highlight-bluegrey);
+
+menuitem.marker-color-graphs-green:before,
+.marker-color-graphs-green {
+  background-color: var(--theme-graphs-green);
 }
-#performance-filter-menupopup > menuitem.highlight-green:before,
-.marker-details-bullet.highlight-green,
-.waterfall-marker-bar.highlight-green,
-.waterfall-marker-bullet.highlight-green {
-  background-color: var(--theme-highlight-green);
+
+menuitem.marker-color-graphs-yellow:before,
+.marker-color-graphs-yellow {
+  background-color: var(--theme-graphs-yellow);
 }
-#performance-filter-menupopup > menuitem.highlight-lightorange:before,
-.marker-details-bullet.highlight-lightorange,
-.waterfall-marker-bar.highlight-lightorange,
-.waterfall-marker-bullet.highlight-lightorange {
-  background-color: var(--theme-highlight-lightorange);
+
+menuitem.marker-color-graphs-red:before,
+.marker-color-graphs-red {
+  background-color: var(--theme-graphs-red);
 }
-#performance-filter-menupopup > menuitem.highlight-red:before,
-.marker-details-bullet.highlight-red,
-.waterfall-marker-bar.highlight-red,
-.waterfall-marker-bullet.highlight-red {
-  background-color: var(--theme-highlight-red);
+
+menuitem.marker-color-graphs-blue:before,
+.marker-color-graphs-blue {
+  background-color: var(--theme-graphs-blue);
 }
 
 #waterfall-details > * {
@@ -687,7 +733,7 @@ call-tree-item:not([origin="content"]) .call-tree-line {
   background-image: url(magnifying-glass.png);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .call-tree-zoom {
     background-image: url(magnifying-glass@2x.png);
   }
@@ -754,11 +800,6 @@ call-tree-item:not([origin="content"]) .call-tree-line {
   font-weight: 600;
 }
 
-#jit-optimizations-view .opt-ion-type-site {
-  -moz-margin-start: 4px !important;
-  opacity: 0.6;
-}
-
 #jit-optimizations-view .opt-outcome::before {
   content: "→";
   margin: 4px 0px;
@@ -822,8 +863,40 @@ call-tree-item:not([origin="content"]) .call-tree-line {
   background-position: -16px -16px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #jit-optimizations-view .opt-icon::before {
     background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
   }
 }
+
+/**
+ * Configurable Options
+ *
+ * Elements can be tagged with a class and visibility is controlled via a preference being
+ * applied or removed.
+ */
+
+/**
+ * devtools.performance.ui.experimental
+ */
+menuitem.experimental-option::before {
+  content: "";
+  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-repeat: no-repeat;
+  background-size: 48px 40px;
+  margin: 2px 5px 0 0;
+  width: 8px;
+  height: 8px;
+  max-height: 8px;
+  display: inline-block;
+  background-position: -16px -16px;
+}
+@media (min-resolution: 1.25dppx) {
+  menuitem.experimental-option::before {
+    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
+  }
+}
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option,
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
+  display: none;
+}
diff --git a/LCARStrek/browser/devtools/profiler.css b/LCARStrek/browser/devtools/profiler.css
index 8438726e..7d9da809 100644
--- a/LCARStrek/browser/devtools/profiler.css
+++ b/LCARStrek/browser/devtools/profiler.css
@@ -175,7 +175,7 @@ window {
   background-image: url("newtab.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #profile-newtab-button {
     background-image: url("newtab@2x.png");
   }
@@ -341,7 +341,7 @@ window {
   background-image: url("magnifying-glass.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .call-tree-zoom {
     background-image: url("magnifying-glass@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css
index 307b1b9c..00ee6f91 100644
--- a/LCARStrek/browser/devtools/ruleview.css
+++ b/LCARStrek/browser/devtools/ruleview.css
@@ -72,7 +72,8 @@
 }
 
 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
+.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue {
   border-bottom-color: transparent;
 }
 
@@ -95,7 +96,7 @@
   height: 12px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .ruleview-warning {
     background-image: url("alerticon-warning@2x.png");
   }
@@ -130,7 +131,7 @@
 }
 
 .ruleview-namecontainer,
-.ruleview-propertycontainer,
+.ruleview-propertyvaluecontainer,
 .ruleview-propertyname,
 .ruleview-propertyvalue {
   text-decoration: inherit;
@@ -178,7 +179,7 @@
   background-size: 1em;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .ruleview-bezierswatch {
     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
     background-size: 1em;
@@ -199,7 +200,7 @@
   clear: right;
 }
 
-.ruleview-property  > * {
+.ruleview-propertycontainer > * {
   vertical-align: middle;
 }
 
@@ -212,12 +213,12 @@
 }
 
 .ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-propertycontainer > .ruleview-propertyvalue {
+.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
   border-bottom: 1px dashed transparent;
 }
 
 .ruleview-namecontainer:hover > .ruleview-propertyname,
-.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
+.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
   border-bottom-color: #008484;
 }
 
diff --git a/LCARStrek/browser/devtools/shadereditor.css b/LCARStrek/browser/devtools/shadereditor.css
index 9cdc3e4b..52454287 100644
--- a/LCARStrek/browser/devtools/shadereditor.css
+++ b/LCARStrek/browser/devtools/shadereditor.css
@@ -61,7 +61,7 @@ window {
   border: 0;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .side-menu-widget-item-checkbox .checkbox-check {
     background-image: url("itemToggle@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/styleeditor.css b/LCARStrek/browser/devtools/styleeditor.css
index ff98fd00..498bdd3a 100644
--- a/LCARStrek/browser/devtools/styleeditor.css
+++ b/LCARStrek/browser/devtools/styleeditor.css
@@ -98,7 +98,7 @@ window:not([windowtype]) {
   height: 40px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .stylesheet-enabled {
     background-image: url("itemToggle@2x.png");
   }
diff --git a/LCARStrek/browser/devtools/timeline.css b/LCARStrek/browser/devtools/timeline.css
deleted file mode 100644
index ba707eca..00000000
--- a/LCARStrek/browser/devtools/timeline.css
+++ /dev/null
@@ -1,215 +0,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 file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#record-button {
-  list-style-image: url("profiler-stopwatch.svg");
-  min-width: 24px;
-}
-
-#record-button[checked] {
-  list-style-image: url("profiler-stopwatch-checked.svg");
-}
-
-#record-button:not([checked]) ~ #record-label {
-  visibility: hidden;
-}
-
-#memory-checkbox .checkbox-label {
-  line-height: 100%;
-}
-
-#filter-button {
-  list-style-image: url(timeline-filter.svg#filter);
-  min-width: 24px;
-}
-
-#filter-button[disabled] {
-  list-style-image: url(timeline-filter.svg#filter-disabled);
-}
-
-#filter-button:not([disabled]):hover,
-#filter-button[open] {
-  list-style-image: url(timeline-filter.svg#filter-open);
-}
-
-#timelineFilterPopup > menuitem:before {
-  content: "";
-  display: block;
-  width: 8px;
-  height: 8px;
-  margin: 0 8px;
-  border: 1px solid;
-  border-radius: 1px;
-  background-color: var(--bullet-bg);
-  border-color: var(--bullet-border);
-}
-
-.notice-container {
-  font-size: 120%;
-  padding-bottom: 35vh;
-}
-
-.notice-container {
-  background: #A09090; /* Toolbars */
-  color: #000000; /* Light foreground text */
-}
-
-#empty-notice button,
-#recording-notice button {
-  min-width: 30px;
-  min-height: 28px;
-  margin: 0;
-  list-style-image: url("profiler-stopwatch.svg");
-}
-
-#empty-notice button[checked],
-#recording-notice button[checked] {
-  list-style-image: url("profiler-stopwatch-checked.svg");
-}
-
-#empty-notice button .button-text,
-#recording-notice button .button-text {
-  display: none;
-}
-
-#timeline-pane {
-  border-top: 1px solid #9C9CFF;
-}
-
-.waterfall-list-contents {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.waterfall-header-contents {
-  overflow-x: hidden;
-}
-
-.waterfall-background-ticks {
-  /* Background created on a <canvas> in js. */
-  /* @see browser/devtools/timeline/widgets/waterfall.js */
-  background-image: -moz-element(#waterfall-background);
-  background-repeat: repeat-y;
-  background-position: -1px center;
-}
-
-.waterfall-marker-container[is-spacer] {
-  pointer-events: none;
-}
-
-.waterfall-marker-container:not([is-spacer]):nth-child(2n) {
-  background-color: var(--theme-contrast-background);
-}
-
-.waterfall-marker-container:hover {
-  background-color: var(--theme-hover-background) !important;
-  color: var(--theme-hover-color) !important;
-}
-
-.waterfall-marker-item {
-  overflow: hidden;
-}
-
-.waterfall-sidebar {
-  -moz-border-end: 1px solid;
-
-  -moz-border-end-color: #9C9CFF;
-}
-
-.waterfall-marker-container:hover > .waterfall-sidebar {
-  background-color: transparent;
-}
-
-.waterfall-header-name {
-  padding: 4px;
-}
-
-.waterfall-header-tick {
-  width: 100px;
-  font-size: 9px;
-  transform-origin: left center;
-}
-
-.waterfall-header-tick {
-  color: #FF9F00;
-}
-
-.waterfall-header-tick:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.waterfall-marker-bullet {
-  width: 8px;
-  height: 8px;
-  -moz-margin-start: 8px;
-  -moz-margin-end: 6px;
-  border: 1px solid;
-  border-radius: 1px;
-}
-
-.waterfall-marker-name {
-  font-size: 95%;
-  padding-bottom: 1px !important;
-}
-
-.waterfall-marker-bar {
-  height: 9px;
-  border: 1px solid;
-  border-radius: 1px;
-  transform-origin: left center;
-}
-
-.waterfall-marker-container.selected > .waterfall-sidebar,
-.waterfall-marker-container.selected > .waterfall-marker-item {
-  background-color: #008484; /* Select Highlight Blue */
-  color: #FFCF00; /* Light foreground text */
-}
-
-.waterfall-marker-container.selected .waterfall-marker-bullet,
-.waterfall-marker-container.selected .waterfall-marker-bar {
-  border-color: initial !important;
-}
-
-.waterfall-marker-location {
-   color: #3333FF;
-}
-
-.waterfall-marker-location:hover,
-.waterfall-marker-location:focus {
-   text-decoration: underline;
-}
-
-#timeline-waterfall-details {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
-  padding-top: 2vh;
-  overflow: auto;
-}
-
-.marker-details-bullet {
-  width: 8px;
-  height: 8px;
-  border: 1px solid;
-  border-radius: 1px;
-}
-
-#timeline-waterfall-details > * {
-  padding-top: 3px;
-}
-
-.marker-details-labelname {
-  -moz-padding-end: 4px;
-}
-
-.marker-details-type {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-
-.marker-details-duration {
-  font-weight: bold;
-}
diff --git a/LCARStrek/browser/devtools/webaudioeditor.css b/LCARStrek/browser/devtools/webaudioeditor.css
index 70fa57c7..8faf33af 100644
--- a/LCARStrek/browser/devtools/webaudioeditor.css
+++ b/LCARStrek/browser/devtools/webaudioeditor.css
@@ -169,7 +169,7 @@ g.selected text {
   -moz-box-flex: 1;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #inspector-pane-toggle {
     list-style-image: url("debugger-collapse@2x.png");
     -moz-image-region: rect(0px,32px,32px,0px);
diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css
index a3f4d556..e43e225a 100644
--- a/LCARStrek/browser/devtools/webconsole.css
+++ b/LCARStrek/browser/devtools/webconsole.css
@@ -67,7 +67,7 @@ a {
   display: inline-block;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .message > .icon::before {
     background-image: url("chrome://browser/skin/devtools/webconsole@2x.png");
   }
@@ -400,7 +400,7 @@ a {
   background-size: 16px 16px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .jsterm-input-node {
     background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
   }
@@ -414,6 +414,9 @@ a {
 .inlined-variables-view .message-body {
   display: flex;
   flex-direction: column;
+  resize: vertical;
+  overflow: auto;
+  min-height: 200px;
 }
 
 .inlined-variables-view iframe {
diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index 75db1d04..b095b565 100644
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -587,7 +587,7 @@
   opacity: 0.5;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .variable-or-property-non-writable-icon > .title:after {
     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
   }
@@ -687,7 +687,7 @@
   height: 16px;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .variables-view-delete {
     background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
   }
@@ -713,7 +713,7 @@
   cursor: pointer;
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .variables-view-edit {
     background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
   }
@@ -823,13 +823,14 @@
 
 .line-graph-widget-gutter {
   position: absolute;
-  background: #000000;
   width: 10px;
   height: 100%;
   top: 0;
   left: 0;
-  border-right: 1px solid #9C9CFF;
   pointer-events: none;
+
+  background: #000000;
+  -moz-border-end: 1px solid #9C9CFF;
 }
 
 .line-graph-widget-gutter-line {
@@ -852,7 +853,6 @@
 
 .line-graph-widget-tooltip {
   position: absolute;
-  background: #404000;
   border-radius: 2px;
   line-height: 15px;
   -moz-padding-start: 6px;
@@ -861,6 +861,8 @@
   font-size: 80%;
   z-index: 1;
   pointer-events: none;
+
+  background: #404000;
 }
 
 .line-graph-widget-tooltip[with-arrows=true]::before {
@@ -894,7 +896,7 @@
 }
 
 .line-graph-widget-tooltip > [text=info] {
-  color: #A09090;
+  color: var(--theme-content-color2);
 }
 
 .line-graph-widget-tooltip > [text=value] {
@@ -903,7 +905,7 @@
 
 .line-graph-widget-tooltip > [text=metric] {
   -moz-margin-start: 1px;
-  color: #9C9CFF;
+  color: var(--theme-content-color4);
 }
 
 .line-graph-widget-tooltip > [text=value],
@@ -915,15 +917,15 @@
 }
 
 .line-graph-widget-tooltip[type=maximum] > [text=value] {
-  color: #008484;
+  color: var(--theme-highlight-green);
 }
 
 .line-graph-widget-tooltip[type=minimum] > [text=value] {
-  color: #FF0000;
+  color: var(--theme-highlight-red);
 }
 
 .line-graph-widget-tooltip[type=average] > [text=value] {
-  color: #FF9F00;
+  color: var(--theme-highlight-orange);
 }
 
 /* Bar graph widget */
@@ -937,7 +939,7 @@
   top: 4px;
   left: 8px;
   color: #A09090;
-  font-size: 80%;
+  font-size: 0.8rem !important;
   pointer-events: none;
 }
 
@@ -1324,7 +1326,7 @@
   }
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .tree-widget-item:before {
     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
   }
diff --git a/LCARStrek/browser/downloads/contentAreaDownloadsView.css b/LCARStrek/browser/downloads/contentAreaDownloadsView.css
index 68ae5f78..9e42a686 100644
--- a/LCARStrek/browser/downloads/contentAreaDownloadsView.css
+++ b/LCARStrek/browser/downloads/contentAreaDownloadsView.css
@@ -2,7 +2,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("chrome://global/skin/inContentUI.css");
+@import url("chrome://global/skin/in-content/common.css");
 
 #contentAreaDownloadsView {
   margin: 0;
@@ -13,6 +13,11 @@
   box-shadow: none;
 }
 
+#downloadsRichListBox:not(:-moz-focusring) {
+  border-color: transparent;
+}
+
+.downloadButton:not([disabled="true"]):hover,
 .downloadButton:not([disabled="true"]):hover:active,
 .downloadButton:not([disabled]):hover:active {
   background: transparent;
@@ -20,6 +25,10 @@
   box-shadow: none;
 }
 
+.downloadButton > .button-box {
+  padding-bottom: 0;
+}
+
 #downloadsListEmptyDescription {
   margin: 1em;
   text-align: center;
diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css
index 837fe327..77ecbc1b 100644
--- a/LCARStrek/browser/newtab/newTab.css
+++ b/LCARStrek/browser/newtab/newTab.css
@@ -89,7 +89,9 @@
 }
 
 /* CELLS */
-.newtab-cell {
+.newtab-cell,
+.newtab-intro-cell,
+.newtab-intro-cell-hover {
   background-color: rgba(255,159,0,.2);
   border: 1px solid;
   border-color: #9C9CFF;
@@ -108,11 +110,19 @@
   transition-property: top, left, opacity, box-shadow, background-color;
 }
 
-.newtab-cell:not([ignorehover]) > .newtab-site:hover,
-.newtab-site[dragged] {
+.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
+.newtab-cell:not([ignorehover]) .newtab-link:hover,
+.newtab-site[dragged],
+.newtab-intro-cell-hover .newtab-link {
   box-shadow: 0 0 10px rgba(0,132,132,.3);
 }
 
+.newtab-intro-cell .newtab-thumbnail,
+.newtab-intro-cell-hover .newtab-thumbnail {
+  background-color: #cae1f4;
+  background-image: url("chrome://browser/skin/newtab/whimsycorn.png");
+}
+
 .newtab-site[dragged] {
   transition-property: box-shadow, background-color;
   background-color: #002121;
@@ -120,7 +130,8 @@
 
 /* LINKS */
 .newtab-link {
-  border-radius: 3px;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 /* THUMBNAILS */
@@ -129,6 +140,8 @@
   background-clip: padding-box;
   background-repeat: no-repeat;
   background-size: cover;
+  border-radius: 8px 8px 0px 0px;
+  height: 180px;
   transition: opacity 100ms ease-out;
 }
 
@@ -156,6 +169,7 @@
   bottom: 0 !important;
 }
 
+/*
 .newtab-suggested {
   background-color: #9C9CFF;
 }
@@ -169,13 +183,13 @@
   background-color: #FF9F00;
   border: 0;
 }
-
+*/
 .newtab-site:hover .newtab-title {
   background-color: #FFCF00;
 }
 
 .newtab-site[pinned] .newtab-title {
-  padding: 0 15px;
+  -moz-padding-start: 24px;
 }
 
 .newtab-site[pinned] .newtab-title::before {
@@ -187,6 +201,8 @@
   top: 5px;
   position: absolute;
   width: 10px;
+  margin-left: 8px;
+  margin-top: 6px;
 }
 
 .newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before {
diff --git a/LCARStrek/browser/newtab/whimsycorn.png b/LCARStrek/browser/newtab/whimsycorn.png
new file mode 100644
index 00000000..0c447bf7
Binary files /dev/null and b/LCARStrek/browser/newtab/whimsycorn.png differ
diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css
index 00d77fd9..2364c80b 100644
--- a/LCARStrek/browser/preferences/in-content/preferences.css
+++ b/LCARStrek/browser/preferences/in-content/preferences.css
@@ -287,8 +287,8 @@ description > html|a {
 #weavePrefsDeck > vbox > description,
 #weavePrefsDeck > vbox > #pairDevice > label,
 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
-#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
-#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
+#weavePrefsDeck > #hasFxaAccount > vbox > label,
+#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label {
   /* no margin-start for elements at the begin of a line */
   -moz-margin-start: 0;
 }