Style tweaks for console editor in fullscreen mode.

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.55',
+            'version' => '4.26.56',
             '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',

panels/ConsolePanel.php

@@ -1574,21 +1574,21 @@ function loadFAIfNotAlreadyLoaded() {
                     ';
 
                     $out .= '
-                    <div>
-                        <span style="display: inline-block; padding: 0 20px 10px 0">
+                    <div style="margin-bottom: 7px">
+                        <span style="display: inline-block; padding: 0 20px 5px 0">
                             <input id="reloadSnippet" title="Reload current snippet from disk" class="disabledButton" style="font-family: FontAwesome !important; padding: 3px 8px !important" type="submit" onclick="tracyConsole.reloadSnippet()" value="&#xf021" disabled="true" />&nbsp;&nbsp;
                             <input style="font-family: FontAwesome !important" title="Go back (ALT + PageUp)" id="historyBack" class="disabledButton" disabled="true" type="submit" onclick="tracyConsole.loadHistory(\'back\')" value="&#xf060;" />&nbsp;
                             <input style="font-family: FontAwesome !important" title="Go forward (ALT + PageDown)" id="historyForward" class="disabledButton" disabled="true" type="submit" onclick="tracyConsole.loadHistory(\'forward\')" value="&#xf061;" />&nbsp;
                             <input title="Clear results" type="button" class="clearResults" onclick="tracyConsole.clearResults()" value="&#10006; Clear results" />
                         </span>
 
-                        <span style="display: inline-block; padding: 0 20px 10px 0">
+                        <span style="display: inline-block; padding: 0 20px 5px 0">
                             <label title="Backup entire database before executing script.">
                                 <input type="checkbox" id="dbBackup" '.($this->wire('input')->cookie->tracyDbBackup ? 'checked="checked"' : '').' onclick="tracyConsole.updateBackupState();" /> Backup DB
                             </label>&nbsp;&nbsp;
                             <input id="backupFilename" type="text" placeholder="Backup name (optional)" '.($this->wire('input')->cookie->tracyDbBackup ? 'style="display:inline-block !important"' : 'style="display:none !important"').' '.($this->wire('input')->cookie->tracyDbBackupFilename ? 'value="'.$this->wire('input')->cookie->tracyDbBackupFilename.'"' : '').' />
                         </span>
-                        <span style="display: inline-block; padding: 0 20px 10px 0">
+                        <span style="display: inline-block; padding: 0 20px 5px 0">
                             <label title="Send full stack trace of errors to Tracy bluescreen">
                                 <input type="checkbox" id="allowBluescreen" /> Allow bluescreen
                             </label>
@@ -1597,7 +1597,7 @@ function loadFAIfNotAlreadyLoaded() {
 
                         if(!$inAdmin) {
                             $out .= '
-                        <span style="display: inline-block; padding: 0 20px 10px 0">
+                        <span style="display: inline-block; padding: 0 20px 5px 0">
                             <label title="Access custom variables & functions from this page\'s template file & included files."><input type="checkbox" id="accessTemplateVars" onclick="tracyConsole.tce.focus();" /> Template resources</label>
                         </span>';
                         }

styles/styles.css

@@ -750,6 +750,7 @@ ul.pw-info-links {
     display: flex;
     align-items: center;
     width: 100%;
+    background: #FFFFFF;
 }
 
 #tracyTabsWrapper {
@@ -760,36 +761,37 @@ ul.pw-info-links {
     white-space: nowrap;
     margin: 0;
     padding: 0;
-  }
+    background: #FFFFFF;
+}
 
-  #tracyTabs {
+#tracyTabs {
     display: inline-flex;
     align-items: center;
-    margin: 5px 0 0 0;
-  }
+    margin: 0;
+}
 
-  #tracyTabs button {
+#tracyTabs button {
     flex-shrink: 0; /* Prevent buttons from shrinking */
     margin: 0 4px 0 0;
     padding: 5px 7px 5px 0;
     cursor: pointer;
     border: solid #ccc;
     border-width: 1px 1px 0 1px;
     background-color: white;
-  }
+}
 
-  #tracyTabsWrapper::-webkit-scrollbar {
+#tracyTabsWrapper::-webkit-scrollbar {
     height: 6px;
-  }
+}
 
-  #tracyTabsWrapper::-webkit-scrollbar-thumb {
+#tracyTabsWrapper::-webkit-scrollbar-thumb {
     background: #888;
     border-radius: 3px;
-  }
+}
 
-  #tracyTabsWrapper::-webkit-scrollbar-thumb:hover {
+#tracyTabsWrapper::-webkit-scrollbar-thumb:hover {
     background: #555;
-  }
+}
 
 #tracyTabs button.active {
     background-color: #e6ebf2;