make devtools toolbar and options work in current nightly

diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index 13a5a467a833d8e1f7269a56f05ae9a3da0f4974..7eefeac4b5dbdf83e8c668611375143df7f32659 100644 (file)
--- a/LCARStrek/devtools/toolbars.css
+++ b/LCARStrek/devtools/toolbars.css
@@ -56,14 +56,20 @@
 
 /* HTML Checkboxes - a lot copied from global/in-content/common.css */
 /* Hide the actual checkbox */
-input[type="checkbox"]:not(#browser-style-checkbox),
-#browser-style-checkbox:not([label]) { /* not()s are workaround for old placement of checkbox in label */
+input[type="checkbox"] {
   opacity: 0;
   width: 0;
   pointer-events: none;
   position: absolute;
 }
 
+label > input[type="checkbox"] { /* old placement of checkbox in label, undo above */
+  opacity: 1;
+  width: auto;
+  pointer-events: auto;
+  position: static;
+}
+
 /* Create a box to style as the checkbox */
 input[type="checkbox"] + label::before {
   display: inline-block;
@@ -125,7 +131,8 @@ input[type="checkbox"]:disabled + label {
 
 /* HTML toolbars - style them LCARStrek-like */
 
-div.devtools-toolbar {
+div.devtools-toolbar,
+div.devtools-tabbar {
   background-size: calc(100% - 30px);
   background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background));
   background-repeat: no-repeat;
@@ -134,7 +141,9 @@ div.devtools-toolbar {
 }
 
 div.devtools-toolbar::before,
-div.devtools-toolbar::after {
+div.devtools-toolbar::after,
+div.devtools-tabbar::before,
+div.devtools-tabbar::after {
   display: flex;
   content: "";
   width: 12px;
@@ -142,14 +151,16 @@ div.devtools-toolbar::after {
   background-color: var(--theme-toolbar-caps);
 }
 
-div.devtools-toolbar::before {
+div.devtools-toolbar::before,
+div.devtools-tabbar::before {
   border-radius: 8px 0px 0px 8px;
   border: none;
   border-inline-end: 3px solid black;
   margin-inline-end: 2px;
 }
 
-div.devtools-toolbar::after {
+div.devtools-toolbar::after,
+div.devtools-tabbar::after {
   border-radius: 0px 8px 8px 0px;
   border: none;
   border-inline-start: 3px solid black;
@@ -200,7 +211,8 @@ div.devtools-toolbar::after {
 }
 
 /* Menu type buttons and checked states */
-.devtools-button[checked] {
+.devtools-button[checked],
+.devtools-button.checked {
   background: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }

diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css
index fa527f3cccb0800f1bbfd417de2f9b0fe444031c..d3c842fb0cf2943ada65b943c388de7560d531db 100644 (file)
--- a/LCARStrek/devtools/toolbox.css
+++ b/LCARStrek/devtools/toolbox.css
@@ -33,16 +33,29 @@
   border: 0px solid;
   border-bottom-width: 1px;
   padding: 0;
-  background: var(--theme-tab-toolbar-background);
+  background: var(--theme-capped-toolbar-background);
   border-bottom-color: var(--theme-splitter-color);*/
 }
+div.devtools-tabbar {
+  border-bottom: 3px solid #000000;
+  display: flex;
+}
+
+.toolbox-tabs-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
 
-#toolbox-tabs {
+#toolbox-tabs,
+.toolbox-tabs {
   margin: 0;
   padding-inline-start: 3px;
   margin-inline-start: 2px;
   background-color: #000000;
   color: #FFCF00;
+  display: flex;
+  flex: 1;
 }
 
 /* Set flex attribute to Toolbox buttons and Picker container so,
@@ -50,11 +63,29 @@
 #toolbox-buttons {
   display: flex;
 }
+hbox#toolbox-buttons {
+  margin-inline-end: 2px;
+}
 
 #toolbox-picker-container {
   display: flex;
 }
 
+#toolbox-buttons-end {
+  display: flex;
+  margin-inline-end: 2px;
+}
+
+#toolbox-picker-container {
+  display: flex;
+}
+
+#toolbox-buttons-start {
+  border: solid 0 var(--theme-splitter-color);
+/*  border-inline-end-width: 1px;*/
+  display: flex;
+}
+
 /* Toolbox tabs */
 
 .devtools-tab {
@@ -68,15 +99,25 @@
   margin-inline-end: 3px;
   padding: 1px;
   padding-inline-start: 3px;
+  padding-inline-end: 3px;
   border-radius: 8px 8px 0 0;
-/*  border-width: 0;
-  border-inline-start-width: 1px;*/
+  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);
   background-color: var(--theme-button-background);
+
+  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  align-content: flex-start;
+  display: flex;
+  align-items: center;
 }
 
 .devtools-tab:hover,
@@ -85,7 +126,8 @@
   color: var(--theme-hover-color);
 }
 
-.devtools-tab:not([selected])[highlighted] {
+.devtools-tab:not([selected])[highlighted],
+.devtools-tab:not(.selected).highlighted {
   background-color: var(--theme-highlight-pink);
 }
 
@@ -98,6 +140,18 @@
   width: 16px; /* Prevents collapse during theme switching */
 }
 
+.devtools-tab > img {
+  border: none;
+  margin: 0;
+/*  margin-inline-start: 10px;
+  opacity: 0.6;*/
+  max-height: 16px;
+  width: 16px; /* Prevents collapse during theme switching */
+  vertical-align: middle;
+  margin-inline-end: 3px;
+}
+
+
 .devtools-tab > label {
   white-space: nowrap;
 /*  margin: 0 4px;*/
@@ -117,7 +171,8 @@
   -moz-box-flex: 0;
 }
 
-.devtools-tabbar .devtools-tab[selected] {
+.devtools-tabbar .devtools-tab[selected],
+.devtools-tabbar .devtools-tab.selected {
   color: var(--theme-selection-color);
   background-color: var(--theme-selection-background);
 }
@@ -145,6 +200,12 @@
 .devtools-tab:not([selected])[highlighted] > .default-icon {
   visibility: collapse;
 }
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab.selected > .highlighted-icon,
+.devtools-tab:not(.selected).highlighted > .default-icon {
+  display: none;
+}
+
 
 /* The options tab is special - it doesn't have the same parent
    as the other tabs (toolbox-option-container vs toolbox-tabs) */
@@ -163,6 +224,9 @@
 #toolbox-tab-options {
   min-width: 20px;
 }
+#toolbox-tab-options > img {
+  margin-inline-end: 0;
+}
 #toolbox-option-container {
   background-color: #000000;
   padding-inline-start: 3px;
@@ -171,6 +235,14 @@
 
 /* Toolbox controls */
 
+#toolbox-controls, #toolbox-dock-buttons {
+  display: flex;
+}
+
+#toolbox-controls {
+  margin-inline-end: 2px;
+}
+
 #toolbox-controls > button,
 #toolbox-dock-buttons > button {
   -moz-appearance: none;
@@ -223,6 +295,7 @@
 
 #toolbox-controls-separator {
   margin: 0;
+  width: 0;
 }
 
 /* Command buttons */
@@ -264,7 +337,9 @@
 .command-button:hover::before,
 .command-button:hover:active::before,
 .command-button[checked=true]::before,
-.command-button[open=true]::before {
+.command-button[open=true]::before,
+.command-button.checked::before,
+.command-button.open::before {
   filter: var(--checked-icon-filter);
 }