@@ -49,7 +49,7 @@ var ciDebugBar = {
4949 var tab = ciDebugBar . readCookie ( "debug-bar-tab" ) ;
5050 if ( document . getElementById ( tab ) ) {
5151 var el = document . getElementById ( tab ) ;
52- el . style . display = "block" ;
52+ ciDebugBar . switchClass ( el , "debug-bar-ndisplay" , "debug-bar-dblock" ) ;
5353 ciDebugBar . addClass ( el , "active" ) ;
5454 tab = document . querySelector ( "[data-tab=" + tab + "]" ) ;
5555 if ( tab ) {
@@ -70,7 +70,24 @@ var ciDebugBar = {
7070 // Hook up generic toggle via data attributes `data-toggle="foo"`
7171 var links = this . toolbar . querySelectorAll ( "[data-toggle]" ) ;
7272 for ( var i = 0 ; i < links . length ; i ++ ) {
73- links [ i ] . addEventListener ( "click" , ciDebugBar . toggleRows , true ) ;
73+ let toggleData = links [ i ] . getAttribute ( "data-toggle" ) ;
74+ if ( toggleData == "datatable" ) {
75+
76+ let datatable = links [ i ] . getAttribute ( "data-table" ) ;
77+ links [ i ] . addEventListener ( "click" , function ( ) {
78+ ciDebugBar . toggleDataTable ( datatable )
79+ } , true ) ;
80+
81+ } else if ( toggleData == "childrows" ) {
82+
83+ let child = links [ i ] . getAttribute ( "data-child" ) ;
84+ links [ i ] . addEventListener ( "click" , function ( ) {
85+ ciDebugBar . toggleChildRows ( child )
86+ } , true ) ;
87+
88+ } else {
89+ links [ i ] . addEventListener ( "click" , ciDebugBar . toggleRows , true ) ;
90+ }
7491 }
7592 } ,
7693
@@ -79,21 +96,21 @@ var ciDebugBar = {
7996 var tab = document . getElementById ( this . getAttribute ( "data-tab" ) ) ;
8097
8198 // If the label have not a tab stops here
82- if ( ! tab ) {
99+ if ( ! tab ) {
83100 return ;
84101 }
85102
86103 // Remove debug-bar-tab cookie
87104 ciDebugBar . createCookie ( "debug-bar-tab" , "" , - 1 ) ;
88105
89106 // Check our current state.
90- var state = tab . style . display ;
107+ var state = tab . classList . contains ( "debug-bar-dblock" ) ;
91108
92109 // Hide all tabs
93110 var tabs = document . querySelectorAll ( "#debug-bar .tab" ) ;
94111
95112 for ( var i = 0 ; i < tabs . length ; i ++ ) {
96- tabs [ i ] . style . display = "none" ;
113+ ciDebugBar . switchClass ( tabs [ i ] , "debug-bar-dblock" , "debug-bar-ndisplay" ) ;
97114 }
98115
99116 // Mark all labels as inactive
@@ -104,8 +121,8 @@ var ciDebugBar = {
104121 }
105122
106123 // Show/hide the selected tab
107- if ( state != "block" ) {
108- tab . style . display = "block" ;
124+ if ( ! state ) {
125+ ciDebugBar . switchClass ( tab , "debug-bar-ndisplay" , "debug-bar-dblock" ) ;
109126 ciDebugBar . addClass ( this . parentNode , "active" ) ;
110127 // Create debug-bar-tab cookie to persistent state
111128 ciDebugBar . createCookie (
@@ -138,6 +155,11 @@ var ciDebugBar = {
138155 }
139156 } ,
140157
158+ switchClass : function ( el , classFrom , classTo ) {
159+ ciDebugBar . removeClass ( el , classFrom ) ;
160+ ciDebugBar . addClass ( el , classTo ) ;
161+ } ,
162+
141163 /**
142164 * Toggle display of another object based on
143165 * the data-toggle value of this object
@@ -150,8 +172,12 @@ var ciDebugBar = {
150172 let target = document . getElementById (
151173 row . getAttribute ( "data-toggle" )
152174 ) ;
153- target . style . display =
154- target . style . display === "none" ? "table-row" : "none" ;
175+
176+ if ( target . classList . contains ( "debug-bar-ndisplay" ) ) {
177+ ciDebugBar . switchClass ( target , "debug-bar-ndisplay" , "debug-bar-dtableRow" ) ;
178+ } else {
179+ ciDebugBar . switchClass ( target , "debug-bar-dtableRow" , "debug-bar-ndisplay" ) ;
180+ }
155181 }
156182 } ,
157183
@@ -166,7 +192,11 @@ var ciDebugBar = {
166192 }
167193
168194 if ( obj ) {
169- obj . style . display = obj . style . display === "none" ? "block" : "none" ;
195+ if ( obj . classList . contains ( "debug-bar-ndisplay" ) ) {
196+ ciDebugBar . switchClass ( obj , "debug-bar-ndisplay" , "debug-bar-dblock" ) ;
197+ } else {
198+ ciDebugBar . switchClass ( obj , "debug-bar-dblock" , "debug-bar-ndisplay" ) ;
199+ }
170200 }
171201 } ,
172202
@@ -182,7 +212,13 @@ var ciDebugBar = {
182212 }
183213
184214 if ( par && obj ) {
185- obj . style . display = obj . style . display === "none" ? "" : "none" ;
215+
216+ if ( obj . classList . contains ( "debug-bar-ndisplay" ) ) {
217+ ciDebugBar . removeClass ( obj , "debug-bar-ndisplay" ) ;
218+ } else {
219+ ciDebugBar . addClass ( obj , "debug-bar-ndisplay" ) ;
220+ }
221+
186222 par . classList . toggle ( "timeline-parent-open" ) ;
187223 }
188224 } ,
@@ -193,11 +229,15 @@ var ciDebugBar = {
193229 * Toggle tool bar from full to icon and icon to full
194230 */
195231 toggleToolbar : function ( ) {
196- var open = ciDebugBar . toolbar . style . display != "none" ;
197-
198- ciDebugBar . icon . style . display = open == true ? "inline-block" : "none" ;
199- ciDebugBar . toolbar . style . display =
200- open == false ? "inline-block" : "none" ;
232+ var open = ! ciDebugBar . toolbar . classList . contains ( "debug-bar-ndisplay" ) ;
233+
234+ if ( open ) {
235+ ciDebugBar . switchClass ( ciDebugBar . icon , "debug-bar-ndisplay" , "debug-bar-dinlineBlock" ) ;
236+ ciDebugBar . switchClass ( ciDebugBar . toolbar , "debug-bar-dinlineBlock" , "debug-bar-ndisplay" ) ;
237+ } else {
238+ ciDebugBar . switchClass ( ciDebugBar . icon , "debug-bar-dinlineBlock" , "debug-bar-ndisplay" ) ;
239+ ciDebugBar . switchClass ( ciDebugBar . toolbar , "debug-bar-ndisplay" , "debug-bar-dinlineBlock" ) ;
240+ }
201241
202242 // Remember it for other page loads on this site
203243 ciDebugBar . createCookie ( "debug-bar-state" , "" , - 1 ) ;
@@ -215,10 +255,13 @@ var ciDebugBar = {
215255 setToolbarState : function ( ) {
216256 var open = ciDebugBar . readCookie ( "debug-bar-state" ) ;
217257
218- ciDebugBar . icon . style . display =
219- open != "open" ? "inline-block" : "none" ;
220- ciDebugBar . toolbar . style . display =
221- open == "open" ? "inline-block" : "none" ;
258+ if ( open != "open" ) {
259+ ciDebugBar . switchClass ( ciDebugBar . icon , "debug-bar-ndisplay" , "debug-bar-dinlineBlock" ) ;
260+ ciDebugBar . switchClass ( ciDebugBar . toolbar , "debug-bar-dinlineBlock" , "debug-bar-ndisplay" ) ;
261+ } else {
262+ ciDebugBar . switchClass ( ciDebugBar . icon , "debug-bar-dinlineBlock" , "debug-bar-ndisplay" ) ;
263+ ciDebugBar . switchClass ( ciDebugBar . toolbar , "debug-bar-ndisplay" , "debug-bar-dinlineBlock" ) ;
264+ }
222265 } ,
223266
224267 toggleViewsHints : function ( ) {
@@ -494,7 +537,7 @@ var ciDebugBar = {
494537 var btn = document . querySelector ( "[data-tab=ci-views]" ) ;
495538
496539 // If the Views Collector is inactive stops here
497- if ( ! btn ) {
540+ if ( ! btn ) {
498541 return ;
499542 }
500543
@@ -527,7 +570,7 @@ var ciDebugBar = {
527570
528571 ciDebugBar . createCookie ( "debug-bar-position" , "" , - 1 ) ;
529572
530- if ( ! position || position === "bottom" ) {
573+ if ( ! position || position === "bottom" ) {
531574 ciDebugBar . createCookie ( "debug-bar-position" , "top" , 365 ) ;
532575 ciDebugBar . addClass ( ciDebugBar . icon , "fixed-top" ) ;
533576 ciDebugBar . addClass ( ciDebugBar . toolbar , "fixed-top" ) ;
@@ -569,7 +612,7 @@ var ciDebugBar = {
569612 var theme = ciDebugBar . readCookie ( "debug-bar-theme" ) ;
570613
571614 if (
572- ! theme &&
615+ ! theme &&
573616 window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches
574617 ) {
575618 // If there is no cookie, and "prefers-color-scheme" is set to "dark"
@@ -617,7 +660,7 @@ var ciDebugBar = {
617660 var eventSource ;
618661
619662 // If the Hot Reload Collector is inactive stops here
620- if ( ! btn ) {
663+ if ( ! btn ) {
621664 return ;
622665 }
623666
@@ -716,7 +759,7 @@ var ciDebugBar = {
716759 for ( var i = 0 ; i < rowGet . length ; i ++ ) {
717760 row = rowGet [ i ] ;
718761 if ( ! / \/ \( .+ ?\) / . test ( rowGet [ i ] . innerText ) ) {
719- row . style = "cursor: pointer;" ;
762+ ciDebugBar . addClass ( row , "debug-bar- pointer" ) ;
720763 row . setAttribute (
721764 "title" ,
722765 location . origin + "/" + ciDebugBar . trimSlash ( row . innerText )
@@ -741,7 +784,7 @@ var ciDebugBar = {
741784 patt ,
742785 '<input type="text" placeholder="$1">'
743786 ) +
744- '<input type="submit" value="Go" style="margin-left: 4px; ">' +
787+ '<input type="submit" value="Go" class="debug-bar-mleft4 ">' +
745788 "</form>" ;
746789 }
747790 }
0 commit comments