Add new light theme for Console tabs and tweak dark theme.

Author: adrianbj

TracyDebugger.module.php

@@ -27,7 +27,7 @@ public static function getModuleInfo() {
             'summary' => __('Tracy debugger from Nette with many PW specific custom tools.', __FILE__),
             'author' => 'Adrian Jones',
             'href' => 'https://processwire.com/talk/forum/58-tracy-debugger/',
-            'version' => '4.26.61',
+            'version' => '4.26.62',
             'autoload' => 100000, // in PW 3.0.114+ higher numbers are loaded first - we want Tracy first
             'singular' => true,
             'requires'  => 'ProcessWire>=2.7.2, PHP>=5.4.4',
@@ -311,6 +311,7 @@ static public function getDefaultData() {
             "forceEditorLinksToTracy" => 1,
             "localRootPath" => '',
             "aceTheme" => 'tomorrow_night_bright',
+            "consoleTabsTheme" => 'dark-theme',
             "codeFontSize" => 14,
             "codeLineHeight" => 24,
             "codeShowInvisibles" => true,
@@ -3874,6 +3875,16 @@ public function getModuleConfigInputfields(array $data) {
         $f->attr('value', $data['consoleBackupLimit']);
         $fieldset->add($f);
 
+        $f = $this->wire('modules')->get("InputfieldSelect");
+        $f->attr('name', 'consoleTabsTheme');
+        $f->label = __('Tabs Theme', __FILE__);
+        $f->columnWidth = 33;
+        $f->addOption('dark-theme', 'Dark');
+        $f->addOption('light-theme', 'Light');
+        $f->required = true;
+        if($data['consoleTabsTheme']) $f->attr('value', $data['consoleTabsTheme']);
+        $fieldset->add($f);
+
         $f = $this->wire('modules')->get("InputfieldTextarea");
         $f->attr('name', 'consoleCodePrefix');
         $f->label = __('Code prefix', __FILE__);

panels/ConsolePanel.php

@@ -1597,7 +1597,7 @@ function loadFAIfNotAlreadyLoaded() {
 
             <div style="position: relative; height: calc(100% - 80px)">
 
-                <div id="tracyConsoleMainContainer" style="position: absolute; height: 100%; width: '.($this->wire('input')->cookie->tracySnippetsPaneCollapsed ? '100%' : 'calc(100% - 290px)').'">
+                <div id="tracyConsoleMainContainer" class="'.\TracyDebugger::getDataValue('consoleTabsTheme').'" style="position: absolute; height: 100%; width: '.($this->wire('input')->cookie->tracySnippetsPaneCollapsed ? '100%' : 'calc(100% - 290px)').'">
 
                     <div id="consoleKeyboardShortcuts" class="keyboardShortcuts tracyHidden">';
                         $panel = 'console';
@@ -1655,7 +1655,7 @@ function loadFAIfNotAlreadyLoaded() {
                             </div>
                             <button id="addTab" title="Add tab" style="font-weight: 600">+</button>
                         </div>
-                        <div style="height: calc(100% - 36px)">
+                        <div style="height: calc(100% - 31px)">
                             <div id="tracyConsoleCode" class="split" style="position: relative; background: #FFFFFF;">
                                 <div id="tracyConsoleEditor" style="height: 100%; min-height: '.$codeLineHeight.'px"></div>
                             </div>

styles/styles.css

@@ -757,7 +757,7 @@ ul.pw-info-links {
     align-items: center;
     width: 100%;
     min-height: 30px;
-    background: #282C34;
+    background: #373b41;
     margin: 0;
     padding: 0;
 }
@@ -767,7 +767,7 @@ ul.pw-info-links {
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
-    background: #282C34;
+    background: #373b41;
     margin: 0;
     padding: 0;
 }
@@ -798,9 +798,9 @@ ul.pw-info-links {
     align-items: center;
     flex-shrink: 0;
     margin: 0 1px 0 0;
-    padding: 5px 3px 2px 6px;
-    height: 30px;
-    background-color: #3A3F47;
+    padding: 5px 3px 2px 8px;
+    height: 35px;
+    background-color: #2D2D2D;
     color: #D0D0D0;
     border: none;
     cursor: pointer;
@@ -809,13 +809,12 @@ ul.pw-info-links {
 }
 
 #tracyTabs button.active {
-    background-color: #282C34;
+    background-color: #000000;
     color: #FFFFFF;
-    border-bottom: 2px solid #61AFEF;
 }
 
 #tracyTabs button:hover {
-    background: #4B5258;
+    background: #000000;
     color: #FFFFFF;
 }
 
@@ -852,6 +851,60 @@ ul.pw-info-links {
     color: #FFFFFF;
 }
 
+#tracyConsoleContainer #addTab {
+    margin: 0 0 0 5px;
+    padding: 8px 12px;
+    font-size: 14px;
+    line-height: 19px;
+    background-color: #3E4451;
+    color: #DCDCDC;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    align-self: flex-start;
+}
+
+#tracyConsoleContainer #addTab:hover {
+    background-color: #4B5362;
+}
+
+/* Light Theme */
+.light-theme #tracyTabsContainer,
+.light-theme #tracyTabsWrapper {
+    background: #EAEAEA;
+}
+
+.light-theme #tracyTabsWrapper::-webkit-scrollbar-thumb {
+    background: #CCC;
+}
+
+.light-theme #tracyTabsWrapper::-webkit-scrollbar-thumb:hover {
+    background: #AAA;
+}
+
+.light-theme #tracyTabs button {
+    background-color: #DDDDDD;
+    color: #333;
+}
+
+.light-theme #tracyTabs button.active,
+.light-theme #tracyTabs button:hover {
+    background-color: #FFFFFF;
+    color: #000;
+}
+
+.light-theme #tracyTabs .close-button {
+    color: #333;
+}
+
+.light-theme #tracyConsoleContainer #addTab {
+    background-color: #CCC;
+    color: #333;
+}
+.light-theme #tracyConsoleContainer #addTab:hover {
+    background-color: #AAA;
+}
+
 /* Show close button when parent button is hovered */
 #tracyTabs button:hover .close-button {
     visibility: visible !important;
@@ -892,22 +945,6 @@ ul.pw-info-links {
     visibility: visible;
 }
 
-#tracyConsoleContainer #addTab {
-    margin: 0 0 0 5px;
-    padding: 6px 12px;
-    font-size: 14px;
-    line-height: 18px;
-    background-color: #3E4451;
-    color: #DCDCDC;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    align-self: flex-start;
-}
-
-#tracyConsoleContainer #addTab:hover {
-    background-color: #4B5362;
-}
 
 #tracy-debug #runInjectButton,
 #tracy-debug #historyBack,