third and last part of syncing LCARStrek with Firefox 52 browser windows theme changes

[themes.git] / LCARStrek / devtools / toolbox.css

diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css
index fa527f3cccb0800f1bbfd417de2f9b0fe444031c..4f3814a1434afec15ef08fcde00aebe67aa8a2d0 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 {
+.toolbox-tabs-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
+
+#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,24 @@
   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 +125,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 +139,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 +170,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 +199,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 +223,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,10 +234,17 @@
 
 /* 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;
-  -moz-user-focus: normal;
   border: none;
 /*  margin: 0 4px;*/
   min-width: 18px;
@@ -197,12 +267,6 @@
   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");
 }
@@ -223,6 +287,7 @@
 
 #toolbox-controls-separator {
   margin: 0;
+  width: 0;
 }
 
 /* Command buttons */
@@ -231,7 +296,6 @@
   padding: 0;
   margin: 0;
   position: relative;
-  -moz-user-focus: normal;
 }
 
 .command-button::before {
@@ -264,7 +328,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);
 }
 
@@ -317,7 +383,6 @@
 #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 */
@@ -325,7 +390,11 @@
   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;
 }