From: Robert Kaiser <kairo@kairo.at>
Date: Fri, 27 Jan 2017 22:51:07 +0000 (+0100)
Subject: sync LCARStrek with Firefox 51 devtools theme changes
X-Git-Tag: LCARStrek-2.48~7
X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=ec6b35d822a99b5e8ed93538398ec054713bb38b;p=themes.git

sync LCARStrek with Firefox 51 devtools theme changes
---

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index eff25218..2212fea4 100644
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -4101,6 +4101,10 @@ html|*#gcli-output-frame {
   filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
 }
 
+.devtools-responsiveui-close > image {
+  filter: invert(1);
+}
+
 .devtools-responsiveui-rotate {
   list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
   -moz-image-region: rect(0px,16px,16px,0px);
diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css
index d76eda34..9bad1677 100644
--- a/LCARStrek/devtools/common.css
+++ b/LCARStrek/devtools/common.css
@@ -160,6 +160,249 @@ checkbox:-moz-focusring {
   outline: none;
 }
 
+/* Toolbar buttons */
+
+.devtools-menulist,
+.devtools-toolbarbutton,
+.devtools-button {
+}
+
+.devtools-menulist,
+.devtools-toolbarbutton {
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
+.devtools-button::before {
+  width: 16px;
+  height: 16px;
+/*  transition: opacity 0.05s ease-in-out;*/
+}
+
+/* HTML buttons */
+.devtools-button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  min-width: 18px;
+  height: 100%;
+  margin-inline-start: 2px;
+  background: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
+  /* The icon is absolutely positioned in the button using ::before */
+  position: relative;
+}
+
+.devtools-button:not([disabled]):hover {
+  background: var(--theme-hover-background);
+  color: var(--theme-hover-color);
+}
+
+.devtools-button:not([disabled]):hover:active {
+  background: var(--theme-active-background);
+  color: var(--theme-active-color);
+}
+
+/* Menu type buttons and checked states */
+.devtools-button[checked],
+.devtools-button.checked {
+  background: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.devtools-button::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+/*  background-size: cover;
+  background-repeat: no-repeat;*/
+/*  transition: opacity 0.05s ease-in-out;*/
+}
+
+.devtools-button:-moz-focusring {
+  outline: none;
+}
+
+/* Standalone buttons */
+.devtools-button[standalone],
+.devtools-button[data-standalone],
+.devtools-toolbarbutton[standalone],
+.devtools-toolbarbutton[data-standalone],
+.menu-filter-button {
+  border: none;
+/*  min-height: 32px; */
+  font: inherit;
+  background-color: var(--theme-button-background);
+  color: var(--theme-button-color);
+  border-radius: 300px;
+}
+
+.devtools-button[standalone]:hover,
+.devtools-button[data-standalone]:hover,
+.devtools-toolbarbutton[standalone]:hover,
+.devtools-toolbarbutton[data-standalone]:hover,
+.menu-filter-button:hover {
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
+}
+
+.devtools-button[standalone]:hover:active,
+.devtools-button[data-standalone]:hover:active,
+.devtools-toolbarbutton[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] {
+}
+
+.devtools-toolbarbutton[label][standalone] {
+}
+
+.devtools-menulist,
+.devtools-toolbarbutton,
+.devtools-button {
+  min-height: 18px;
+}
+
+/* Icon button styles */
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
+  min-width: 16px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-toolbar .devtools-toolbarbutton {
+  margin-inline-start: 2px;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-icon {
+}
+
+/* Menu button styles (eg. web console filters) */
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+/*  -moz-box-orient: horizontal; */
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+}
+
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+}
+
+.devtools-menulist > .menulist-dropmarker {
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+}
+
+/* Icon-only buttons */
+.devtools-button:empty::before,
+.devtools-toolbarbutton:not([label]):not([disabled]) > image {
+/*  opacity: 0.8;*/
+}
+
+.devtools-button:hover:empty::before,
+.devtools-button.checked:empty::before,
+.devtools-button[checked]:empty::before,
+.devtools-button[open]:empty::before,
+.devtools-button.checked::before,
+.devtools-toolbarbutton:not([label]):hover > image,
+.devtools-toolbarbutton:not([label])[checked=true] > image,
+.devtools-toolbarbutton:not([label])[open=true] > image {
+/*  opacity: 1;*/
+}
+
+.devtools-button:disabled,
+.devtools-button[disabled],
+.devtools-toolbarbutton[disabled] {
+  pointer-events: none;
+/*  opacity: 0.5 !important;*/
+}
+
+.devtools-button[standalone]::before,
+.devtools-button[data-standalone]::before,
+.devtools-button:not([disabled]):hover::before,
+.devtools-button:not([disabled]):hover:active::before,
+.devtools-button[checked]:empty::before,
+.devtools-button[open]:empty::before,
+.devtools-toolbarbutton[standalone] > image,
+.devtools-toolbarbutton[data-standalone] > image,
+.devtools-toolbarbutton:not([disabled]):hover > image,
+.devtools-toolbarbutton:not([disabled]):hover:active > image,
+.devtools-toolbarbutton[checked=true] > image,
+.devtools-toolbarbutton[open=true] > image {
+  filter: var(--checked-icon-filter);
+}
+
+.devtools-button[disabled]::before,
+.devtools-toolbarbutton[disabled] > image {
+  filter: url(images/filters.svg#disabled-icon-state);
+}
+
+/* Icon-and-text buttons */
+.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
+  margin-inline-start: .5em !important;
+  font-weight: 600;
+}
+
+/* Text-only buttons */
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.devtools-toolbarbutton[data-text-only],
+.devtools-button:not(:empty),
+#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+/*  background-color: rgba(0, 0, 0, .2); / Splitter */
+}
+
+/* Text-only button states */
+.devtools-button:not(:empty):not(:disabled):hover,
+#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
+/*  background: rgba(0, 0, 0, .3); / Splitters */
+}
+
+.devtools-button:not(:empty):not(:disabled):hover:active,
+#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
+/*  background: rgba(0, 0, 0, .4); / Splitters */
+}
+
+.devtools-toolbarbutton:not([disabled])[label][checked=true],
+.devtools-toolbarbutton:not([disabled])[label][open],
+.devtools-button:not(:empty)[checked=true],
+#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
+/*  background: rgba(29, 79, 115, .7); / Select highlight blue /
+  color: var(--theme-selection-color); */
+}
+
+.devtools-menulist[open=true],
+.devtools-toolbarbutton[open=true],
+.devtools-toolbarbutton[open=true]:hover,
+.devtools-toolbarbutton[open=true]:hover:active,
+.devtools-toolbarbutton[checked=true],
+.devtools-toolbarbutton[checked=true]:hover,
+#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+/*  background: rgba(29, 79, 115, .8); / Select highlight blue /
+  color: var(--theme-selection-color); */
+}
 
 :root {
   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
@@ -180,3 +423,237 @@ checkbox:-moz-focusring {
 .devtools-option-toolbarbutton {
   list-style-image: var(--tool-options-image);
 }
+
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
+}
+
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+}
+
+.devtools-separator + .devtools-toolbarbutton {
+}
+
+/*
+ * Filter buttons
+ * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands
+ */
+
+.menu-filter-button {
+/*  -moz-appearance: none;
+  background: rgba(128,128,128,0.1);
+  border: none;
+  border-radius: 2px;
+  min-width: 0;
+  padding: 0 5px;
+  margin: 2px;
+  color: var(--theme-body-color);*/
+}
+
+.menu-filter-button:hover {
+/*  background: rgba(128,128,128,0.2);*/
+}
+
+.menu-filter-button:hover:active {
+/*  background-color: var(--theme-selection-background-semitransparent);*/
+}
+
+.menu-filter-button:not(:active).checked {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+/* Text input */
+
+.devtools-textinput,
+.devtools-searchinput,
+.devtools-filterinput {
+/*  -moz-appearance: none;
+  margin: 1 3px;
+  border: 1px solid;
+  border-radius: 2px;
+  padding: 4px 6px;
+  border-color: var(--theme-splitter-color);
+  font: message-box;*/
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:root[platform="mac"] .devtools-searchinput,
+:root[platform="mac"] .devtools-textinput {
+/*  border-radius: 20px;*/
+}
+
+.devtools-searchinput,
+.devtools-filterinput {
+/*  margin-top: 1px;
+  margin-bottom: 1px;
+  padding: 0;*/
+  padding-inline-start: 22px;
+  padding-inline-end: 4px;
+  background-position: 8px center;
+  background-size: 11px 11px;
+  background-repeat: no-repeat;
+  font-size: inherit;
+}
+
+/*
+ * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it
+ *  once we have a standardized search and filter input across the toolboxes.
+ */
+.has-clear-btn > .devtools-searchinput,
+.has-clear-btn > .devtools-filterinput {
+  padding-inline-end: 23px;
+}
+
+.devtools-searchinput {
+  background-image: var(--magnifying-glass-image);
+}
+
+.devtools-filterinput {
+  background-image: var(--filter-image);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl),
+.devtools-searchinput:dir(rtl),
+.devtools-filterinput:-moz-locale-dir(rtl),
+.devtools-filterinput:dir(rtl) {
+  background-position: calc(100% - 8px) center;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
+  visibility: hidden;
+}
+
+.devtools-searchinput .textbox-input::placeholder,
+.devtools-filterinput .textbox-input::placeholder {
+  font-style: normal;
+}
+
+.devtools-plaininput {
+  border-color: transparent;
+  background-color: transparent;
+
+  color: var(--theme-highlight-gray);
+}
+
+/* Searchbox is a div container element for a search input element */
+.devtools-searchbox {
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+
+button + .devtools-searchbox {
+  margin-inline-start: 2px;
+}
+
+/* The spacing is accomplished with a padding on the searchbox */
+.devtools-searchbox > .devtools-textinput,
+.devtools-searchbox > .devtools-searchinput {
+}
+
+.devtools-textinput:focus,
+.devtools-searchinput:focus,
+.devtools-filterinput:focus {
+  border-color: var(--theme-focus-border-color-textbox);
+/*  box-shadow: var(--theme-focus-box-shadow-textbox);*/
+  transition: all 0.2s ease-in-out;
+  outline: none;
+}
+
+/* Don't add 'double spacing' for inputs that are at beginning / end
+   of a toolbar (since the toolbar has it's own spacing). */
+.devtools-toolbar > .devtools-textinput:first-child,
+.devtools-toolbar > .devtools-searchinput:first-child,
+.devtools-toolbar > .devtools-filterinput:first-child {
+}
+.devtools-toolbar > .devtools-textinput:last-child,
+.devtools-toolbar > .devtools-searchinput:last-child,
+.devtools-toolbar > .devtools-filterinput:last-child {
+}
+.devtools-toolbar > .devtools-searchbox:first-child {
+}
+.devtools-toolbar > .devtools-searchbox:last-child {
+}
+
+.devtools-rule-searchbox {
+  -moz-box-flex: 1;
+  width: 100%;
+/*  font: inherit;*/
+}
+
+.devtools-rule-searchbox[filled] {
+  background-color: var(--searchbox-background-color);
+  border-color: var(--searchbox-border-color);
+}
+
+.devtools-style-searchbox-no-match {
+  background-color: var(--searchbox-no-match-background-color) !important;
+  border-color: var(--searchbox-no-match-border-color) !important;
+}
+
+.devtools-searchinput-clear {
+  position: absolute;
+  top: 3.5px;
+  offset-inline-end: 7px;
+  padding: 0;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.devtools-searchinput-clear:dir(rtl) {
+  right: unset;
+  left: 7px;
+}
+
+.devtools-searchinput-clear {
+  background-image: url("chrome://devtools/skin/images/search-clear.svg");
+}
+
+.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
+  background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
+}
+
+.devtools-searchinput-clear:hover {
+  background-position: -16px 0;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
+  list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+/* Throbbers */
+
+.devtools-throbber::before {
+  content: "";
+  display: inline-block;
+  vertical-align: bottom;
+  margin-inline-end: 0.5em;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: 1.1s linear throbber-spin infinite;
+}
+
+@keyframes throbber-spin {
+  from {
+    transform: none;
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/LCARStrek/devtools/computed.css b/LCARStrek/devtools/computed.css
index 02fb4f8d..803349df 100644
--- a/LCARStrek/devtools/computed.css
+++ b/LCARStrek/devtools/computed.css
@@ -64,7 +64,7 @@
 }
 
 .property-view {
-  padding: 2px 0 2px 17px;
+  padding: 2px 17px;
   display: flex;
   flex-wrap: wrap;
 }
diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css
index 6753b7ac..c209a860 100644
--- a/LCARStrek/devtools/dark-theme.css
+++ b/LCARStrek/devtools/dark-theme.css
@@ -290,6 +290,12 @@ div.CodeMirror span.eval-text {
   visibility: hidden;
 }
 
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
 .theme-checkbox {
   display: inline-block;
   border: 0;
diff --git a/LCARStrek/devtools/eyedropper.css b/LCARStrek/devtools/eyedropper.css
deleted file mode 100644
index 21034aa9..00000000
--- a/LCARStrek/devtools/eyedropper.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#canvas {
-  image-rendering: -moz-crisp-edges;
-  cursor: none;
-  border: 3px solid #A09090;
-  border-radius: 50%;
-}
-
-#canvas-overflow {
-  overflow: hidden;
-  width: 96px;
-  height: 96px;
-}
-
-#color-preview {
-  width: 16px;
-  height: 16px;
-  border: solid 1px #9C9CFF;
-  margin: 3px;
-}
-
-#color-value-box {
-  background-color: #000000;
-  border-radius: 1px;
-  width: 150px;
-}
-
-#color-value {
-  /* avoid the # appearing at the end for some colours in RTL locales */
-  direction: ltr;
-  padding: 0.3em;
-}
-
-#color-value.highlight {
-  font-family: inherit;
-}
-
-window {
-  /* inexplicably, otherwise background shows up on Linux */
-  border: 1px solid transparent;
-  background-color: transparent;
-}
diff --git a/LCARStrek/devtools/fonts.css b/LCARStrek/devtools/fonts.css
index 78b87a27..fa7d97bf 100644
--- a/LCARStrek/devtools/fonts.css
+++ b/LCARStrek/devtools/fonts.css
@@ -35,12 +35,12 @@
   border: none;
   background-color: var(--fonts-button-background);
   color: var(--fonts-button-text);
-  margin: 3px;
   padding: 0 6px;
   cursor: pointer;
-  position: absolute;
-  bottom: 0;
-  offset-inline-end: 0;
+}
+
+#font-showall:hover {
+/*  text-decoration: underline;*/
 }
 
 .dim > #font-container,
diff --git a/LCARStrek/devtools/images/filetypes/dir-close.svg b/LCARStrek/devtools/images/filetypes/dir-close.svg
index 156bc38d..7a50bb87 100644
--- a/LCARStrek/devtools/images/filetypes/dir-close.svg
+++ b/LCARStrek/devtools/images/filetypes/dir-close.svg
@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <!-- 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/. -->
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" width="16" height="16">
-  <path d="M 0.00,160.00 L 512.00,160.00 L 480.00,480.00 L 32.00,480.00 L 0.00,160.00 Z M 464.00,96.00 L 480.00,128.00 L 32.00,128.00 L 64.00,64.00 L 240.00,64.00 L 256.00,96.00 L 464.00,96.00 Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="none" fill-rule="evenodd">
+  <path d="M.5 5.5v-2c0-.553.448-1 1-1H4c.553 0 1.268.358 1.6.802L6.5 4.5h5.997c.554 0 1.003.446 1.003.998v7.004c0 .55-.447.998-1 .998h-11c-.553 0-1-.453-1-.997V5.5zM1.5 6.5h11"/>
 </svg>
diff --git a/LCARStrek/devtools/images/filetypes/dir-open.svg b/LCARStrek/devtools/images/filetypes/dir-open.svg
index 3db182ed..14c01fba 100644
--- a/LCARStrek/devtools/images/filetypes/dir-open.svg
+++ b/LCARStrek/devtools/images/filetypes/dir-open.svg
@@ -1,7 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <!-- 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/. -->
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" width="16" height="16">
-  <path d="M 416.00,480.00L 512.00,224.00L 96.00,224.00L0.00,480.00 zM 64.00,192.00 L 0.00,480.00 L 0.00,64.00 L 144.00,64.00 L 208.00,128.00 L 416.00,128.00 L 416.00,192.00 Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="none" fill-rule="evenodd">
+  <path d="M.5 5.5v-2c0-.553.448-1 1-1H4c.553 0 1.268.358 1.6.802L6.5 4.5h5.997c.554 0 1.003.443 1.003 1v2H4.495c-.55 0-1.192.394-1.444.898l-2.1 4.204c-.25.496-.45.445-.45-.1V5.5z"/>
+  <path d="M.5 12v.508c0 .548.456.992 1.002.992h9.996c.553 0 1.2-.394 1.45-.898l2.103-4.204c.25-.496.004-.898-.55-.898H13"/>
 </svg>
diff --git a/LCARStrek/devtools/images/filetypes/globe.svg b/LCARStrek/devtools/images/filetypes/globe.svg
index 539d6912..fcc575a4 100644
--- a/LCARStrek/devtools/images/filetypes/globe.svg
+++ b/LCARStrek/devtools/images/filetypes/globe.svg
@@ -1,6 +1,7 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 878 1024">
-  <path fill="000000" d="M438.857 73.143q119.429 0 220.286 58.857t159.714 159.714 58.857 220.286-58.857 220.286-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857zM595.429 370.857q-1.143 0.571-5.429 5.429t-7.714 5.429q1.143 0 2.571-2.857t2.857-6.286 2-4q3.429-4 12.571-8.571 8-3.429 29.714-6.857 19.429-4.571 29.143 6.286-1.143-1.143 5.429-7.429t8.286-6.857q1.714-1.143 8.571-2.571t8.571-4.286l1.143-12.571q-6.857 0.571-10-4t-3.714-12q0 1.143-3.429 4.571 0-4-2.571-4.571t-6.571 0.571-5.143 0.571q-5.714-1.714-8.571-4.286t-4.571-9.429-2.286-8.571q-1.143-2.857-5.429-6t-5.429-6q-0.571-1.143-1.429-3.143t-1.714-3.714-2.286-3.143-3.143-1.429-4 2.857-4.286 5.714-2.571 2.857q-1.714-1.143-3.429-0.857t-2.571 0.571-2.571 1.714-2.857 2q-1.714 1.143-4.857 1.714t-4.857 1.143q8.571-2.857-0.571-6.286-5.714-2.286-9.143-1.714 5.143-2.286 4.286-6.857t-4.857-8h2.857q-0.571-2.286-4.857-4.857t-10-4.857-7.429-3.429q-4.571-2.857-19.429-5.429t-18.857-0.286q-2.857 3.429-2.571 6t2.286 8 2 7.143q0.571 3.429-3.143 7.429t-3.714 6.857q0 4 8 8.857t5.714 12.286q-1.714 4.571-9.143 9.143t-9.143 6.857q-2.857 4.571-0.857 10.571t6 9.429q1.143 1.143 0.857 2.286t-2 2.571-3.143 2.286-3.714 2l-1.714 1.143q-6.286 2.857-11.714-3.429t-7.714-14.857q-4-14.286-9.143-17.143-13.143-4.571-16.571 0.571-2.857-7.429-23.429-14.857-14.286-5.143-33.143-2.286 3.429-0.571 0-8.571-4-8.571-10.857-6.857 1.714-3.429 2.286-10t0.571-7.714q1.714-7.429 6.857-13.143 0.571-0.571 4-4.857t5.429-7.714 0.286-3.429q20 2.286 28.571-6.286 2.857-2.857 6.571-9.714t6-9.714q5.143-3.429 8-3.143t8.286 3.143 8.286 2.857q8 0.571 8.857-6.286t-4.286-11.429q6.857 0.571 1.714-9.714-2.857-4-4.571-5.143-6.857-2.286-15.429 2.857-4.571 2.286 1.143 4.571-0.571-0.571-5.429 6t-9.429 10-9.143-2.857q-0.571-0.571-3.143-7.714t-5.429-7.714q-4.571 0-9.143 8.571 1.714-4.571-6.286-8.571t-13.714-4.571q10.857-6.857-4.571-15.429-4-2.286-11.714-2.857t-11.143 2.286q-2.857 4-3.143 6.571t2.857 4.571 6 3.143 6.571 2.286 4.857 1.714q8 5.714 4.571 8-1.143 0.571-4.857 2t-6.571 2.571-3.429 2.286q-1.714 2.286 0 8t-1.143 8q-2.857-2.857-5.143-10t-4-9.429q4 5.143-14.286 3.429l-5.714-0.571q-2.286 0-9.143 1.143t-11.714 0.571-7.714-4.571q-2.286-4.571 0-11.429 0.571-2.286 2.286-1.143-2.286-1.714-6.286-5.429t-5.714-4.857q-26.286 8.571-53.714 23.429 3.429 0.571 6.857-0.571 2.857-1.143 7.429-3.714t5.714-3.143q19.429-8 24-4l2.857-2.857q8 9.143 11.429 14.286-4-2.286-17.143-0.571-11.429 3.429-12.571 6.857 4 6.857 2.857 10.286-2.286-1.714-6.571-5.714t-8.286-6.286-8.571-2.857q-9.143 0-12.571 0.571-83.429 45.714-134.286 126.857 4 4 6.857 4.571 2.286 0.571 2.857 5.143t1.429 6.286 6.571-1.714q5.143 4.571 1.714 10.857 0.571-0.571 25.143 15.429 10.857 9.714 12 12 1.714 6.286-5.714 10.286-0.571-1.143-5.143-5.143t-5.143-2.286q-1.714 2.857 0.286 10.571t6 7.143q-4 0-5.429 9.143t-1.429 20.286-0.571 13.429l1.143 0.571q-1.714 6.857 3.143 19.714t12.286 11.143q-7.429 1.714 11.429 24.571 3.429 4.571 4.571 5.143 1.714 1.143 6.857 4.286t8.571 5.714 5.714 6q2.286 2.857 5.714 12.857t8 13.429q-1.143 3.429 5.429 11.429t6 13.143q-0.571 0-1.429 0.571t-1.429 0.571q1.714 4 8.857 8t8.857 7.429q0.571 1.714 1.143 5.714t1.714 6.286 4.571 1.143q1.143-11.429-13.714-35.429-8.571-14.286-9.714-16.571-1.714-2.857-3.143-8.857t-2.571-8.286q1.143 0 3.429 0.857t4.857 2 4.286 2.286 1.143 1.714q-1.714 4 1.143 10t6.857 10.571 9.714 10.857 6.857 7.429q3.429 3.429 8 11.143t0 7.714q5.143 0 11.429 5.714t9.714 11.429q2.857 4.571 4.571 14.857t2.857 13.714q1.143 4 4.857 7.714t7.143 5.429l9.143 4.571t7.429 4q2.857 1.143 10.571 6t12.286 6.571q5.714 2.286 9.143 2.286t8.286-1.429 7.714-2q8.571-1.143 16.571 8.571t12 12q20.571 10.857 31.429 6.286-1.143 0.571 0.286 4.286t4.571 8.857 5.143 8.286 3.143 4.857q2.857 3.429 10.286 8.571t10.286 8.571q3.429-2.286 4-5.143-1.714 4.571 4 11.429t10.286 5.714q8-1.714 8-18.286-17.714 8.571-28-10.286 0-0.571-1.429-3.143t-2.286-4.857-1.429-4.857 0-4.286 2.857-1.714q5.143 0 5.714-2t-1.143-7.143-2.286-7.429q-0.571-4.571-6.286-11.429t-6.857-8.571q-2.857 5.143-9.143 4.571t-9.143-5.143q0 0.571-0.857 3.143t-0.857 3.714q-7.429 0-8.571-0.571 0.571-1.714 1.429-10t2-12.857q0.571-2.286 3.143-6.857t4.286-8.286 2.286-7.143-2.571-5.429-10-1.429q-10.857 0.571-14.857 11.429-0.571 1.714-1.714 6t-2.857 6.571-5.143 4q-4 1.714-13.714 1.143t-13.714-2.857q-7.429-4.571-12.857-16.571t-5.429-21.143q0-5.714 1.429-15.143t1.714-14.286-3.143-14q1.714-1.143 5.143-5.429t5.714-6q1.143-0.571 2.571-0.857t2.571 0 2.286-0.857 1.714-3.429q-0.571-0.571-2.286-1.714-1.714-1.714-2.286-1.714 4 1.714 16.286-0.857t15.714 0.857q8.571 6.286 12.571-1.143 0-0.571-1.429-5.429t-0.286-7.714q2.857 15.429 16.571 5.143 1.714 1.714 8.857 2.857t10 2.857q1.714 1.143 4 3.143t3.143 2.571 2.857-0.286 4.857-3.714q5.714 8 6.857 13.714 6.286 22.857 10.857 25.143 4 1.714 6.286 1.143t2.571-5.429 0-8-0.857-7.143l-0.571-4.571v-10.286l-0.571-4.571q-8.571-1.714-10.571-6.857t0.857-10.571 8.571-10.571q0.571-0.571 4.571-2t8.857-3.714 7.143-4.571q12-10.857 8.571-20 4 0 6.286-5.143-0.571 0-2.857-1.714t-4.286-2.857-2.571-1.143q5.143-2.857 1.143-9.143 2.857-1.714 4.286-6.286t4.286-5.714q5.143 6.857 12 1.143 4-4.571 0.571-9.143 2.857-4 11.714-6t10.571-5.429q4 1.143 4.571-1.143t0.571-6.857 1.714-6.857q2.286-2.857 8.571-5.143t7.429-2.857l9.714-6.286q1.714-2.286 0-2.286 10.286 1.143 17.714-6.286 5.714-6.286-3.429-11.429 1.714-3.429-1.714-5.429t-8.571-3.143q1.714-0.571 6.571-0.286t6-0.857q8.571-5.714-4-9.143-9.714-2.857-24.571 6.857zM502.286 872q117.714-20.571 200.571-108-1.714-1.714-7.143-2.571t-7.143-2q-10.286-4-13.714-4.571 0.571-4-1.429-7.429t-4.571-5.143-7.143-4.571-6.286-4q-1.143-1.143-4-3.429t-4-3.143-4.286-2.571-4.857-1.143-5.714 0.571l-1.714 0.571q-1.714 0.571-3.143 1.429t-3.143 1.714-2.286 1.714 0 1.429q-12-9.714-20.571-12.571-2.857-0.571-6.286-3.143t-6-4-5.714-0.857-6.571 4q-2.857 2.857-3.429 8.571t-1.143 7.429q-4-2.857 0-10t1.143-10.571q-1.714-3.429-6-2.571t-6.857 2.571-6.571 4.857-5.143 3.714-4.857 3.143-4.857 4.286q-1.714 2.286-3.429 6.857t-2.857 6.286q-1.143-2.286-6.571-3.714t-5.429-3.143q1.143 5.714 2.286 20t2.857 21.714q4 17.714-6.857 27.429-15.429 14.286-16.571 22.857-2.286 12.571 6.857 14.857 0 4-4.571 11.714t-4 12.286q0 3.429 1.143 9.143z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+  <path d="M8.507 3.508l-1.978.003-.107.107v1.334l.848.891.455.031.107-.107v-.57l.75-.705.032-.877zM11.675 8.811l-1.389-1.348h-1.49l-.52.476-.032 1.023.665.708 1.22.032-.107-.107v1.108l.897.942.29.031.108-.107v-1.066l.39-.345.03-.855-.107.107h.24l.377-.334v-.151l-.116-.114-.531-.031z"/>
+  <path d="M7.973 13.145a5.177 5.177 0 0 1-5.171-5.172c0-.034 0-.034.002-.066v-.003-.03l.17-.081.667.54.453.031.458.502-.03.832.291.352h.434l.105.088-.03 1.752.483.512h.097l.023-.31.927-.88.05-.435.489-.427v-.82l-.543-.035-1.032-1.066H4.29l-.142-.084v-.796l.142-.093h1.074v-.251l.11-.105.648.03.455-.408.031-.69-.576-.603h-.668v.26l-.102.064h-.826l-.105-.084.023-.59.442-.397v-.226h-.352c-.094 0-.14-.119-.073-.184a5.154 5.154 0 0 1 7.005-.187.104.104 0 0 1-.069.184l-1.056-.031-.745.74.48.484v.148l-.354.357h-.146l-.162-.163v-.148l.07-.07-.232-.232-.342.334.49.49c.065.066.004.18-.09.179l-.694-.004v.779h.723l.03-.516.147-.133h.148l.574.562v.248l.533.025h.003l.166-.028 1.14 1.143.695-.653h.353l.107.1c0 .018.003.015.003.033v.002c0 .028-.002.028-.001.058a5.179 5.179 0 0 1-5.174 5.172M7.973 2A5.98 5.98 0 0 0 2 7.974a5.98 5.98 0 0 0 5.973 5.973 5.98 5.98 0 0 0 5.974-5.974A5.98 5.98 0 0 0 7.973 2"/>
 </svg>
diff --git a/LCARStrek/devtools/images/filetypes/store.svg b/LCARStrek/devtools/images/filetypes/store.svg
index c704763a..a62d2adb 100644
--- a/LCARStrek/devtools/images/filetypes/store.svg
+++ b/LCARStrek/devtools/images/filetypes/store.svg
@@ -1,8 +1,7 @@
 <!-- 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/. -->
-<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" fill="000000">
-  <path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
-  <path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
-  <path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+  <path d="M7.5 7.556c3.006 0 5.5-1.136 5.5-2.778C13 3.136 10.506 2 7.5 2S2 3.136 2 4.778C2 6.42 4.494 7.556 7.5 7.556zm0-1c-2.517 0-4.5-.903-4.5-1.778S4.983 3 7.5 3s4.5.903 4.5 1.778-1.983 1.778-4.5 1.778zM7.5 14.445c3.006 0 5.5-1.137 5.5-2.778 0-.878-.595-1.606-1.657-2.081-.244-.11-.473-.107-.778-.033-.056.014-.565.158-.765.205-.626.148-1.342.231-2.3.231-.973 0-1.683-.082-2.273-.225a18.574 18.574 0 0 1-.673-.193c-.277-.076-.479-.089-.707-.005l-.035.014C2.638 10.064 2 10.756 2 11.667c0 1.641 2.494 2.778 5.5 2.778zm0-1c-2.517 0-4.5-.904-4.5-1.778 0-.432.354-.816 1.194-1.163h-.002c-.012.005.003.006.097.032-.056-.016.474.144.702.2.669.162 1.458.253 2.509.253 1.035 0 1.828-.092 2.53-.257.228-.054.74-.2.77-.207a.756.756 0 0 1 .134-.027c.734.329 1.066.735 1.066 1.169 0 .874-1.983 1.778-4.5 1.778z"/>
+  <path d="M7.5 10.945c3.006 0 5.5-1.137 5.5-2.778 0-.873-.62-1.601-1.693-2.082-.244-.109-.472-.106-.773-.032-.051.013-.551.158-.75.206-.615.147-1.326.23-2.284.23-.973 0-1.68-.082-2.265-.225a17.077 17.077 0 0 1-.66-.19c-.27-.076-.467-.092-.692-.015l-.054.02C2.65 6.568 2 7.259 2 8.168c0 1.641 2.494 2.778 5.5 2.778zm0-1C4.983 9.945 3 9.04 3 8.167c0-.426.364-.813 1.21-1.163l-.003.001c-.011.004.005.005.099.032-.079-.022.465.143.69.198.665.163 1.452.254 2.504.254 1.036 0 1.825-.092 2.517-.258.228-.054.733-.2.758-.207a.766.766 0 0 1 .124-.026c.748.335 1.101.75 1.101 1.169 0 .874-1.983 1.778-4.5 1.778z"/>
 </svg>
diff --git a/LCARStrek/devtools/images/tool-profiler-active.svg b/LCARStrek/devtools/images/tool-profiler-active.svg
index d411c289..fb049b7f 100644
--- a/LCARStrek/devtools/images/tool-profiler-active.svg
+++ b/LCARStrek/devtools/images/tool-profiler-active.svg
@@ -1,10 +1,9 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#9C9CFF">
-  <path d="M6.9 7.8c-.3.1-.6.4-.6.7-.1.5.2 1 .7 1.1.3 0 .7-.1.9-.3l2.5-2.9-3.5 1.4z"/>
-  <path opacity="0.5" d="M4.7 10.6c.7 1.1 1.9 1.9 3.3 1.9s2.6-.8 3.3-1.9H4.7z"/>
-  <path d="M-12.7-2.5c-3.8 0-6.7 3-6.7 6.7s3 6.7 6.7 6.7c3.8 0 6.7-3 6.7-6.7s-2.9-6.7-6.7-6.7zM-12.8 9c-2.5 0-4.6-2.1-4.8-4.5v-.2h.6c.6 0 1-.4 1-1s-.4-1-1-1h-.4c.4-.9.8-1.4 1.5-1.9l.2.4c.3.5.8.7 1.3.4.5-.2.7-.7.4-1.2l-.2-.4c.4-.1.9-.2 1.4-.2.6 0 1.1.1 1.6.3l-.2.4c-.3.5-.1 1 .4 1.3.5.3 1 .1 1.3-.4l.2-.6c.6.6 1.2 1.5 1.4 1.8h-.4c-.6 0-1 .4-1 1s.4 1 1 1h.6v.2C-8.2 6.9-10.3 9-12.8 9zM-12.8 12.7c-3.4 0-6.2 2.7-6.2 6.2s2.7 6.3 6.3 6.3c3.5 0 6.3-2.7 6.3-6.3-.1-3.4-2.9-6.2-6.4-6.2zm0 11.4c-2.9 0-5.2-2.3-5.2-5.2 0-2.9 2.3-5.2 5.2-5.2s5.2 2.3 5.2 5.2c0 3-2.2 5.2-5.2 5.2z"/>
-  <path d="M-14.5 16.3c-.2 0-.4.2-.4.4v4.5c0 .2.3.4.5.4s.5-.2.5-.4v-4.5c0-.2-.3-.4-.5-.4"/>
-  <path d="M8 2.3C4.5 2.3 1.8 5 1.8 8.5s2.7 6.3 6.3 6.3c3.5 0 6.3-2.7 6.3-6.3-.2-3.4-2.9-6.2-6.4-6.2zm0 11.4c-2.9 0-5.2-2.3-5.2-5.2v-.3h1.7c.2 0 .4-.3.4-.5s-.2-.6-.4-.6H2.9C3.3 5.9 4 4.8 5 4.1l1.4 1.3c.1.1.5.1.6-.1.1-.1.2-.5.1-.6L6 3.6c.6-.2 1.3-.4 2-.4.8 0 1.5.2 2.2.5L9 4.8c-.1.1 0 .5.1.6s.5.2.6.1L11 4.3c1 .7 1.7 1.7 2 2.8h-1.7c-.2 0-.4.3-.4.5s.2.5.4.5h1.9v.3c0 3.1-2.2 5.3-5.2 5.3z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#9C9CFF" fill-rule="evenodd">
+  <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
+  <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
+  <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
+  <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
 </svg>
diff --git a/LCARStrek/devtools/inspector.css b/LCARStrek/devtools/inspector.css
index b99c2215..49d5bf11 100644
--- a/LCARStrek/devtools/inspector.css
+++ b/LCARStrek/devtools/inspector.css
@@ -95,6 +95,17 @@ window {
 
 #inspector-searchlabel {
   overflow: hidden;
+  margin-inline-end: 2px;
+}
+
+#inspector-search {
+  flex: unset;
+}
+
+/* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox
+   is converted to html*/
+#inspector-searchbox {
+  width: 100%;
 }
 
 /* Make sure the text is vertically centered in Inspector's
@@ -105,10 +116,6 @@ window {
   line-height: 19px;
 }
 
-#inspector-search {
-  flex: unset;
-}
-
 /* Eyedropper toolbar button */
 
 #inspector-eyedropper-toggle {
diff --git a/LCARStrek/devtools/memory.css b/LCARStrek/devtools/memory.css
index e094a6ba..650b0662 100644
--- a/LCARStrek/devtools/memory.css
+++ b/LCARStrek/devtools/memory.css
@@ -436,6 +436,10 @@ html, body, #app, #memory-tool {
   padding-inline-end: 5px;
 }
 
+.children-pointer:dir(rtl) {
+  transform: scaleX(-1);
+}
+
 /**
  * Heap tree view columns
  */
@@ -477,7 +481,8 @@ html, body, #app, #memory-tool {
    * These subcolumns may have specific widths or need to flex.
    */
   display: flex;
-  text-align: end;
+  /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
+  text-align: right;
   border-inline-end: var(--cell-border-color) 1px solid;
 }
 
@@ -527,7 +532,11 @@ html, body, #app, #memory-tool {
 }
 
 .heap-tree-number {
-  padding-inline-start: 3px;
+  padding: 0 3px;
+  flex: 1;
+  color: var(--theme-content-color3);
+  /* Make sure number doesn't appear backwards on RTL locales */
+  direction: ltr;
 }
 
 .heap-tree-percent {
@@ -540,11 +549,6 @@ html, body, #app, #memory-tool {
   font-family: var(--monospace-font-family);
 }
 
-.heap-tree-number {
-  flex: 1;
-  color: var(--theme-content-color3);
-}
-
 .heap-tree-percent {
   width: 4ch;
 }
diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css
index 81ff32a3..ca8fdad5 100644
--- a/LCARStrek/devtools/netmonitor.css
+++ b/LCARStrek/devtools/netmonitor.css
@@ -348,6 +348,10 @@ window {
   margin-inline-end: 4px;
 }
 
+.side-menu-widget-item.selected .requests-security-state-icon {
+/*  filter: brightness(1.3);*/
+}
+
 .security-state-insecure {
   list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
 }
@@ -410,6 +414,10 @@ window {
   width: 8vw;
 }
 
+.side-menu-widget-item.selected .requests-menu-transferred.theme-comment {
+  color: var(--theme-selection-color);
+}
+
 /* Network requests table: status codes */
 
 .requests-menu-status-code {
@@ -429,7 +437,9 @@ window {
   transition: background-color 0.5s ease-in-out;
 }
 
+.side-menu-widget-item.selected .requests-menu-status-icon,
 .request-list-item.selected .requests-menu-status-icon {
+/*  filter: brightness(1.3);*/
 }
 
 .requests-menu-status-icon:not([code]),
@@ -652,17 +662,20 @@ window {
 
 /* Method Column */
 
+.side-menu-widget-item.selected .requests-menu-method,
 .request-list-item.selected .requests-menu-method {
   color: var(--theme-selection-color);
 }
 
 /* Network request details */
 
-#details-pane-toggle {
+#details-pane-toggle:-moz-locale-dir(ltr),
+#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) {
   list-style-image: var(--theme-pane-collapse-image);
 }
 
-#details-pane-toggle.pane-collapsed {
+#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr),
+#details-pane-toggle:-moz-locale-dir(rtl) {
   list-style-image: var(--theme-pane-expand-image);
 }
 
diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css
index d2759987..c60aa520 100644
--- a/LCARStrek/devtools/performance.css
+++ b/LCARStrek/devtools/performance.css
@@ -13,6 +13,14 @@
   --row-hover-background-color: #544400;
 }
 
+/*
+ * DE-XUL: Set a sidebar width because inline XUL components will cause the flex
+ * to overflow if dynamically sized.
+ */
+.performance-tool {
+  --sidebar-width: 185px;
+}
+
 /**
  * A generic class to hide elements, replacing the `element.hidden` attribute
  * that we use to hide elements that can later be active
@@ -85,12 +93,10 @@
   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);
 }
@@ -115,21 +121,32 @@
   padding: 5px !important;
 }
 
-.notice-container .record-button[checked],
-.notice-container .record-button[checked] {
+.notice-container .record-button.checked,
+.notice-container .record-button.checked {
   color: var(--theme-selection-color) !important;
   background: var(--theme-selection-background) !important;
 }
 
-.record-button[locked] {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
 /* Sidebar & recording items */
 
 #recordings-pane {
   border-inline-end: 1px solid var(--theme-splitter-color);
+  width: var(--sidebar-width);
+}
+
+#recording-controls-mount {
+  width: var(--sidebar-width);
+}
+
+#recording-controls-mount > div {
+  width: var(--sidebar-width);
+}
+
+/*
+ * DE-XUL: The height of the toolbar is not correct without tweaking the line-height.
+ */
+#recordings-pane .devtools-toolbar {
+  line-height: 0;
 }
 
 #recordings-list {
diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css
index 863b473e..abe4739e 100644
--- a/LCARStrek/devtools/rules.css
+++ b/LCARStrek/devtools/rules.css
@@ -326,6 +326,11 @@ div#ruleview-toolbar-container::after {
   display: inline-block;
 }
 
+.ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
+  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
+  transform: none;
+}
+
 .ruleview-newproperty {
   /* (enable checkbox width: 12px) + (expander width: 15px) */
   margin-inline-start: 27px;
diff --git a/LCARStrek/devtools/styleeditor.css b/LCARStrek/devtools/styleeditor.css
index bcbace32..5168985c 100644
--- a/LCARStrek/devtools/styleeditor.css
+++ b/LCARStrek/devtools/styleeditor.css
@@ -54,7 +54,6 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
-  color: var(--theme-highlight-blue);
 }
 
 .stylesheet-name {
@@ -79,6 +78,11 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
   -moz-box-flex: 1;
 }
 
+.stylesheet-title,
+.stylesheet-name {
+  color: var(--theme-highlight-blue);
+}
+
 .stylesheet-rule-count,
 .stylesheet-linked-file,
 .stylesheet-saveButton {
@@ -86,6 +90,9 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
 }
 
 .stylesheet-saveButton {
+  display: none;
+  margin-top: 0px;
+  margin-bottom: 0px;
   text-decoration: underline;
   cursor: pointer;
 }
@@ -132,7 +139,7 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
   max-width: 400px;
   min-width: 100px;
 
-  border-color: #9C9CFF; /* Splitters */
+  border-color: var(--theme-splitter-color);
 }
 
 .media-rule-label {
diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index 7eefeac4..cf3e8d9c 100644
--- a/LCARStrek/devtools/toolbars.css
+++ b/LCARStrek/devtools/toolbars.css
@@ -167,439 +167,6 @@ div.devtools-tabbar::after {
   margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */
 }
 
-/* Toolbar buttons */
-
-.devtools-menulist,
-.devtools-toolbarbutton,
-.devtools-button {
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton {
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
-.devtools-button::before {
-  width: 16px;
-  height: 16px;
-/*  transition: opacity 0.05s ease-in-out;*/
-}
-
-/* HTML buttons */
-.devtools-button {
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  min-width: 18px;
-  height: 100%;
-  margin-inline-start: 2px;
-  background: var(--theme-toolbar-background);
-  color: var(--theme-body-color);
-  /* The icon is absolutely positioned in the button using ::before */
-  position: relative;
-}
-
-.devtools-button:not([disabled]):hover {
-  background: var(--theme-hover-background);
-  color: var(--theme-hover-color);
-}
-
-.devtools-button:not([disabled]):hover:active {
-  background: var(--theme-active-background);
-  color: var(--theme-active-color);
-}
-
-/* Menu type buttons and checked states */
-.devtools-button[checked],
-.devtools-button.checked {
-  background: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
-.devtools-button::before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -8px 0 0 -8px;
-/*  background-size: cover;
-  background-repeat: no-repeat;*/
-/*  transition: opacity 0.05s ease-in-out;*/
-}
-
-.devtools-button:-moz-focusring {
-  outline: none;
-}
-
-/* Standalone buttons */
-.devtools-button[standalone],
-.devtools-button[data-standalone],
-.devtools-toolbarbutton[standalone],
-.devtools-toolbarbutton[data-standalone],
-.menu-filter-button {
-  border: none;
-/*  min-height: 32px; */
-  font: inherit;
-  background-color: var(--theme-button-background);
-  color: var(--theme-button-color);
-  border-radius: 300px;
-}
-
-.devtools-button[standalone]:hover,
-.devtools-button[data-standalone]:hover,
-.devtools-toolbarbutton[standalone]:hover,
-.devtools-toolbarbutton[data-standalone]:hover,
-.menu-filter-button:hover {
-  background-color: var(--theme-hover-background);
-  color: var(--theme-hover-color);
-}
-
-.devtools-button[standalone]:hover:active,
-.devtools-button[data-standalone]:hover:active,
-.devtools-toolbarbutton[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] {
-}
-
-.devtools-toolbarbutton[label][standalone] {
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton,
-.devtools-button {
-  min-height: 18px;
-}
-
-/* Icon button styles */
-.devtools-toolbarbutton:not([label]),
-.devtools-toolbarbutton[text-as-image] {
-  min-width: 16px;
-}
-
-/* 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;
-  margin-inline-start: 1px;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-toolbar .devtools-toolbarbutton {
-  margin-inline-start: 2px;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-icon {
-}
-
-/* Menu button styles (eg. web console filters) */
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-/*  -moz-box-orient: horizontal; */
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-}
-
-.devtools-menulist > .menulist-dropmarker {
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-}
-
-/* Icon-only buttons */
-.devtools-button:empty::before,
-.devtools-toolbarbutton:not([label]):not([disabled]) > image {
-/*  opacity: 0.8;*/
-}
-
-.devtools-button:hover:empty::before,
-.devtools-button[checked]:empty::before,
-.devtools-button[open]:empty::before,
-.devtools-toolbarbutton:not([label]):hover > image,
-.devtools-toolbarbutton:not([label])[checked=true] > image,
-.devtools-toolbarbutton:not([label])[open=true] > image {
-/*  opacity: 1;*/
-}
-
-.devtools-button:disabled,
-.devtools-button[disabled],
-.devtools-toolbarbutton[disabled] {
-/*  opacity: 0.5 !important;*/
-}
-
-.devtools-button[standalone]::before,
-.devtools-button[data-standalone]::before,
-.devtools-button:not([disabled]):hover::before,
-.devtools-button:not([disabled]):hover:active::before,
-.devtools-button[checked]:empty::before,
-.devtools-button[open]:empty::before,
-.devtools-toolbarbutton[standalone] > image,
-.devtools-toolbarbutton[data-standalone] > image,
-.devtools-toolbarbutton:not([disabled]):hover > image,
-.devtools-toolbarbutton:not([disabled]):hover:active > image,
-.devtools-toolbarbutton[checked=true] > image,
-.devtools-toolbarbutton[open=true] > image {
-  filter: var(--checked-icon-filter);
-}
-
-.devtools-button[disabled]::before,
-.devtools-toolbarbutton[disabled] > image {
-  filter: url(images/filters.svg#disabled-icon-state);
-}
-
-/* Icon-and-text buttons */
-.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
-  margin-inline-start: .5em !important;
-  font-weight: 600;
-}
-
-/* Text-only buttons */
-.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
-.devtools-toolbarbutton[data-text-only],
-#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
-/*  background-color: rgba(0, 0, 0, .2); / Splitter */
-}
-
-/* Text-only button states */
-.devtools-button:not(:empty):not([disabled]):hover,
-#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
-.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
-/*  background: rgba(0, 0, 0, .3); / Splitters */
-}
-
-.devtools-button:not(:empty):not([disabled]):hover:active,
-#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
-.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
-/*  background: rgba(0, 0, 0, .4); / Splitters */
-}
-
-.devtools-toolbarbutton:not([disabled])[label][checked=true],
-.devtools-toolbarbutton:not([disabled])[label][open],
-.devtools-button:not(:empty)[checked=true],
-#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
-/*  background: rgba(29, 79, 115, .7); / Select highlight blue /
-  color: var(--theme-selection-color); */
-}
-
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[open=true]:hover,
-.devtools-toolbarbutton[open=true]:hover:active,
-.devtools-toolbarbutton[checked=true],
-.devtools-toolbarbutton[checked=true]:hover,
-#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
-/*  background: rgba(29, 79, 115, .8); / Select highlight blue /
-  color: var(--theme-selection-color); */
-}
-
-:root {
-  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
-}
-
-.devtools-button.devtools-clear-icon::before {
-  background-image: var(--clear-icon-url);
-}
-
-.devtools-toolbarbutton.devtools-clear-icon {
-  list-style-image: var(--clear-icon-url);
-}
-
-.devtools-option-toolbarbutton {
-  list-style-image: var(--tool-options-image);
-}
-
-.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
-}
-
-.devtools-toolbarbutton-group + .devtools-toolbarbutton {
-}
-
-.devtools-separator + .devtools-toolbarbutton {
-}
-
-/* Text input */
-
-.devtools-textinput,
-.devtools-searchinput,
-.devtools-filterinput {
-/*  -moz-appearance: none;
-  margin: 1 3px;
-  border: 1px solid;
-  border-radius: 2px;
-  padding: 4px 6px;
-  border-color: var(--theme-splitter-color);
-  font: message-box;*/
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-:root[platform="mac"] .devtools-searchinput,
-:root[platform="mac"] .devtools-textinput {
-/*  border-radius: 20px;*/
-}
-
-.devtools-searchinput,
-.devtools-filterinput {
-/*  margin-top: 1px;
-  margin-bottom: 1px;
-  padding: 0;*/
-  padding-inline-start: 22px;
-  padding-inline-end: 4px;
-  background-position: 8px center;
-  background-size: 11px 11px;
-  background-repeat: no-repeat;
-  font-size: inherit;
-}
-
-.devtools-searchinput {
-  background-image: var(--magnifying-glass-image);
-}
-
-.devtools-filterinput {
-  background-image: var(--filter-image);
-}
-
-.devtools-searchinput:-moz-locale-dir(rtl),
-.devtools-searchinput:dir(rtl),
-.devtools-filterinput:-moz-locale-dir(rtl),
-.devtools-filterinput:dir(rtl) {
-  background-position: calc(100% - 8px) center;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon,
-.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
-  visibility: hidden;
-}
-
-.devtools-searchinput .textbox-input::placeholder,
-.devtools-filterinput .textbox-input::placeholder {
-  font-style: normal;
-}
-
-/* Searchbox is a div container element for a search input element */
-.devtools-searchbox {
-  display: flex;
-  flex: 1;
-  position: relative;
-}
-
-button + .devtools-searchbox {
-  margin-inline-start: 2px;
-}
-
-/* The spacing is accomplished with a padding on the searchbox */
-.devtools-searchbox > .devtools-textinput,
-.devtools-searchbox > .devtools-searchinput {
-}
-
-.devtools-textinput:focus,
-.devtools-searchinput:focus,
-.devtools-filterinput:focus {
-  border-color: var(--theme-focus-border-color-textbox);
-/*  box-shadow: var(--theme-focus-box-shadow-textbox);*/
-  transition: all 0.2s ease-in-out;
-  outline: none;
-}
-
-/* Don't add 'double spacing' for inputs that are at beginning / end
-   of a toolbar (since the toolbar has it's own spacing). */
-.devtools-toolbar > .devtools-textinput:first-child,
-.devtools-toolbar > .devtools-searchinput:first-child,
-.devtools-toolbar > .devtools-filterinput:first-child {
-}
-.devtools-toolbar > .devtools-textinput:last-child,
-.devtools-toolbar > .devtools-searchinput:last-child,
-.devtools-toolbar > .devtools-filterinput:last-child {
-}
-.devtools-toolbar > .devtools-searchbox:first-child {
-}
-.devtools-toolbar > .devtools-searchbox:last-child {
-}
-
-.devtools-rule-searchbox {
-  -moz-box-flex: 1;
-  width: 100%;
-/*  font: inherit;*/
-}
-
-.devtools-rule-searchbox[filled] {
-  background-color: var(--searchbox-background-color);
-  border-color: var(--searchbox-border-color);
-  padding-inline-end: 23px;
-}
-
-.devtools-style-searchbox-no-match {
-  background-color: var(--searchbox-no-match-background-color) !important;
-  border-color: var(--searchbox-no-match-border-color) !important;
-}
-
-.devtools-searchinput-clear {
-  position: absolute;
-  top: 3.5px;
-  right: 7px;
-  padding: 0;
-  border: 0;
-  width: 16px;
-  height: 16px;
-  background-position: 0 0;
-  background-repeat: no-repeat;
-  background-color: transparent;
-}
-
-.devtools-searchinput-clear:dir(rtl) {
-  right: unset;
-  left: 7px;
-}
-
-.devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear.svg");
-}
-
-.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
-}
-
-.devtools-searchinput-clear:hover {
-  background-position: -16px 0;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
-.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
-.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
 /* In-tools sidebar */
 
 .devtools-sidebar-tabs {
@@ -714,27 +281,3 @@ button + .devtools-searchbox {
   border: 0 !important;
   border-bottom: 3px solid  var(--theme-body-background) !important;
 }
-
-/* Throbbers */
-
-.devtools-throbber::before {
-  content: "";
-  display: inline-block;
-  vertical-align: bottom;
-  margin-inline-end: 0.5em;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: 1.1s linear throbber-spin infinite;
-}
-
-@keyframes throbber-spin {
-  from {
-    transform: none;
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css
index d3c842fb..4f3814a1 100644
--- a/LCARStrek/devtools/toolbox.css
+++ b/LCARStrek/devtools/toolbox.css
@@ -104,7 +104,6 @@ hbox#toolbox-buttons {
   border-width: 0;
 /*  border-inline-start-width: 1px;*/
   -moz-box-align: center;
-  -moz-user-focus: normal;
   -moz-box-flex: 1;
 
   color: var(--theme-button-color);
@@ -246,7 +245,6 @@ hbox#toolbox-buttons {
 #toolbox-controls > button,
 #toolbox-dock-buttons > button {
   -moz-appearance: none;
-  -moz-user-focus: normal;
   border: none;
 /*  margin: 0 4px;*/
   min-width: 18px;
@@ -269,12 +267,6 @@ hbox#toolbox-buttons {
   background-image: var(--dock-undock-image);
 }
 
-#toolbox-dock-bottom-minimize {
-  /* Bug 1177463 - The minimize button is currently hidden until we agree on
-     the UI for it, and until bug 1173849 is fixed too. */
-  display: none;
-}
-
 #toolbox-dock-bottom-minimize::before {
   background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
 }
@@ -304,7 +296,6 @@ hbox#toolbox-buttons {
   padding: 0;
   margin: 0;
   position: relative;
-  -moz-user-focus: normal;
 }
 
 .command-button::before {
@@ -392,7 +383,6 @@ hbox#toolbox-buttons {
 #command-button-frames {
   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
   background-repeat: no-repeat;
-  background-position: right;
 
   /* Override background-size from the command-button.
    The drop down arrow is smaller */
@@ -400,7 +390,11 @@ hbox#toolbox-buttons {
   min-width: 32px;
 }
 
-#command-button-frames:-moz-dir(rtl) {
+#command-button-frames:-moz-locale-dir(ltr) {
+  background-position: right;
+}
+
+#command-button-frames:-moz-locale-dir(rtl) {
   background-position: left;
 }
 
diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css
index ce0d175d..095b405d 100644
--- a/LCARStrek/devtools/webconsole.css
+++ b/LCARStrek/devtools/webconsole.css
@@ -356,17 +356,24 @@ a {
 
 .message[category=console][severity=error] > .icon::before,
 .message[category=output][severity=error] > .icon::before,
-.message[category=server][severity=error] > .icon::before {
+.message[category=server][severity=error] > .icon::before,
+.message.console-api.error > .icon::before,
+.message.output.error > .icon::before,
+.message.server.error > .icon::before {
   background-position: -12px -36px;
 }
 
 .message[category=console][severity=warn] > .icon::before,
-.message[category=server][severity=warn] > .icon::before {
+.message[category=server][severity=warn] > .icon::before,
+.message.console-api.warn > .icon::before,
+.message.server.warn > .icon::before {
   background-position: -24px -36px;
 }
 
 .message[category=console][severity=info] > .icon::before,
-.message[category=server][severity=info] > .icon::before {
+.message[category=server][severity=info] > .icon::before,
+.message.console-api.info > .icon::before,
+.message.server.info > .icon::before {
   background-position: -36px -36px;
 }
 
@@ -535,7 +542,8 @@ a {
   background-color: #000000;
 }
 
-.message[open] .stacktrace {
+.message[open] .stacktrace,
+.message.open .stacktrace {
   display: block;
 }
 
@@ -546,6 +554,12 @@ a {
   flex-shrink: 0;
 }
 
+/*Do not mirror the twisty because container force to ltr */
+.message .theme-twisty:dir(rtl),
+.message .theme-twisty:-moz-locale-dir(rtl) {
+  transform: none;
+}
+
 .cm-s-mozilla a[class] {
   font-style: italic;
   text-decoration: none;
diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css
index 67d6790a..ba1dba2c 100644
--- a/LCARStrek/devtools/widgets.css
+++ b/LCARStrek/devtools/widgets.css
@@ -207,7 +207,7 @@
 
 #breadcrumb-separator-after,
 #breadcrumb-separator-before:after {
-  background: var(--theme-toolbar-background);
+  background: var(--theme-body-background);
 }
 
 /* This chevron arrow cannot be replicated easily in CSS, so we are using
@@ -258,15 +258,6 @@
   color: var(--theme-active-color);
 }
 
-.breadcrumbs-widget-item:-moz-focusring {
-  outline: none;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-focusring > .button-box {
-  outline: var(--theme-focus-outline);
-  outline-offset: -1px;
-}
-
 .breadcrumbs-widget-item > .button-box {
   border: none;
   padding-top: 0;