From 2b5a514788884f7527ad59c3381c75a71d4dbeea Mon Sep 17 00:00:00 2001
From: Robert Kaiser <robert@widebook.box.kairo.at>
Date: Fri, 26 Sep 2014 22:41:35 +0200
Subject: [PATCH] first part of syncing LCARStrek with Firefox 33 windows theme
 changes

---
 LCARStrek/browser/browser.css                 |  21 ++-
 .../browser/customizableui/panelUIOverlay.css |   7 +-
 .../browser/devtools/app-manager/add.svg      |   1 -
 .../browser/devtools/app-manager/error.svg    |   1 -
 .../devtools/app-manager/index-icons.svg      |   1 -
 .../browser/devtools/app-manager/plus.svg     |   1 -
 .../browser/devtools/app-manager/rocket.svg   |   1 -
 .../browser/devtools/app-manager/warning.svg  |   1 -
 LCARStrek/browser/devtools/dark-theme.css     | 120 ++++++++++-------
 LCARStrek/browser/devtools/debugger.css       |   5 -
 LCARStrek/browser/devtools/netmonitor.css     |  11 +-
 LCARStrek/browser/devtools/shadereditor.css   |   4 -
 LCARStrek/browser/devtools/styleeditor.css    |  13 +-
 LCARStrek/browser/devtools/webaudioeditor.css |   6 -
 LCARStrek/browser/devtools/webconsole.css     |  47 ++-----
 LCARStrek/browser/devtools/widgets.css        | 101 ++++++++-------
 LCARStrek/browser/newtab/controls.svg         | 122 ++++++++++++++++++
 LCARStrek/browser/newtab/newTab.css           | 111 ++++++++++------
 .../preferences/in-content/preferences.css    |   6 +
 19 files changed, 384 insertions(+), 196 deletions(-)
 create mode 100644 LCARStrek/browser/newtab/controls.svg

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 987b42e1..69a0ceac 100644
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -2400,7 +2400,6 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
 
 .panel-promo-closebutton > .toolbarbutton-text {
   padding: 0;
-  margin: 0;
 }
 
 /* ::::: content area ::::: */
@@ -3513,6 +3512,26 @@ html|*.highlighter-nodeinfobar-dimensions {
   margin: 7px 0;
 }
 
+/* Css transform highlighter */
+
+svg|polygon.css-transform-transformed {
+  fill: #9C9CFF;
+  opacity: 0.8;
+}
+
+svg|polygon.css-transform-untransformed {
+  fill: #A09090;
+  opacity: 0.8;
+}
+
+svg|polygon.css-transform-transformed,
+svg|polygon.css-transform-untransformed,
+svg|line.css-transform-line {
+  stroke: #E7ADE7;
+  stroke-dasharray: 5 3;
+  stroke-width: 2;
+}
+
 /* === END highlighter.inc.css === */
 
 #full-screen-warning-message {
diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css
index 47670532..6d6f09b4 100644
--- a/LCARStrek/browser/customizableui/panelUIOverlay.css
+++ b/LCARStrek/browser/customizableui/panelUIOverlay.css
@@ -116,6 +116,8 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan
 
 .panel-subview-header,
 .subviewbutton.panel-subview-footer {
+  box-sizing: border-box;
+/*  min-height: 41px; */
   padding: 3px;
 }
 
@@ -477,8 +479,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 #PanelUI-customize,
 #PanelUI-quit {
   margin: 0;
-  padding: 10px 0;
-  min-height: 2em;
+  padding: 11px 0;
+  box-sizing: border-box;
+  min-height: 40px;
   box-shadow: none;
   border: none;
   border-radius: 0;
diff --git a/LCARStrek/browser/devtools/app-manager/add.svg b/LCARStrek/browser/devtools/app-manager/add.svg
index 89249149..3eae94ae 100644
--- a/LCARStrek/browser/devtools/app-manager/add.svg
+++ b/LCARStrek/browser/devtools/app-manager/add.svg
@@ -4,7 +4,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/. -->
 
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
   <path fill="#9C9CFF" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5
     S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62
diff --git a/LCARStrek/browser/devtools/app-manager/error.svg b/LCARStrek/browser/devtools/app-manager/error.svg
index fe0cf54f..b6f921ff 100644
--- a/LCARStrek/browser/devtools/app-manager/error.svg
+++ b/LCARStrek/browser/devtools/app-manager/error.svg
@@ -4,7 +4,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/. -->
 
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
   <path fill="#FF0000" d="M32,4.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5S47.74,4.894,32,4.894
     z M46.903,48.674c-1.817,1.817-4.691,1.76-6.449,0.002l-8.327-8.327l-8.151,8.151c-1.877,1.877-4.87,1.814-6.685,0
diff --git a/LCARStrek/browser/devtools/app-manager/index-icons.svg b/LCARStrek/browser/devtools/app-manager/index-icons.svg
index e25705df..742b58ac 100644
--- a/LCARStrek/browser/devtools/app-manager/index-icons.svg
+++ b/LCARStrek/browser/devtools/app-manager/index-icons.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="160px" height="240px" viewBox="0 0 160 240" enable-background="new 0 0 160 240" xml:space="preserve">
 <rect y="40" display="none" fill="#000000" width="84" height="160"/>
diff --git a/LCARStrek/browser/devtools/app-manager/plus.svg b/LCARStrek/browser/devtools/app-manager/plus.svg
index c233865a..56eb8f45 100644
--- a/LCARStrek/browser/devtools/app-manager/plus.svg
+++ b/LCARStrek/browser/devtools/app-manager/plus.svg
@@ -4,7 +4,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/. -->
 
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
   <path fill="#C09070" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5
     S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62
diff --git a/LCARStrek/browser/devtools/app-manager/rocket.svg b/LCARStrek/browser/devtools/app-manager/rocket.svg
index 94f403c7..05534e24 100644
--- a/LCARStrek/browser/devtools/app-manager/rocket.svg
+++ b/LCARStrek/browser/devtools/app-manager/rocket.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
 <!-- 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
diff --git a/LCARStrek/browser/devtools/app-manager/warning.svg b/LCARStrek/browser/devtools/app-manager/warning.svg
index 9bc6a1e2..8ed4f7f7 100644
--- a/LCARStrek/browser/devtools/app-manager/warning.svg
+++ b/LCARStrek/browser/devtools/app-manager/warning.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
 <!-- 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
diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index 1a859273..ddf02aee 100644
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -285,6 +285,10 @@ div.CodeMirror span.eval-text {
   background-position: -14px -14px;
 }
 
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
 .theme-checkbox {
   display: inline-block;
   border: 0;
@@ -380,6 +384,11 @@ div.CodeMirror span.eval-text {
 
 /* === BEGIN toolbars.inc.css === */
 
+/* Toolbars */
+.devtools-toolbar,
+.devtools-sidebar-tabs > tabs {
+}
+
 .devtools-toolbar {
 }
 
@@ -389,15 +398,23 @@ div.CodeMirror span.eval-text {
   padding: 2px;
 }
 
-devtools-menulist:-moz-focusring,
+/* Toolbar buttons */
+.devtools-menulist,
+.devtools-toolbarbutton {
+}
+
+.devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted #008484;
 }
 
-.devtools-toolbarbutton > .toolbarbutton-icon {
+.devtools-toolbarbutton[standalone] {
+}
+.devtools-toolbarbutton[label][standalone] {
 }
 
-.devtools-toolbarbutton:not([label]) {
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
   min-width: 20px;
 }
 
@@ -405,76 +422,85 @@ devtools-menulist:-moz-focusring,
   display: none;
 }
 
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-  /*-moz-box-orient: horizontal;*/
+.devtools-toolbar .devtools-toolbarbutton {
 }
 
-.devtools-menulist,
-.devtools-toolbarbutton {
+.devtools-toolbarbutton > .toolbarbutton-icon {
 }
 
-.devtools-toolbarbutton:not([checked]):hover:active {
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+  /*-moz-box-orient: horizontal;*/
 }
 
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked] {
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
 }
 
-.devtools-toolbarbutton[checked] {
+.devtools-toolbarbutton[type=menu-button] {
 }
 
-.devtools-toolbarbutton[checked]:hover:active {
+.devtools-menulist > .menulist-dropmarker {
 }
 
-.devtools-option-toolbarbutton {
-  list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
-/*  background: none;
-  border: none; */
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
 }
 
-.devtools-option-toolbarbutton:hover,
-.devtools-option-toolbarbutton[open=true] {
-  list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
+.devtools-menulist,
+.devtools-toolbarbutton {
 }
 
-.devtools-menulist > .menulist-label-box {
-  text-align: center;
+/* Text-only buttons */
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]) {
+/*  background-color: rgba(0, 0, 0, .2); / Splitter */
 }
 
-.devtools-menulist > .menulist-dropmarker {
+/* Button States */
+.devtools-toolbarbutton:hover,
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
+/*  background: rgba(0, 0, 0, .3); / Splitters */
 }
 
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+.devtools-toolbarbutton:hover:active,
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+/*  background: rgba(0, 0, 0, .4); / Splitters */
 }
 
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+/* Menu type buttons and checked states */
+.theme-dark .devtools-menulist[open=true],
+.theme-dark .devtools-toolbarbutton[open=true],
+.theme-dark .devtools-toolbarbutton[open=true]:hover,
+.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
+.theme-dark .devtools-toolbarbutton[checked=true],
+.theme-dark .devtools-toolbarbutton[checked=true]:hover {
+/*  background: rgba(29, 79, 115, .7); /*Select highlight blue /
+  color: #f5f7fa; */
 }
 
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
+.devtools-toolbarbutton[checked=true]:hover {
 }
 
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-box-align: center;
+.devtools-option-toolbarbutton {
+  list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
+/*  background: none;
+  border: none; */
+}
+
+.devtools-option-toolbarbutton:hover,
+.devtools-option-toolbarbutton[open=true] {
+  list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
 }
 
 /* Toolbar button groups */
 .devtools-toolbarbutton-group > .devtools-toolbarbutton {
 }
 
-.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-of-type {
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
 }
 
-.devtools-toolbarbutton-group {
-/*
-  margin: 0 2px;
-  -moz-padding-end: 2px;
-  border-left: 3px solid #000000;
-  border-right: 3px solid #000000;
-*/
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+}
+
+.devtools-separator + .devtools-toolbarbutton {
 }
 
 /* Text input */
@@ -491,8 +517,9 @@ devtools-menulist:-moz-focusring,
 }
 
 .devtools-searchinput {
-/*  padding-top: 3px;
-  padding-bottom: 3px;*/
+/*  margin-top: 1px;
+  margin-bottom: 1px;
+  padding: 0;*/
   -moz-padding-start: 22px;
   -moz-padding-end: 12px;
   background-position: 8px center;
@@ -667,15 +694,20 @@ devtools-menulist:-moz-focusring,
 #toolbox-dock-side:hover {
 }
 
-#toolbox-controls-separator {
+.devtools-separator {
+  margin: 0 2px;
   width: 2px;
 }
 
-#toolbox-buttons:empty + #toolbox-controls-separator,
-#toolbox-controls-separator[invisible] {
+#toolbox-buttons:empty + .devtools-separator,
+.devtools-separator[invisible] {
   visibility: hidden;
 }
 
+#toolbox-controls-separator {
+  margin: 0;
+}
+
 /* Command buttons */
 
 .command-button {
diff --git a/LCARStrek/browser/devtools/debugger.css b/LCARStrek/browser/devtools/debugger.css
index cae4aa7e..57cf8b38 100644
--- a/LCARStrek/browser/devtools/debugger.css
+++ b/LCARStrek/browser/devtools/debugger.css
@@ -541,11 +541,6 @@ window {
 
 /* Toolbar controls */
 
-.devtools-sidebar-tabs > tabs > tab {
-/*  min-height: 24px !important;
-  padding: 0 !important; */
-}
-
 #toggle-panes {
   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css
index 00adc32c..6dddd3d9 100644
--- a/LCARStrek/browser/devtools/netmonitor.css
+++ b/LCARStrek/browser/devtools/netmonitor.css
@@ -17,9 +17,13 @@ window {
   color: #FF9F00;
 }
 
+#notice-perf-message {
+  margin-top: 2px;
+}
+
 #requests-menu-perf-notice-button {
   min-width: 30px;
-  min-height: 28px;
+  min-height: 26px;
   margin: 0;
   list-style-image: url("profiler-stopwatch.svg");
 }
@@ -28,6 +32,11 @@ window {
   display: none;
 }
 
+#requests-menu-reload-notice-button {
+  min-height: 26px;
+  margin: 0;
+}
+
 /* Network requests table */
 
 #requests-menu-toolbar {
diff --git a/LCARStrek/browser/devtools/shadereditor.css b/LCARStrek/browser/devtools/shadereditor.css
index 07b474a6..c03bea59 100644
--- a/LCARStrek/browser/devtools/shadereditor.css
+++ b/LCARStrek/browser/devtools/shadereditor.css
@@ -34,10 +34,6 @@ window {
   -moz-margin-end: 6px;
 }
 
-#requests-menu-reload-notice-button {
-  min-height: 2em;
-}
-
 /* Shaders pane */
 
 #shaders-pane {
diff --git a/LCARStrek/browser/devtools/styleeditor.css b/LCARStrek/browser/devtools/styleeditor.css
index d2ff074f..cda30c3f 100644
--- a/LCARStrek/browser/devtools/styleeditor.css
+++ b/LCARStrek/browser/devtools/styleeditor.css
@@ -107,15 +107,14 @@ window:not([windowtype]) {
 }
 
 .stylesheet-sidebar {
-  width: 230px;
-}
+  width: 237px;
+  -moz-border-start: 1px solid;
 
-.stylesheet-sidebar {
-  border-left: 1px solid #9C9CFF;
+  border-color: #9C9CFF; /* Splitters */
 }
 
 .media-rule-label {
-  border-bottom: 1px solid #A09090;
+  border-bottom: 1px solid #A09090; /* Grey */
 }
 
 .media-rule-label {
@@ -123,6 +122,10 @@ window:not([windowtype]) {
   cursor: pointer;
 }
 
+.media-rule-line {
+  -moz-padding-start: 4px;
+}
+
 .media-condition-unmatched {
   color: #8050B0;
 }
diff --git a/LCARStrek/browser/devtools/webaudioeditor.css b/LCARStrek/browser/devtools/webaudioeditor.css
index f6d13bf6..a93d2fc2 100644
--- a/LCARStrek/browser/devtools/webaudioeditor.css
+++ b/LCARStrek/browser/devtools/webaudioeditor.css
@@ -85,12 +85,6 @@ g.selected text {
   transition: opacity .5s ease-out 0s;
 }
 
-@media (min-resolution: 2dppx) {
-  .web-audio-inspector .error {
-    background-image: url(alerticon-warning@2x.png);
-  }
-}
-
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css
index dd6e6416..84012a05 100644
--- a/LCARStrek/browser/devtools/webconsole.css
+++ b/LCARStrek/browser/devtools/webconsole.css
@@ -199,10 +199,6 @@ a {
   -moz-user-focus: normal;
 }
 
-.webconsole-filter-button[checked] {
-  /* color: white !important; */
-}
-
 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
   content: "";
   display: inline-block;
@@ -495,53 +491,28 @@ a {
 }
 
 /* Replace these values with CSS variables as available */
-.theme-dark .jsterm-input-container {
-  background-color: #000000; /* tabToolbarBackgroundColor */
-  border-color: #9C9CFF; /* mainBackgroundColor */
-}
-
-.theme-dark .jsterm-input-node {
-  color: #E7ADE7; /* textColor */
-}
-
-.theme-dark .jsterm-complete-node {
-  color: #A09090; /* commentColor */
-}
-
-.theme-dark .navigation-marker .url {
-  background: #000000; /* mainBackgroundColor */
-}
-
-.theme-dark .inlined-variables-view iframe {
-  border-color: #A09090;
-}
-
-.theme-dark .stacktrace {
-  border-color: #A09090;
-}
-
-.theme-light .jsterm-input-container {
+.jsterm-input-container {
   background-color: #000000; /* tabToolbarBackgroundColor */
   border-color: #9C9CFF; /* mainBackgroundColor */
 }
 
-.theme-light .jsterm-input-node {
+.jsterm-input-node {
   color: #E7ADE7; /* textColor */
 }
 
-.theme-light .jsterm-complete-node {
+.jsterm-complete-node {
   color: #A09090; /* commentColor */
 }
 
-.theme-light .navigation-marker .url {
+.navigation-marker .url {
   background: #000000; /* mainBackgroundColor */
 }
 
-.theme-light .inlined-variables-view iframe {
+.inlined-variables-view iframe {
   border-color: #A09090;
 }
 
-.theme-dark .stacktrace {
+.stacktrace {
   border-color: #A09090;
 }
 
@@ -549,7 +520,7 @@ a {
   .message > .timestamp {
     display: none;
   }
-  .toolbarbutton-text {
+  .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
     display: none;
   }
   .hud-console-filter-toolbar .webconsole-filter-button {
@@ -559,8 +530,8 @@ a {
     min-width: 25px;
   }
   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12x;
     margin-left: 1px;
   }
   .toolbarbutton-menubutton-dropmarker {
diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index 73e223eb..44945874 100644
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -50,13 +50,8 @@
 .breadcrumbs-widget-container {
   -moz-margin-start: 2px;
   -moz-margin-start: 2px;
-  max-height: 25px; /* Set max-height for proper sizing on linux */
-  height: 25px; /* Set height to prevent starting small waiting for content */
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-/*  margin: -1px 0;*/
+  max-height: 24px; /* Set max-height for proper sizing on linux */
+  height: 24px; /* Set height to prevent starting small waiting for content */
 }
 
 .scrollbutton-up,
@@ -151,7 +146,7 @@
 #breadcrumb-separator-after,
 #breadcrumb-separator-normal {
   width: 12px;
-  height: 25px;
+  height: 24px;
   overflow: hidden;
 }
 
@@ -180,14 +175,14 @@
   content: "";
   display: block;
   width: 25px;
-  height: 25px;
+  height: 24px;
   transform: translateX(-18px) rotate(45deg);
   box-sizing: border-box;
 }
 
 .breadcrumbs-widget-item {
   background-color: #000000;
-  min-height: 25px;
+  min-height: 24px;
   min-width: 65px;
   margin: 0;
   padding: 0 8px 0 20px;
@@ -511,8 +506,12 @@
   color: inherit !important;
 }
 
-.variable-or-property > .title > .arrow {
-  -moz-margin-start: 3px;
+.variables-view-container .theme-twisty {
+  margin: 2px;
+}
+
+.variable-or-property > .title > .theme-twisty {
+  -moz-margin-start: 5px;
 }
 
 .variable-or-property:not([untitled]) > .variables-view-element-details {
@@ -759,43 +758,17 @@
 
 /* Variables and properties searching */
 
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
 .variable-or-property[unmatched] {
   border: none;
   margin: 0;
 }
 
-/* Expand/collapse arrow */
-
-.arrow {
-  background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
-  width: 9px;
-  height: 16px;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-}
-
-.variables-view-scope > .title > .arrow {
-  background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
-}
-
-.arrow[open] {
-  background-image: url("chrome://global/skin/tree/twisty-open.gif");
-}
-
-.variables-view-scope > .title > .arrow[open] {
-  background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
-}
+/* Canvas graphs */
 
-.arrow[invisible] {
-  visibility: hidden;
+.graph-widget-container {
+  position: relative;
 }
 
-/* Canvas graphs */
-
 .graph-widget-canvas {
   width: 100%;
   height: 100%;
@@ -829,12 +802,8 @@
 
 /* Line graph widget */
 
-.line-graph-widget-container {
-  position: relative;
-}
-
 .line-graph-widget-canvas {
-  background: #0088cc;
+  background: #000000;
 }
 
 .line-graph-widget-gutter {
@@ -941,6 +910,46 @@
   color: #FF9F00;
 }
 
+/* Bar graph widget */
+
+.bar-graph-widget-canvas {
+  background: #000000;
+}
+
+.bar-graph-widget-legend {
+  position: absolute;
+  top: 4px;
+  left: 8px;
+  color: #A09090;
+  font-size: 80%;
+}
+
+.bar-graph-widget-legend-item {
+  float: left;
+ -moz-margin-end: 8px;
+}
+
+.bar-graph-widget-legend-item > [view="color"],
+.bar-graph-widget-legend-item > [view="label"] {
+  vertical-align: middle;
+}
+
+.bar-graph-widget-legend-item > [view="color"] {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #9C9CFF;
+  border-radius: 1px;
+  -moz-margin-end: 4px;
+}
+
+.bar-graph-widget-legend-item > [view="label"] {
+/*  text-shadow: 1px  0px rgba(255,255,255,0.8),
+              -1px  0px rgba(255,255,255,0.8),
+               0px -1px rgba(255,255,255,0.8),
+               0px  1px rgba(255,255,255,0.8);*/
+}
+
 /* Charts */
 
 .generic-chart-container {
diff --git a/LCARStrek/browser/newtab/controls.svg b/LCARStrek/browser/newtab/controls.svg
new file mode 100644
index 00000000..5455d611
--- /dev/null
+++ b/LCARStrek/browser/newtab/controls.svg
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+     id="icons-enhanced-tiles"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="288"
+     height="32"
+     viewBox="0 0 288 32">
+
+  <defs>
+    <style type="text/css"><![CDATA[
+      /* Glyph Styles */
+
+      .glyphShape-style {
+        fill: #FFCF00;
+      }
+
+      .glyphShape-style-pin {
+        fill: #FFCF00;
+      }
+
+      .glyphShape-style-hover-gear {
+        fill: #000000;
+      }
+
+      .glyphShape-style-hover-pin {
+        fill: #000000;
+      }
+
+      .glyphShape-style-hover-delete {
+        fill: #FF0000;
+      }
+
+      .glyphShape-style-hover-active {
+        fill: #000000;
+      }
+
+      /* Circle Background Styles */
+
+      .glyphShape-style-circle {
+        fill: #000000;
+      }
+      .glyphShape-style-circle-hover {
+        fill: #FFCF00;
+      }
+      .glyphShape-style-circle-active {
+        fill: #FF9F00;
+      }
+
+      .glyphShape-style-circle-dropshadow {
+        fill: #A09090;
+        fill-opacity: .5;
+        filter: url(#filter-shadow-drop);
+      }
+      ]]></style>
+
+    <filter id="filter-shadow-drop" x="-10%" y="-10%" width="120%" height="120%">
+      <feOffset in="SourceAlpha" dx="0" dy=".75" result="filter-shadow-drop-offset" />
+      <feGaussianBlur in="filter-shadow-drop-offset" stdDeviation="1" result="filter-shadow-drop-blur"/>
+    </filter>
+
+    <path    id="glyphShape-gear" d="M28,16c0-1.7,0.9-3.1,2-3.3c-0.4-1.5-0.9-2.9-1.7-4.2c-0.9,0.7-2.6,0.3-3.8-0.9c-1.2-1.2-1.6-2.8-0.9-3.8 c-1.3-0.8-2.7-1.4-4.2-1.7c-0.2,1.1-1.6,2-3.3,2S13,3.1,12.8,2c-1.5,0.4-2.9,0.9-4.2,1.7c0.7,0.9,0.3,2.6-0.9,3.8 c-1.4,1.1-3,1.5-4,0.9C2.9,9.7,2.4,11.2,2,12.7c1.1,0.2,2,1.6,2,3.3s-0.9,3.1-2,3.3c0.4,1.5,0.9,2.9,1.7,4.2 c0.9-0.7,2.6-0.3,3.8,0.9c1.2,1.2,1.6,2.8,0.9,3.8c1.3,0.8,2.7,1.4,4.2,1.7c0.2-1.1,1.6-2,3.3-2s3.1,0.9,3.3,2 c1.5-0.4,2.9-0.9,4.2-1.7c-0.7-0.9-0.3-2.6,0.9-3.8c1.3-1.2,2.8-1.6,3.8-0.9c0.8-1.3,1.4-2.7,1.7-4.2C28.9,19.1,28,17.7,28,16z M16,24c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S20.4,24,16,24z" />
+
+    <circle  id="glyphShape-circle" cx="16" cy="16" r="14" />
+
+    <path    id="glyphShape-pin" d="M19,15v-5h2V7H11v3h2v5l-3,2v2h5c0,4.5,0.4,8,1,8s1-3.5,1-8h5v-2L19,15z" />
+    <polygon id="glyphShape-delete" points="23,11 21,9 16,14 11,9 9,11 14,16 9,21 11,23 16,18 21,23 23,21 18,16" />
+
+  </defs>
+
+  <g id="icon-gear-default">
+    <use xlink:href="#glyphShape-gear"   class="glyphShape-style" />
+  </g>
+
+  <g id="icon-gear-default" transform="translate(32)">
+    <use xlink:href="#glyphShape-gear"   class="glyphShape-style-hover-gear" />
+  </g>
+
+  <g id="icon-pin-default" transform="translate(64)">
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle" />
+    <use xlink:href="#glyphShape-pin"    class="glyphShape-style" />
+  </g>
+
+  <g id="icon-pin-hover" transform="translate(96)">
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-hover" />
+    <use xlink:href="#glyphShape-pin"    class="glyphShape-style-hover-pin" />
+  </g>
+
+  <g id="icon-pin-hover-active" transform="translate(128)">
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-active" />
+    <use xlink:href="#glyphShape-pin"    class="glyphShape-style-hover-active" />
+  </g>
+
+  <g id="icon-delete-default" transform="translate(160)">
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle" />
+    <use xlink:href="#glyphShape-delete" class="glyphShape-style" />
+  </g>
+
+  <g id="icon-delete-hover" transform="translate(192)">
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-hover" />
+    <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-delete" />
+  </g>
+
+  <g id="icon-delete-hover-active" transform="translate(224)">
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-active" />
+    <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-active" />
+  </g>
+
+  <g id="icon-pin-default" transform="translate(256)">
+    <use xlink:href="#glyphShape-pin"    class="glyphShape-style-pin" />
+  </g>
+
+</svg>
diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css
index b9d018fd..4f8fe0e3 100644
--- a/LCARStrek/browser/newtab/newTab.css
+++ b/LCARStrek/browser/newtab/newTab.css
@@ -10,12 +10,15 @@
 }
 
 /* SCROLLBOX */
-#newtab-scrollbox:not([page-disabled]),
-#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
+#newtab-scrollbox:not([page-disabled]) {
   color: #FF9F00;
   background-color: #000000;
 }
 
+#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
+  background: inherit;
+}
+
 /* UNDO */
 #newtab-undo-container {
   padding: 4px 3px;
@@ -64,10 +67,6 @@
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-#newtab-undo-close-button > .toolbarbutton-text {
-  display: none;
-}
-
 #newtab-undo-close-button:-moz-focusring {
   outline: 1px dotted;
 }
@@ -85,6 +84,23 @@
   background-position: -232px 0;
 }
 
+/* CUSTOMIZE */
+#newtab-customize-button,
+.newtab-customize {
+  background-color: transparent;
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 32, 32, 0);
+  background-size: 28px;
+  border: none;
+  border-radius: 3px;
+  height: 28px;
+  width: 28px;
+}
+
+#newtab-customize-button:-moz-any(:hover, :active, [active]) {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 64, 32, 32);
+  background-color: #FFCF00;
+}
+
 /* ROWS */
 .newtab-row {
   margin-bottom: 20px;
@@ -109,7 +125,8 @@
 }
 
 .newtab-cell:empty {
-  border: 1px dashed;
+  outline: 2px dashed #A09090;
+  -moz-outline-radius: 2px;
 }
 
 .newtab-row > .newtab-cell:last-child {
@@ -136,15 +153,26 @@
   background-color: #002121;
 }
 
+/* LINKS */
+.newtab-link {
+  border-radius: 3px;
+}
+
 /* THUMBNAILS */
 .newtab-thumbnail {
   background-origin: padding-box;
   background-clip: padding-box;
   background-repeat: no-repeat;
   background-size: cover;
+  transition: opacity 100ms ease-out;
+}
+
+.newtab-site:hover .newtab-thumbnail.enhanced-content {
+  opacity: 0;
 }
 
 .newtab-site[type=affiliate] .newtab-thumbnail,
+.newtab-site[type=enhanced] .newtab-thumbnail,
 .newtab-site[type=organic] .newtab-thumbnail,
 .newtab-site[type=sponsored] .newtab-thumbnail {
   background-position: center center;
@@ -152,6 +180,7 @@
 }
 
 /* TITLES */
+.newtab-sponsored,
 .newtab-title {
   padding: 0 8px;
   background-color: rgba(255,159,0,.8);
@@ -164,55 +193,61 @@
   -moz-padding-end: 24px;
 }
 
-/* CONTROLS */
-.newtab-control {
-  width: 24px;
-  height: 24px;
-  padding: 1px 2px 3px;
-  border: none;
-  background: transparent url("chrome://browser/skin/newtab/controls.png");
+.newtab-site:hover .newtab-title {
+  background-color: #FFCF00;
 }
 
-.newtab-control-pin:hover {
-  background-position: -24px 0;
+.newtab-site[pinned] .newtab-title {
+  padding: 0 15px;
 }
 
-.newtab-control-pin:active {
-  background-position: -48px 0;
+.newtab-site[pinned] .newtab-title::before {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
+  background-size: 10px;
+  content: "";
+  height: 17px;
+  left: 0;
+  position: absolute;
+  width: 10px;
 }
 
-.newtab-control-pin[pinned] {
-  background-position: -72px 0;
+.newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before {
+  left: auto;
+  right: 0;
 }
 
-.newtab-control-pin[pinned]:hover {
-  background-position: -96px 0;
-}
-
-.newtab-control-pin[pinned]:active {
-  background-position: -120px 0;
+/* CONTROLS */
+.newtab-control {
+  background-color: transparent;
+  background-size: 24px;
+  border: none;
+  height: 24px;
+  width: 24px;
 }
 
-.newtab-control-block {
-  background-position: -144px 0;
+.newtab-control-pin,
+.newtab-site[pinned] .newtab-control-pin:hover:active {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
 }
 
-.newtab-control-block:hover {
-  background-position: -168px 0;
+.newtab-control-pin:hover,
+.newtab-site[pinned] .newtab-control-pin:hover {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
 }
 
-.newtab-control-block:active {
-  background-position: -192px 0;
+.newtab-control-pin:hover:active,
+.newtab-site[pinned] .newtab-control-pin {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
 }
 
-.newtab-control-sponsored {
-  background-position: -249px -1px;
+.newtab-control-block {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
 }
 
-.newtab-control-sponsored:hover {
-  background-position: -265px -1px;
+.newtab-control-block:hover {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
 }
 
-.newtab-control-sponsored[panelShown] {
-  background-position: -281px -1px;
+.newtab-control-block:hover:active {
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
 }
diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css
index d6a3c75d..c5346dc1 100644
--- a/LCARStrek/browser/preferences/in-content/preferences.css
+++ b/LCARStrek/browser/preferences/in-content/preferences.css
@@ -290,6 +290,11 @@ radio {
   color: #000000;
 }
 
+#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
+  border-top: 1px dotted #000000;
+  border-bottom: 1px dotted #000000;
+}
+
 .category-name {
   line-height: 22px;
   font-size: 1.25rem;
@@ -498,6 +503,7 @@ filefield {
   overflow-y: auto;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+  height: 500px;
 }
 
 #handersView > listheader > treecol {
-- 
2.43.0