Merge pull request codeigniter4#8595 from ddevsr/debug-bar-scroll-top

fix: [DebugBar] scroll to top
justbyitself · Mar 10, 2024 · e6052cf · e6052cf
2 parents 9342e38 + 0fc5485
commit e6052cf
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 38 deletions.
diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss
@@ -13,7 +13,6 @@
 @import '_mixins';
 @import '_settings';
 
-
 // DEBUG ICON
 // ========================================================================== */
 
@@ -36,6 +35,8 @@
     clear: both;
     text-align: center;
 
+    cursor: pointer;
+
     a svg {
         margin: 8px;
         max-width: 20px;
@@ -56,6 +57,10 @@
 // DEBUG BAR
 // ========================================================================== */
 
+.debug-bar-vars {
+    cursor: pointer;
+}
+
 #debug-bar {
     // Position
     bottom: 0;
@@ -227,21 +232,21 @@
     // The toolbar preferences
     #toolbar-position,
     #toolbar-theme {
-        a {
-            padding: 0 6px;
-            display: inline-flex;
-            vertical-align: top;
+        padding: 0 6px;
+        display: inline-flex;
+        vertical-align: top;
+        cursor: pointer;
 
-            &:hover {
-                text-decoration: none;
-            }
+        &:hover {
+            text-decoration: none;
         }
     }
 
     // The "Open/Close" toggle
     #debug-bar-link {
         display: flex;
         padding: 6px;
+        cursor: pointer;
     }
 
     // The toolbar menus
@@ -518,43 +523,43 @@
 .debug-bar-dtableRow {
     display: table-row;
 }
-  
+
 .debug-bar-dinlineBlock {
     display: inline-block;
 }
-  
+
 .debug-bar-pointer {
     cursor: pointer;
 }
-  
+
 .debug-bar-mleft4 {
     margin-left: 4px;
 }
-  
+
 .debug-bar-level-0 {
     --level: 0;
 }
-  
+
 .debug-bar-level-1 {
     --level: 1;
 }
-  
+
 .debug-bar-level-2 {
     --level: 2;
 }
-  
+
 .debug-bar-level-3 {
     --level: 3;
 }
-  
+
 .debug-bar-level-4 {
     --level: 4;
 }
-  
+
 .debug-bar-level-5 {
     --level: 5;
 }
-  
+
 .debug-bar-level-6 {
     --level: 6;
 }
diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css
@@ -17,6 +17,7 @@
   padding: 0px;
   clear: both;
   text-align: center;
+  cursor: pointer;
 }
 #debug-icon a svg {
   margin: 8px;
@@ -31,6 +32,10 @@
   display: none;
 }
 
+.debug-bar-vars {
+  cursor: pointer;
+}
+
 #debug-bar {
   bottom: 0;
   left: 0;
@@ -156,19 +161,21 @@
   bottom: auto;
   top: 36px;
 }
-#debug-bar #toolbar-position a,
-#debug-bar #toolbar-theme a {
+#debug-bar #toolbar-position,
+#debug-bar #toolbar-theme {
   padding: 0 6px;
   display: inline-flex;
   vertical-align: top;
+  cursor: pointer;
 }
-#debug-bar #toolbar-position a:hover,
-#debug-bar #toolbar-theme a:hover {
+#debug-bar #toolbar-position:hover,
+#debug-bar #toolbar-theme:hover {
   text-decoration: none;
 }
 #debug-bar #debug-bar-link {
   display: flex;
   padding: 6px;
+  cursor: pointer;
 }
 #debug-bar .ci-label {
   display: inline-flex;

diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php
@@ -27,21 +27,21 @@
     <?= file_get_contents(__DIR__ . '/toolbar.js') ?>
 </script>
 <div id="debug-icon" class="debug-bar-ndisplay">
-    <a id="debug-icon-link" href="#">
+    <a id="debug-icon-link">
         <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 155 200"><defs/><path fill="#dd4814" d="M73.7 3.7c2.2 7.9-.7 18.5-7.8 29-1.8 2.6-10.7 12.2-19.7 21.3-23.9 24-33.6 37.1-40.3 54.4-7.9 20.6-7.8 40.8.5 58.2C12.8 180 27.6 193 42.5 198l6 2-3-2.2c-21-15.2-22.9-38.7-4.8-58.8 2.5-2.7 4.8-5 5.1-5 .4 0 .7 2.7.7 6.1 0 5.7.2 6.2 3.7 9.5 3 2.7 4.6 3.4 7.8 3.4 5.6 0 9.9-2.4 11.6-6.5 2.9-6.9 1.6-12-5-20.5-10.5-13.4-11.7-23.3-4.3-34.7l3.1-4.8.7 4.7c1.3 8.2 5.8 12.9 25 25.8 20.9 14.1 30.6 26.1 32.8 40.5 1.1 7.2-.1 16.1-3.1 21.8-2.7 5.3-11.2 14.3-16.5 17.4-2.4 1.4-4.3 2.6-4.3 2.8 0 .2 2.4-.4 5.3-1.4 24.1-8.3 42.7-27.1 48.2-48.6 1.9-7.6 1.9-20.2-.1-28.5-3.5-15.2-14.6-30.5-29.9-41.2l-7-4.9-.6 3.3c-.8 4.8-2.6 7.6-5.9 9.3-4.5 2.3-10.3 1.9-13.8-1-6.7-5.7-7.8-14.6-3.7-30.5 3-11.6 3.2-20.6.5-29.1C88.3 18 80.6 6.3 74.8 2.2 73.1.9 73 1 73.7 3.7z"/></svg>
     </a>
 </div>
 <div id="debug-bar">
     <div class="toolbar">
-        <span id="toolbar-position"><a href="#">&#8597;</a></span>
-        <span id="toolbar-theme"><a href="#">&#128261;</a></span>
+        <span id="toolbar-position">&#8597;</span>
+        <span id="toolbar-theme">&#128261;</span>
         <span id="hot-reload-btn" class="ci-label">
-            <a id="debug-hot-reload" href="#" title="Toggle Hot Reload">
+            <a id="debug-hot-reload" title="Toggle Hot Reload">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR4nN2US04CQRCGv/DaiBxEvYWuBRPDKSCIXsCdcg0ULqTI8xIGN7JwTCU/ScV5tTO64Us6maSq/7+nuqvgkLgHopTl+QAWwBToAg3+wMTzM7YBrihp4jkCToEB8OJyRkCFAB5yDDxVoAd8OpNMOkrcAeMAgz3nzsQ0EqkDayXZqXy5Qugrdy2tGNdKeNWv40xCqGpvJK0YEwXt8ooylMZzUnCh4EkJgzNpmFaMrYLNEgbH0thmGVhSUVrSeE8KLv+7RBMFb0oY3EnDeihGN+WZhmJ7ZlnPtKHB5RvtNwy0d5XWaGgqRmp7a/9QLjRevoDLvOSRM+nnlKumk++0xwZlLhVnEulOhnohTS37vnU1t5M/ho7rPR03/LKW1bxNQep6ETZb5mpGW2/Ak2KpF3oYfAPX9Xpc671kqwAAAABJRU5ErkJggg==" />
             </a>
         </span>
         <span class="ci-label">
-            <a href="#" data-tab="ci-timeline">
+            <a data-tab="ci-timeline">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD7SURBVEhLY6ArSEtLK09NTbWHcvGC9PR0BaDaQiAdUl9fzwQVxg+AFvwHamqHcnGCpKQkeaDa9yD1UD09UCn8AKaBWJySkmIApFehi0ONwwRQBceBLurAh4FqFoHUAtkrgPgREN+ByYEw1DhMANVEMIhAYQ5U1wtU/wmILwLZRlAp/IBYC8gGw88CaFj3A/FnIL4ETDXGUCnyANSC/UC6HIpnQMXAqQXIvo0khxNDjcMEQEmU9AzDuNI7Lgw1DhOAJIEuhQcRKMcC+e+QNHdDpcgD6BaAANSSQqBcENFlDi6AzQKqgkFlwWhxjVI8o2OgmkFaXI8CTMDAAAAxd1O4FzLMaAAAAABJRU5ErkJggg==">
                 <span class="hide-sm"><?= $totalTime ?> ms &nbsp; <?= $totalMemory ?> MB</span>
             </a>
@@ -50,7 +50,7 @@
         <?php foreach ($collectors as $c) : ?>
             <?php if (! $c['isEmpty'] && ($c['hasTabContent'] || $c['hasLabel'])) : ?>
                 <span class="ci-label">
-                    <a href="#" data-tab="ci-<?= $c['titleSafe'] ?>">
+                    <a data-tab="ci-<?= $c['titleSafe'] ?>">
                         <img src="<?= $c['icon'] ?>">
                         <span class="hide-sm">
                             <?= $c['title'] ?>
@@ -64,23 +64,23 @@
         <?php endforeach ?>
 
         <span class="ci-label">
-            <a href="#" data-tab="ci-vars">
+            <a data-tab="ci-vars">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACLSURBVEhLYxgFJIHU1NSraWlp/6H4T0pKSjRUijoAyXAwBlrYDpViAFpmARQrJwZDtWACoCROC4D8CnR5XBiqBRMADfyNprgRKkUdAApzoCUdUNwE5MtApYYIALp6NBWBMVQLJgAaOJqK8AOgq+mSio6DggjEBtLUT0UwQ5HZIADkj6aiUTAggIEBANAEDa/lkCRlAAAAAElFTkSuQmCC">
                 <span class="hide-sm">Vars</span>
             </a>
         </span>
 
         <h1>
             <span class="ci-label">
-                <a href="#" data-tab="ci-config">
+                <a data-tab="ci-config">
                     <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 155 200"><defs/><path fill="#dd4814" d="M73.7 3.7c2.2 7.9-.7 18.5-7.8 29-1.8 2.6-10.7 12.2-19.7 21.3-23.9 24-33.6 37.1-40.3 54.4-7.9 20.6-7.8 40.8.5 58.2C12.8 180 27.6 193 42.5 198l6 2-3-2.2c-21-15.2-22.9-38.7-4.8-58.8 2.5-2.7 4.8-5 5.1-5 .4 0 .7 2.7.7 6.1 0 5.7.2 6.2 3.7 9.5 3 2.7 4.6 3.4 7.8 3.4 5.6 0 9.9-2.4 11.6-6.5 2.9-6.9 1.6-12-5-20.5-10.5-13.4-11.7-23.3-4.3-34.7l3.1-4.8.7 4.7c1.3 8.2 5.8 12.9 25 25.8 20.9 14.1 30.6 26.1 32.8 40.5 1.1 7.2-.1 16.1-3.1 21.8-2.7 5.3-11.2 14.3-16.5 17.4-2.4 1.4-4.3 2.6-4.3 2.8 0 .2 2.4-.4 5.3-1.4 24.1-8.3 42.7-27.1 48.2-48.6 1.9-7.6 1.9-20.2-.1-28.5-3.5-15.2-14.6-30.5-29.9-41.2l-7-4.9-.6 3.3c-.8 4.8-2.6 7.6-5.9 9.3-4.5 2.3-10.3 1.9-13.8-1-6.7-5.7-7.8-14.6-3.7-30.5 3-11.6 3.2-20.6.5-29.1C88.3 18 80.6 6.3 74.8 2.2 73.1.9 73 1 73.7 3.7z"/></svg>
                     <?= $CI_VERSION ?>
                 </a>
             </span>
         </h1>
 
         <!-- Open/Close Toggle -->
-        <a id="debug-bar-link" href="#" title="Open/Close">
+        <a id="debug-bar-link" role="button" title="Open/Close">
             <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEPSURBVEhL7ZVLDoJAEEThRuoGDwSEG+jCuFU34s3AK3APP1VDDSGMqI1xx0s6M/2rnlHEaMZElmWrPM+vsDvsYbQ7+us0TReSC2EBrEHxCevRYuppYLXkQpC8sVCuGfTvqSE3hFdFwUGuGfRvqSE35NUAfKZrbQNQm2jrMA+gOK+M+FmhDsRL5voHMA8gFGecq0JOXLWlQg7E7AMIxZnjOiZOEJ82gFCcedUE4gS56QP8yf8ywItz7e+RituKlkkDBoIOH4Nd4HZD4NsGYJ/Abn1xEVOcuZ8f0zc/tHiYmzTAwscBvDIK/veyQ9K/rnewjdF26q0kF1IUxZIFPAVW98x/a+qp8L2M/+HMhETRE6S8TxpZ7KGXAAAAAElFTkSuQmCC">
         </a>
     </div>
@@ -124,7 +124,7 @@
         <?php if (isset($vars['varData'])) : ?>
             <?php foreach ($vars['varData'] as $heading => $items) : ?>
 
-                <a href="#" data-toggle="datatable" data-table="<?= strtolower(str_replace(' ', '-', $heading)) ?>">
+                <a class="debug-bar-vars" data-toggle="datatable" data-table="<?= strtolower(str_replace(' ', '-', $heading)) ?>">
                     <h2><?= $heading ?></h2>
                 </a>
 
@@ -148,7 +148,7 @@
         <?php endif ?>
 
         <!-- Session -->
-        <a href="#" data-toggle="datatable" data-table="session">
+        <a class="debug-bar-vars" data-toggle="datatable" data-table="session">
             <h2>Session User Data</h2>
         </a>
 
@@ -174,7 +174,7 @@
         <h2>Request <span>( <?= $vars['request'] ?> )</span></h2>
 
         <?php if (isset($vars['get']) && $get = $vars['get']) : ?>
-            <a href="#" data-toggle="datatable" data-table="get">
+            <a class="debug-bar-vars" data-toggle="datatable" data-table="get">
                 <h3>$_GET</h3>
             </a>
 
@@ -191,7 +191,7 @@
         <?php endif ?>
 
         <?php if (isset($vars['post']) && $post = $vars['post']) : ?>
-            <a href="#" data-toggle="datatable" data-table="post">
+            <a class="debug-bar-vars" data-toggle="datatable" data-table="post">
                 <h3>$_POST</h3>
             </a>
 
@@ -208,7 +208,7 @@
         <?php endif ?>
 
         <?php if (isset($vars['headers']) && $headers = $vars['headers']) : ?>
-            <a href="#" data-toggle="datatable" data-table="request_headers">
+            <a class="debug-bar-vars" data-toggle="datatable" data-table="request_headers">
                 <h3>Headers</h3>
             </a>
 
@@ -225,7 +225,7 @@
         <?php endif ?>
 
         <?php if (isset($vars['cookies']) && $cookies = $vars['cookies']) : ?>
-            <a href="#" data-toggle="datatable" data-table="cookie">
+            <a class="debug-bar-vars" data-toggle="datatable" data-table="cookie">
                 <h3>Cookies</h3>
             </a>
 
@@ -246,7 +246,7 @@
         </h2>
 
         <?php if (isset($vars['response']['headers']) && $headers = $vars['response']['headers']) : ?>
-            <a href="#" data-toggle="datatable" data-table="response_headers">
+            <a class="debug-bar-vars" data-toggle="datatable" data-table="response_headers">
                 <h3>Headers</h3>
             </a>