From d709e85215de54fa0d5fcb18515e294426043ff7 Mon Sep 17 00:00:00 2001
From: Denny Septian Panggabean <xamidimura@gmail.com>
Date: Fri, 1 Mar 2024 09:13:52 +0700
Subject: [PATCH 1/5] fix: [DebugBar] scroll to top on open/close

---
 system/Debug/Toolbar/Views/toolbar.tpl.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php
index e2336326088e..768f9d38c65e 100644
--- a/system/Debug/Toolbar/Views/toolbar.tpl.php
+++ b/system/Debug/Toolbar/Views/toolbar.tpl.php
@@ -27,7 +27,7 @@
     <?= 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>
@@ -80,7 +80,7 @@
         </h1>
 
         <!-- Open/Close Toggle -->
-        <a id="debug-bar-link" href="#" title="Open/Close">
+        <a id="debug-bar-link" 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>

From 91c3c59c94ebac13a7cbc3e080f0329577ac3bcd Mon Sep 17 00:00:00 2001
From: Denny Septian Panggabean <xamidimura@gmail.com>
Date: Sat, 2 Mar 2024 07:04:45 +0700
Subject: [PATCH 2/5] change all href to role button

---
 system/Debug/Toolbar/Views/toolbar.tpl.php | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php
index 768f9d38c65e..4bae5b54c7c7 100644
--- a/system/Debug/Toolbar/Views/toolbar.tpl.php
+++ b/system/Debug/Toolbar/Views/toolbar.tpl.php
@@ -33,15 +33,15 @@
 </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,7 +64,7 @@
         <?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>
@@ -72,7 +72,7 @@
 
         <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>
@@ -80,7 +80,7 @@
         </h1>
 
         <!-- Open/Close Toggle -->
-        <a id="debug-bar-link" 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 role="button" 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 role="button" 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 role="button" 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 role="button" 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 role="button" 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 role="button" 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 role="button" data-toggle="datatable" data-table="response_headers">
                 <h3>Headers</h3>
             </a>
 

From e2c488b610616fea0b12d0eceb5d893c314ad393 Mon Sep 17 00:00:00 2001
From: Denny Septian Panggabean <xamidimura@gmail.com>
Date: Sat, 2 Mar 2024 07:05:25 +0700
Subject: [PATCH 3/5] style css and run sass

---
 admin/css/debug-toolbar/toolbar.scss   | 39 +++++++++++++++-----------
 system/Debug/Toolbar/Views/toolbar.css | 14 ++++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss
index 9c5b149d392c..8d7bed21b361 100644
--- a/admin/css/debug-toolbar/toolbar.scss
+++ b/admin/css/debug-toolbar/toolbar.scss
@@ -13,6 +13,9 @@
 @import '_mixins';
 @import '_settings';
 
+[role="button"] {
+    cursor: pointer;
+}
 
 // DEBUG ICON
 // ========================================================================== */
@@ -36,6 +39,9 @@
     clear: both;
     text-align: center;
 
+    // Cursor
+    cursor: pointer;
+
     a svg {
         margin: 8px;
         max-width: 20px;
@@ -227,14 +233,13 @@
     // 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;
         }
     }
 
@@ -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
index a3b934b68bd4..175f7725f8c8 100644
--- a/system/Debug/Toolbar/Views/toolbar.css
+++ b/system/Debug/Toolbar/Views/toolbar.css
@@ -6,6 +6,10 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+[role=button] {
+  cursor: pointer;
+}
+
 #debug-icon {
   bottom: 0;
   position: fixed;
@@ -17,6 +21,7 @@
   padding: 0px;
   clear: both;
   text-align: center;
+  cursor: pointer;
 }
 #debug-icon a svg {
   margin: 8px;
@@ -156,14 +161,15 @@
   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 {

From 1ceafd6727924694b2bbd8e2b839061eecb93f2a Mon Sep 17 00:00:00 2001
From: Denny Septian Panggabean <xamidimura@gmail.com>
Date: Sat, 2 Mar 2024 07:10:10 +0700
Subject: [PATCH 4/5] just element anchor in role button

---
 admin/css/debug-toolbar/toolbar.scss   | 2 +-
 system/Debug/Toolbar/Views/toolbar.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss
index 8d7bed21b361..dfcb7e58aeea 100644
--- a/admin/css/debug-toolbar/toolbar.scss
+++ b/admin/css/debug-toolbar/toolbar.scss
@@ -13,7 +13,7 @@
 @import '_mixins';
 @import '_settings';
 
-[role="button"] {
+a[role="button"] {
     cursor: pointer;
 }
 
diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css
index 175f7725f8c8..612a1ee873e1 100644
--- a/system/Debug/Toolbar/Views/toolbar.css
+++ b/system/Debug/Toolbar/Views/toolbar.css
@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-[role=button] {
+a[role=button] {
   cursor: pointer;
 }
 

From 0fc548518e0a6f53f70ea0a3359dde927af6caf2 Mon Sep 17 00:00:00 2001
From: Denny Septian Panggabean <xamidimura@gmail.com>
Date: Sat, 9 Mar 2024 06:46:03 +0700
Subject: [PATCH 5/5] fix: make css button for vars

---
 admin/css/debug-toolbar/toolbar.scss       | 10 +++++-----
 system/Debug/Toolbar/Views/toolbar.css     |  9 +++++----
 system/Debug/Toolbar/Views/toolbar.tpl.php | 14 +++++++-------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss
index dfcb7e58aeea..e129a4b1c5b6 100644
--- a/admin/css/debug-toolbar/toolbar.scss
+++ b/admin/css/debug-toolbar/toolbar.scss
@@ -13,10 +13,6 @@
 @import '_mixins';
 @import '_settings';
 
-a[role="button"] {
-    cursor: pointer;
-}
-
 // DEBUG ICON
 // ========================================================================== */
 
@@ -39,7 +35,6 @@ a[role="button"] {
     clear: both;
     text-align: center;
 
-    // Cursor
     cursor: pointer;
 
     a svg {
@@ -62,6 +57,10 @@ a[role="button"] {
 // DEBUG BAR
 // ========================================================================== */
 
+.debug-bar-vars {
+    cursor: pointer;
+}
+
 #debug-bar {
     // Position
     bottom: 0;
@@ -247,6 +246,7 @@ a[role="button"] {
     #debug-bar-link {
         display: flex;
         padding: 6px;
+        cursor: pointer;
     }
 
     // The toolbar menus
diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css
index 612a1ee873e1..4154f4c5c4ca 100644
--- a/system/Debug/Toolbar/Views/toolbar.css
+++ b/system/Debug/Toolbar/Views/toolbar.css
@@ -6,10 +6,6 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-a[role=button] {
-  cursor: pointer;
-}
-
 #debug-icon {
   bottom: 0;
   position: fixed;
@@ -36,6 +32,10 @@ a[role=button] {
   display: none;
 }
 
+.debug-bar-vars {
+  cursor: pointer;
+}
+
 #debug-bar {
   bottom: 0;
   left: 0;
@@ -175,6 +175,7 @@ a[role=button] {
 #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
index 4bae5b54c7c7..03500456757e 100644
--- a/system/Debug/Toolbar/Views/toolbar.tpl.php
+++ b/system/Debug/Toolbar/Views/toolbar.tpl.php
@@ -124,7 +124,7 @@
         <?php if (isset($vars['varData'])) : ?>
             <?php foreach ($vars['varData'] as $heading => $items) : ?>
 
-                <a role="button" 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 role="button" 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 role="button" 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 role="button" 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 role="button" 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 role="button" 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 role="button" data-toggle="datatable" data-table="response_headers">
+            <a class="debug-bar-vars" data-toggle="datatable" data-table="response_headers">
                 <h3>Headers</h3>
             </a>