From 60156ae2942f9e0388417766c47ff8d8ab79369b Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Mon, 21 Nov 2016 18:49:52 +0100
Subject: [PATCH] improve devtools looks somewhat and make them work up to
 current nightly

---
 LCARStrek/devtools/common.css                 |  21 ++
 LCARStrek/devtools/dark-theme.css             |  15 +-
 .../images/breadcrumbs-divider@2x.png         | Bin 210 -> 210 bytes
 LCARStrek/devtools/inspector.css              | 141 ++++++++++--
 LCARStrek/devtools/performance.css            |  12 +-
 LCARStrek/devtools/rules.css                  |   7 +
 LCARStrek/devtools/toolbars.css               | 153 +++++++++++-
 LCARStrek/devtools/toolbox.css                |  20 +-
 LCARStrek/devtools/variables.css              |   6 +-
 LCARStrek/devtools/webconsole.css             | 217 ++++++++++++++++--
 LCARStrek/devtools/widgets.css                |  31 ++-
 11 files changed, 553 insertions(+), 70 deletions(-)

diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css
index f3e8d0ba..c11ffd4e 100644
--- a/LCARStrek/devtools/common.css
+++ b/LCARStrek/devtools/common.css
@@ -159,3 +159,24 @@ input[type="checkbox"]:-moz-focusring,
 checkbox:-moz-focusring {
   outline: none;
 }
+
+
+:root {
+  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+}
+
+.devtools-button.devtools-clear-icon::before {
+  background-image: var(--clear-icon-url);
+}
+
+.devtools-button.devtools-filter-icon::before {
+  background-image: var(--filter-image);
+}
+
+.devtools-toolbarbutton.devtools-clear-icon {
+  list-style-image: var(--clear-icon-url);
+}
+
+.devtools-option-toolbarbutton {
+  list-style-image: var(--tool-options-image);
+}
diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css
index ad4c3ebf..7ecfc02f 100644
--- a/LCARStrek/devtools/dark-theme.css
+++ b/LCARStrek/devtools/dark-theme.css
@@ -383,18 +383,29 @@ div.CodeMirror span.eval-text {
 
 .devtools-textinput,
 .devtools-searchinput,
-.devtools-filterinput {
+.devtools-filterinput,
+.devtools-plaininput {
   background-color: #000000;
   color: #E7ADE7;
   border: 1px solid #9C9CFF;
+  border-radius: 3px;
 }
 
 .devtools-textinput:focus,
 .devtools-searchinput:focus,
-.devtools-filterinput:focus {
+.devtools-filterinput:focus,
+.devtools-plaininput:focus {
   border-color: #008484;
 }
 
+.devtools-textinput::-moz-placeholder,
+.devtools-searchinput::-moz-placeholder,
+.devtools-filterinput::-moz-placeholder,
+.devtools-plaininput::-moz-placeholder {
+  color: #8050B0;
+  opacity: 1.0;
+}
+
 .CodeMirror-Tern-fname {
   color: #A09090;
 }
diff --git a/LCARStrek/devtools/images/breadcrumbs-divider@2x.png b/LCARStrek/devtools/images/breadcrumbs-divider@2x.png
index 086daac9980e635a015b4f99aad7cf68e39c206f..3f057d2e904f63f7d24ae4b706950ddf36f2f74f 100644
GIT binary patch
delta 34
ncmcb_c!_a>CKm%3EKT2eexk7j*8^@*Mp4!6U+RBNER6*KvUUr`

delta 34
scmV+-0Nwx60n!1GDGJYff1I5E{CFR=kux|7-US5!5DKx$Q}U5@T?)Al+yDRo

diff --git a/LCARStrek/devtools/inspector.css b/LCARStrek/devtools/inspector.css
index 76d86813..1d5f1f67 100644
--- a/LCARStrek/devtools/inspector.css
+++ b/LCARStrek/devtools/inspector.css
@@ -10,13 +10,69 @@ window {
   padding: 0;
 }
 
-:root.theme-dark {
+:root {
   --breadcrumbs-border-color: #9C9CFF;
 }
 
+* {
+  box-sizing: border-box;
+}
+
+/* Make sure to hide scroll bars for the parent window */
+window {
+  overflow: hidden;
+}
+
+/* The main Inspector panel container. */
+.inspector-responsive-container {
+  height: 100vh;
+}
+
+/* The main panel layout. This area consists of a toolbar, markup view
+  and breadcrumbs bar. */
+#inspector-main-content {
+  /* Subtract 1 pixel from the panel height. It's puzzling why this
+    is needed, but if not presented the entire Inspector panel
+    content jumps 1 pixel up when the Toolbox is opened. */
+  height: calc(100% - 1px);
+  /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
+     See bug 1307408 comment #12. */
+  min-width: 125px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
+/* Inspector Panel Splitter */
+
+#inspector-splitter-box {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+}
+
+/* Minimum dimensions for the Inspector splitter areas. */
+#inspector-splitter-box .uncontrolled,
+#inspector-splitter-box .controlled {
+  min-height: 50px;
+  min-width: 50px;
+  overflow-x: hidden;
+}
+
+/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
+   the sidebar tab to small width. If a specific panel supports smaller width, this should
+   be overridden on a panel-by-panel basis */
+.inspector-tabpanel {
+  min-width: 200px;
+}
+
+#inspector-splitter-box .controlled.pane-collapsed {
+  visibility: collapse;
+}
+
 /* Use flex layout for the Inspector toolbar. For now, it's done
    specifically for the Inspector toolbar since general rule applied
-   on .devtools-toolbar breaks breadcrubs and also toolbars in other
+   on .devtools-toolbar breaks breadcrumbs and also toolbars in other
    panels (e.g. webconsole, debugger), these are not ready for HTML
    layout yet. */
 #inspector-toolbar.devtools-toolbar {
@@ -28,6 +84,13 @@ window {
   display: inline-block;
 }
 
+/* Add element toolbar button */
+#inspector-element-add-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  list-style-image: url("chrome://devtools/skin/images/add.svg");
+  -moz-user-focus: normal;
+}
+
 #inspector-searchlabel {
   overflow: hidden;
 }
@@ -40,18 +103,45 @@ window {
   line-height: 19px;
 }
 
+#inspector-search {
+  flex: unset;
+}
+
+/* Eyedropper toolbar button */
+
+#inspector-eyedropper-toggle {
+  /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
+  pointer-events: auto;
+}
+
+#inspector-eyedropper-toggle::before {
+  background-image: var(--eyedropper-image);
+}
+
+#inspector-sidebar-toggle-box {
+  line-height: initial;
+}
+
 #inspector-breadcrumbs-toolbar {
   padding: 0px;
   border-bottom-width: 0px;
-  border-top-width: 1px;
-  border-top-color: var(--breadcrumbs-border-color);
+/*  border-top-width: 1px;
+  border-top-color: var(--breadcrumbs-border-color);*/
   /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
      get mistaken as a splitter */
-  background-color: var(--theme-body-background);
+  background-color: var(--theme-alternate-toolbar-background);
+  background-image: none;
+  background-size: auto;
   display: block;
   position: relative;
 }
 
+/* Remove LCARS startcap and endcap */
+div#inspector-breadcrumbs-toolbar::before,
+div#inspector-breadcrumbs-toolbar::after {
+  display: none;
+}
+
 #inspector-breadcrumbs-toolbar,
 #inspector-breadcrumbs-toolbar * {
   box-sizing: border-box;
@@ -59,6 +149,7 @@ window {
 
 #inspector-breadcrumbs {
   display: flex;
+
   /* Break out of the XUL flexbox, so the splitter can still shrink the
      markup view even if the contents of the breadcrumbs are wider than
      the new width. */
@@ -85,22 +176,25 @@ window {
 #inspector-breadcrumbs .breadcrumbs-widget-item {
   white-space: nowrap;
   flex-shrink: 0;
-  font: message-box;
+  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 }
 
-#inspector-eyedropper-toggle {
-  /* hidden by default, until we can check that the required highlighter exists */
-   display: none;
+#inspector-sidebar-container {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
 }
 
-#inspector-eyedropper-toggle::before {
-  background-image: var(--eyedropper-image);
+#inspector-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
-/* Add element toolbar button */
-#inspector-element-add-button::before {
-  background-image: url("chrome://devtools/skin/images/add.svg");
-  list-style-image: url("chrome://devtools/skin/images/add.svg");
+/* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
+.inspector-tabpanel > * {
   -moz-user-focus: normal;
 }
 
@@ -112,3 +206,20 @@ window {
   text-align: center;
   margin: 5px;
 }
+
+/* Markup Box */
+
+iframe {
+  border: 0;
+}
+
+#markup-box {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+#markup-box > iframe {
+  height: 100%;
+  width: 100%;
+}
diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css
index 1fd9412e..d2759987 100644
--- a/LCARStrek/devtools/performance.css
+++ b/LCARStrek/devtools/performance.css
@@ -70,17 +70,27 @@
 /* Recording buttons */
 
 #recordings-controls {
-  background-color: #9C9CFF;
+/*  background-color: #9C9CFF;*/
+  display: flex;
+}
+
+#recording-controls-mount,
+#recording-controls-mount > div,
+#recording-controls-mount > div > .devtools-toolbar {
+  display: flex;
+  flex: 1 1 auto;
 }
 
 #clear-button::before {
   background-image: var(--clear-icon-url);
 }
 
+#main-record-button > image,
 #main-record-button::before {
   background-image: url(images/profiler-stopwatch-tbutton.svg);
 }
 
+#import-button > image,
 #import-button::before {
   background-image: url(images/import.svg);
 }
diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css
index 08f320a2..863b473e 100644
--- a/LCARStrek/devtools/rules.css
+++ b/LCARStrek/devtools/rules.css
@@ -32,6 +32,13 @@
   height: auto;
 }
 
+/* Remove LCARS startcap and endcap */
+/* XXX: We actually should add them via the #ruleview-toolbar again */
+div#ruleview-toolbar-container::before,
+div#ruleview-toolbar-container::after {
+  display: none;
+}
+
 #ruleview-toolbar {
   display: flex;
 }
diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index ea1816d2..ee12919a 100644
--- a/LCARStrek/devtools/toolbars.css
+++ b/LCARStrek/devtools/toolbars.css
@@ -24,6 +24,17 @@
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
+  padding: 0;
+  border-width: 0;
+/*  border-bottom-width: 1px;*/
+  border-style: solid;
+/*  height: 24px;
+  line-height: 24px;*/
+  box-sizing: border-box;
+  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
+}
+.devtools-toolbar {
+  height: 24px;
 }
 
 .devtools-toolbar {
@@ -43,6 +54,65 @@
 .devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
 }
 
+/* HTML Checkboxes - a lot copied from global/in-content/common.css */
+/* Hide the actual checkbox */
+input[type="checkbox"]:not(#browser-style-checkbox) { /* not() is workaround for old placement of checkbox in label */
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+input[type="checkbox"] + label::before {
+  display: inline-block;
+  content: "";
+  vertical-align: middle;
+}
+
+.devtools-searchbox + #browser-style-checkbox-label, /* workaround for old placement of checkbox in label */
+input[type="checkbox"] + label {
+  line-height: 0px;
+  color: var(--theme-capped-toolbar-text);
+}
+
+input[type="checkbox"] + label::before {
+  -moz-appearance: none;
+  width: 13px;
+  height: 13px;
+  border-radius: 0;
+  border: 1px solid var(--theme-body-color);
+  margin-inline-end: 3px;
+  margin-inline-start: 2px;
+  background-color: var(--theme-toolbar-background);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+input[type="checkbox"]:not(:disabled) + label:hover::before {
+  border-color: var(--theme-hover-background);
+}
+.devtools-searchbox + #browser-style-checkbox-label:hover, /* workaround for old placement of checkbox in label */
+input[type="checkbox"]:not(:disabled) + label:hover {
+  color: var(--theme-hover-background);
+}
+input[type="checkbox"]:checked + label::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check");
+}
+
+input[type="checkbox"]:checked:disabled + label::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
+}
+input[type="checkbox"]:checked:not(:disabled) + label:hover::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
+}
+input[type="checkbox"]:disabled + label::before {
+  border-color: var(--theme-body-color-inactive);
+}
+input[type="checkbox"]:disabled + label {
+  color: var(--theme-body-color-inactive);
+}
+
 .devtools-separator {
   margin: 0 2px;
   width: 2px;
@@ -52,6 +122,39 @@
   background-position: 0, 1px, 2px;
 }
 
+/* HTML toolbars - style them LCARStrek-like */
+
+div.devtools-toolbar {
+  background-size: calc(100% - 30px);
+  background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background));
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+}
+
+div.devtools-toolbar::before,
+div.devtools-toolbar::after {
+  display: flex;
+  content: "";
+  width: 12px;
+  min-height: 16px;
+  background-color: var(--theme-toolbar-caps);
+}
+
+div.devtools-toolbar::before {
+  border-radius: 8px 0px 0px 8px;
+  border: none;
+  border-inline-end: 3px solid black;
+  margin-inline-end: 2px;
+}
+
+div.devtools-toolbar::after {
+  border-radius: 0px 8px 8px 0px;
+  border: none;
+  border-inline-start: 3px solid black;
+  margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */
+}
+
 /* Toolbar buttons */
 
 .devtools-menulist,
@@ -121,7 +224,8 @@
 .devtools-button[standalone],
 .devtools-button[data-standalone],
 .devtools-toolbarbutton[standalone],
-.devtools-toolbarbutton[data-standalone] {
+.devtools-toolbarbutton[data-standalone],
+.menu-filter-button {
   border: none;
 /*  min-height: 32px; */
   background-color: var(--theme-button-background);
@@ -132,7 +236,8 @@
 .devtools-button[standalone]:hover,
 .devtools-button[data-standalone]:hover,
 .devtools-toolbarbutton[standalone]:hover,
-.devtools-toolbarbutton[data-standalone]:hover {
+.devtools-toolbarbutton[data-standalone]:hover,
+.menu-filter-button:hover {
   background-color: var(--theme-hover-background);
   color: var(--theme-hover-color);
 }
@@ -140,11 +245,21 @@
 .devtools-button[standalone]:hover:active,
 .devtools-button[data-standalone]:hover:active,
 .devtools-toolbarbutton[standalone]:hover:active,
-.devtools-toolbarbutton[data-standalone]:hover:active {
+.devtools-toolbarbutton[data-standalone]:hover:active,
+.menu-filter-button:hover:active {
   background-color: var(--theme-active-background);
   color: var(--theme-active-color);
 }
 
+.menu-filter-button.checked {
+  background: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.menu-filter-button + .menu-filter-button {
+  margin-inline-start: 2px;
+}
+
 .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
 }
 
@@ -353,7 +468,7 @@
 }
 
 .devtools-filterinput {
-  background-image: url(--filter-image);
+  background-image: var(--filter-image);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl),
@@ -412,7 +527,7 @@
 .devtools-rule-searchbox {
   -moz-box-flex: 1;
   width: 100%;
-  font: inherit;
+/*  font: inherit;*/
 }
 
 .devtools-rule-searchbox[filled] {
@@ -422,8 +537,8 @@
 }
 
 .devtools-style-searchbox-no-match {
-  background-color: var(--searcbox-no-match-background-color) !important;
-  border-color: var(--searcbox-no-match-border-color) !important;
+  background-color: var(--searchbox-no-match-background-color) !important;
+  border-color: var(--searchbox-no-match-border-color) !important;
 }
 
 .devtools-searchinput-clear {
@@ -558,6 +673,30 @@
 /*  background-color: var(--theme-splitter-color);*/
 }
 
+/* HACK around hardcoded stylings for the HTML-based sidebar tabs */
+.tabs .tabs-menu-item,
+.theme-dark .tabs .tabs-menu-item,
+.theme-light .tabs .tabs-menu-item {
+  margin: 0;
+  margin-inline-end: 3px !important;
+  padding: 0 !important;
+  border-radius: 8px 8px 0 0;
+  border: 0 !important;
+  background-color: var(--theme-button-background);
+}
+.tabs .tabs-menu-item a {
+  color: var(--theme-button-color) !important;
+  padding: 0px 3px !important;
+}
+.tabs .tabs-menu-item.is-active {
+  height: auto !important;
+}
+.tabs .tabs-navigation {
+  height: auto !important;
+  border: 0 !important;
+  border-bottom: 3px solid  var(--theme-body-background) !important;
+}
+
 /* Throbbers */
 
 .devtools-throbber::before {
diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css
index 448e1e9c..fa527f3c 100644
--- a/LCARStrek/devtools/toolbox.css
+++ b/LCARStrek/devtools/toolbox.css
@@ -45,6 +45,16 @@
   color: #FFCF00;
 }
 
+/* Set flex attribute to Toolbox buttons and Picker container so,
+   they don't overlapp with the tab bar */
+#toolbox-buttons {
+  display: flex;
+}
+
+#toolbox-picker-container {
+  display: flex;
+}
+
 /* Toolbox tabs */
 
 .devtools-tab {
@@ -65,12 +75,8 @@
   -moz-user-focus: normal;
   -moz-box-flex: 1;
 
-  color: #000000;
-  background-color: #C09070;
-}
-
-.theme-dark .devtools-tab:hover {
-  color: #ced3d9;
+  color: var(--theme-button-color);
+  background-color: var(--theme-button-background);
 }
 
 .devtools-tab:hover,
@@ -112,8 +118,8 @@
 }
 
 .devtools-tabbar .devtools-tab[selected] {
-  background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
 }
 
 #toolbox-tabs .devtools-tab[selected],
diff --git a/LCARStrek/devtools/variables.css b/LCARStrek/devtools/variables.css
index d1c68186..49f0a28a 100644
--- a/LCARStrek/devtools/variables.css
+++ b/LCARStrek/devtools/variables.css
@@ -23,11 +23,15 @@
 
   --theme-tab-toolbar-background: #402800;
   --theme-toolbar-background: #000000;
+  --theme-capped-toolbar-background: #9C9CFF;
+  --theme-capped-toolbar-text: #000000;
+  --theme-alternate-toolbar-background: #A09090;
+  --theme-toolbar-caps: #FF9F00;
   --theme-button-background: #C09070;
   --theme-button-color: #000000;
   --theme-hover-background: #FFCF00;
   --theme-hover-color: #000000;
-  --theme-active-background: #FFCF00;
+  --theme-active-background: #FF9F00;
   --theme-active-color: #000000;
   --theme-selection-background: #008484;
   --theme-selection-color: #000000;
diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css
index f99cd3e2..ce0d175d 100644
--- a/LCARStrek/devtools/webconsole.css
+++ b/LCARStrek/devtools/webconsole.css
@@ -7,6 +7,11 @@
 .theme-dark,
 .theme-light,
 .theme-firebug {
+  --error-color: #FF0000;
+  --error-background-color: #FF0000;
+  --error-background-text: #000000;
+  --warning-background-color: #FFCF00;
+  --warning-background-text: #000000;
 }
 
 window {
@@ -105,6 +110,12 @@ a {
   max-width: 40%;
 }
 
+.stack-trace {
+  /* The markup contains extra whitespace to improve formatting of clipboard text.
+     Make sure this whitespace doesn't affect the HTML rendering */
+  white-space: normal;
+}
+
 .stack-trace .frame-link-source,
 .message-location .frame-link-source {
   /* Makes the file name truncated (and ellipsis shown) on the left side */
@@ -138,6 +149,7 @@ a {
 }
 
 .message-flex-body > .message-body {
+  display: block;
   flex: auto;
 }
 
@@ -145,6 +157,7 @@ a {
   direction: ltr;
   overflow: auto;
   -moz-user-select: text;
+  position: relative;
 }
 
 /* The width on #output-container is set to a hardcoded px in webconsole.js
@@ -182,13 +195,18 @@ a {
   -moz-user-focus: normal;
 }
 
+.webconsole-filter-button > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal; /* saving vertical space in toolbar */
+}
+
 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
   content: "";
   display: inline-block;
   height: 8px;
   width: 8px;
   border-radius: 50%;
-  margin-inline-start: 5px;
+  margin-inline-start: 1px;
+  margin-inline-end: 3px;
   border-width: 1px;
   border-style: solid;
 }
@@ -203,8 +221,9 @@ a {
   background-color: var(--theme-contrast-background);
 }
 
-.message[severity=error] {
-  background-color: #FF0000;
+.message[severity=error],
+.message.error {
+  background-color: var(--error-background-color);
 }
 
 .console-string {
@@ -212,7 +231,7 @@ a {
 }
 
 .message[severity=error] .console-string {
-  color: #000000;
+  background-color: var(--error-background-text);
 }
 
 .theme-selected .console-string,
@@ -226,20 +245,24 @@ a {
   border-inline-end: solid var(--theme-body-color-alt) 6px;
 }
 
-.message[category=network][severity=error] > .icon::before {
+.message[category=network][severity=error] > .icon::before,
+.message.network.error > .icon::before {
   background-position: -12px 0;
 }
 
-.message[category=network] > .message-body {
+.message[category=network] > .message-body,
+.message.network > .message-body {
   display: flex;
   flex-wrap: wrap;
 }
 
-.message[category=network] .method {
+.message[category=network] .method,
+.message.network .method {
   flex: none;
 }
 
-.message[category=network]:not(.navigation-marker) .url {
+.message[category=network]:not(.navigation-marker) .url,
+.message.network:not(.navigation-marker) .url {
   flex: 1 1 auto;
   /* Make sure the URL is very small initially, let flex change width as needed. */
   width: 100px;
@@ -249,12 +272,14 @@ a {
   text-overflow: ellipsis;
 }
 
-.message[category=network] .status {
+.message[category=network] .status,
+.message.network .status {
   flex: none;
   margin-inline-start: 6px;
 }
 
-.message[category=network].mixed-content .url {
+.message[category=network].mixed-content .url,
+.message.network.mixed-content .url {
   color: var(--theme-highlight-red);
 }
 
@@ -263,7 +288,8 @@ a {
   margin: 0 6px;
 }
 
-.message[category=network] .xhr {
+.message[category=network] .xhr,
+.message.network .xhr {
   background-color: var(--theme-body-color-alt);
   color: var(--theme-body-background);
   border-radius: 3px;
@@ -281,15 +307,18 @@ a {
   border-color: #9C9CFF;
 }
 
-.message[category=cssparser] > .indent {
+.message[category=cssparser] > .indent,
+.message.cssparser > .indent {
   border-inline-end: solid #9C9CFF 6px;
 }
 
-.message[category=cssparser][severity=error] > .icon::before {
+.message[category=cssparser][severity=error] > .icon::before,
+.message.cssparser.error > .icon::before {
   background-position: -12px -12px;
 }
 
-.message[category=cssparser][severity=warn] > .icon::before {
+.message[category=cssparser][severity=warn] > .icon::before,
+.message.cssparser.warn > .icon::before {
   background-position: -24px -12px;
 }
 
@@ -299,15 +328,18 @@ a {
    border-color: #FF9F00;
 }
 
-.message[category=exception] > .indent {
+.message[category=exception] > .indent,
+.message.exception > .indent {
   border-inline-end: solid #FF9F00 6px;
 }
 
-.message[category=exception][severity=error] > .icon::before {
+.message[category=exception][severity=error] > .icon::before,
+.message.exception.error > .icon::before {
   background-position: -12px -24px;
 }
 
-.message[category=exception][severity=warn] > .icon::before {
+.message[category=exception][severity=warn] > .icon::before,
+.message.exception.warn > .icon::before {
   background-position: -24px -24px;
 }
 
@@ -317,7 +349,8 @@ a {
    border-color: #8050B0;
 }
 
-.message[category=console] > .indent {
+.message[category=console] > .indent,
+.message.console-api > .indent {
   border-inline-end: solid #8050B0 6px;
 }
 
@@ -344,21 +377,26 @@ a {
   border-color: #008484;
 }
 
-.message[category=server] > .indent {
+.message[category=server] > .indent,
+.message.server > .indent {
   border-inline-end: solid #8050B0 6px;
 }
 
 /* Input and output styles */
 .message[category=input] > .indent,
-.message[category=output] > .indent {
+.message[category=output] > .indent,
+.message.command > .indent,
+.message.result > .indent {
   border-inline-end: solid #A09090 6px;
 }
 
-.message[category=input] > .icon::before {
+.message[category=input] > .icon::before,
+.message.command > .icon::before {
   background-position: -48px -36px;
 }
 
-.message[category=output] > .icon::before {
+.message[category=output] > .icon::before,
+.message.result > .icon::before {
   background-position: -60px -36px;
 }
 
@@ -436,7 +474,8 @@ a {
 
 /* Security styles */
 
-.message[category=security] > .indent {
+.message[category=security] > .indent,
+.message.security > .indent {
   border-inline-end: solid #FF0000 6px;
 }
 
@@ -445,11 +484,13 @@ a {
   border-color: #FFCF00;
 }
 
-.message[category=security][severity=error] > .icon::before {
+.message[category=security][severity=error] > .icon::before,
+.message.security.error > .icon::before {
   background-position: -12px -48px;
 }
 
-.message[category=security][severity=warn] > .icon::before {
+.message[category=security][severity=warn] > .icon::before,
+.message.security.warn > .icon::before {
   background-position: -24px -48px;
 }
 
@@ -532,6 +573,7 @@ a.learn-more-link.webconsole-learn-more-link {
   filter: url(images/filters.svg#checked-icon-state);
 }
 
+.elementNode:hover .open-inspector:active,
 .open-inspector:active {
   filter: url(images/filters.svg#checked-icon-state);
 }
@@ -585,3 +627,128 @@ a.learn-more-link.webconsole-learn-more-link {
 :root[platform="win"] .hud-filter-box {
   width: 200px;
 }
+
+/* NEW CONSOLE STYLES */
+
+#output-wrapper > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+#output-container {
+  height: 100%;
+}
+
+.webconsole-output-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  -moz-user-focus: normal;
+}
+
+.webconsole-filterbar-wrapper {
+  flex-grow: 0;
+}
+
+.webconsole-output {
+  flex: 1;
+  overflow: auto;
+}
+
+.webconsole-filterbar-primary {
+  display: flex;
+}
+
+.devtools-toolbar.webconsole-filterbar-secondary {
+  height: initial;
+}
+
+.webconsole-filterbar-primary .devtools-plaininput {
+  flex: 1 1 100%;
+}
+
+.webconsole-output.hideTimestamps > .message > .timestamp {
+  display: none;
+}
+
+.message.startGroup .message-body,
+.message.startGroupCollapsed .message-body {
+  color: var(--theme-body-color);
+  font-weight: bold;
+}
+
+.webconsole-output-wrapper .message > .icon {
+  margin: 3px 0 0 0;
+  padding: 0 0 0 6px;
+}
+
+.message.error > .icon::before {
+  background-position: -12px -36px;
+}
+
+.message.warn > .icon::before {
+  background-position: -24px -36px;
+}
+
+.message.info > .icon::before {
+  background-position: -36px -36px;
+}
+
+.message.network .method {
+  margin-inline-end: 5px;
+}
+
+.webconsole-output-wrapper .message .indent {
+  display: inline-block;
+  border-inline-end: solid 1px var(--theme-splitter-color);
+}
+
+.message.startGroup .indent,
+.message.startGroupCollapsed .indent {
+  border-inline-end-color: transparent;
+  margin-inline-end: 5px;
+}
+
+.message.startGroup .icon,
+.message.startGroupCollapsed .icon {
+  display: none;
+}
+
+/* console.table() */
+.new-consoletable {
+  width: 100%;
+  border-collapse: collapse;
+  --consoletable-border: 1px solid var(--table-splitter-color);
+}
+
+.new-consoletable thead,
+.new-consoletable tbody {
+  background-color: var(--theme-body-background);
+}
+
+.new-consoletable th {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  margin: 0;
+  padding: 5px 0 0;
+  font-weight: inherit;
+  border-inline-end: var(--consoletable-border);
+  border-bottom: var(--consoletable-border);
+}
+
+.new-consoletable tr:nth-of-type(even) {
+  background-color: var(--table-zebra-background);
+}
+
+.new-consoletable td {
+  padding: 3px 4px;
+  min-width: 100px;
+  -moz-user-focus: normal;
+  color: var(--theme-body-color);
+  border-inline-end: var(--consoletable-border);
+  height: 1.25em;
+  line-height: 1.25em;
+}
diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css
index dc8e6e0f..686a686e 100644
--- a/LCARStrek/devtools/widgets.css
+++ b/LCARStrek/devtools/widgets.css
@@ -231,7 +231,7 @@
 }
 
 .breadcrumbs-widget-item {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--theme-capped-toolbar-background);
   min-height: 24px;
   min-width: 65px;
   margin: 0;
@@ -254,8 +254,8 @@
 
 .breadcrumbs-widget-item[siblings-menu-open],
 .breadcrumbs-widget-item:active {
-  background-color: #FF9F00;
-  color: #000000;
+  background-color: var(--theme-active-background);
+  color: var(--theme-active-color);
 }
 
 .breadcrumbs-widget-item:-moz-focusring {
@@ -278,16 +278,22 @@
 }
 
 .breadcrumbs-widget-item:not([checked]) {
-  background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
+  background-image: -moz-element(#breadcrumb-separator-normal);
+  background-repeat: no-repeat;
+  background-position: center left;
 }
 
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
-  background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
+  background-image: -moz-element(#breadcrumb-separator-after);
+  background-repeat: no-repeat;
+  background-position: 0 0;
 }
 
 .breadcrumbs-widget-item[checked] {
-  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
-  background-color: #008484; /* Select Highlight Blue */
+  background-image: -moz-element(#breadcrumb-separator-before);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-color: var(--theme-selection-background); /* Select Highlight Blue */
 }
 
 .breadcrumbs-widget-item:first-child {
@@ -321,27 +327,28 @@
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
-  color: var(--theme-highlight-lightorange);
+  color: var(--theme-button-color); /* --theme-highlight-lightorange */
 }
 
 .breadcrumbs-widget-item {
-  color: var(--theme-highlight-lightorange);
+  color: var(--theme-button-color); /* tag name, --theme-highlight-lightorange */
 }
 
+.breadcrumbs-widget-item:not([checked]):hover span,
 .breadcrumbs-widget-item:not([checked]):hover label {
   color: var(--theme-hover-color) !important;
 }
 
 .breadcrumbs-widget-item-id {
-  color: var(--theme-body-color-alt);
+  color: var(--theme-highlight-red); /* --theme-body-color-alt */
 }
 
 .breadcrumbs-widget-item-classes {
-  color: var(--theme-content-color1);
+  color: var(#402800); /* --theme-content-color1 */
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
-  color: var(--theme-highlight-lightorange);
+  color: var(--theme-button-color); /* --theme-highlight-lightorange */
 }
 
 /* SimpleListWidget */
-- 
2.35.3