Combine dropdown with dataset handler

demo/bootstrap.php

@@ -10,6 +10,7 @@
 $debugbar = new StandardDebugBar();
 $debugbarRenderer = $debugbar->getJavascriptRenderer()
                              ->setBaseUrl('../src/DebugBar/Resources')
+                             ->setAjaxHandlerEnableTab(true)
                              ->setEnableJqueryNoConflict(false);
 
 //
@@ -29,9 +30,8 @@ function render_demo_page(Closure $callback = null)
         <script type="text/javascript">
             $(function() {
                 $('.ajax').click(function() {
-                    var container = $(this).parent().html('...');
                     $.get(this.href, function(data) {
-                        container.html(data);
+                        $('#ajax-result').html(data);
                     });
                     return false;
                 });

demo/index.php

@@ -31,6 +31,7 @@
     <li><a href="ajax.php" class="ajax">load ajax content</a></li>
     <li><a href="ajax_exception.php" class="ajax">load ajax content with exception</a></li>
 </ul>
+<div id="ajax-result"></div>
 <h2>IFRAMES</h2>
 <ul>
     <li><a href="iframes/index.php">load through iframes</a></li>

src/DebugBar/Resources/debugbar.css

@@ -318,12 +318,11 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
 
 /* -------------------------------------- */
 
-  .phpdebugbar-tab-history .phpdebugbar-text {
-      display: inline-flex;
-      max-width: 200px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+  a.phpdebugbar-tab.phpdebugbar-tab-history .phpdebugbar-text {
+      display: none;
+  }
+  a.phpdebugbar-tab.phpdebugbar-tab-history i {
+    display:inline-block;
   }
   .phpdebugbar-widgets-dataset-history table {
       width: 100%;

src/DebugBar/Resources/debugbar.js

@@ -548,8 +548,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             this.$datasets = $('<select />').addClass(csscls('datasets-switcher')).attr('name', 'datasets-switcher')
                 .appendTo(this.$headerRight);
             this.$datasets.change(function() {
-                self.dataChangeHandler(self.datasets[this.value]);
-                self.showTab();
+                self.showDataSet(this.value);
             });
         },
 
@@ -948,21 +947,23 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
             var label = this.datesetTitleFormater.format(id, this.datasets[id], suffix, nb);
 
-            if (typeof(show) == 'undefined' || show) {
-                this.showDataSet(id, label);
-            }
-
             if (this.datasetTab) {
                 this.datasetTab.set('data', this.datasets);
                 this.datasetTab.set('badge', getObjectSize(this.datasets));
                 this.datasetTab.$tab.show();
-            } else {
-                this.$datasets.append($('<option value="' + id + '">' + label + '</option>'));
-                if (this.$datasets.children().length > 1) {
-                    this.$datasets.show();
-                }
             }
 
+            this.$datasets.append($('<option value="' + id + '">' + label + '</option>'));
+            if (this.$datasets.children().length > 1) {
+                this.$datasets.show();
+            }
+
+            if (typeof(show) == 'undefined' || show) {
+                this.showDataSet(id);
+            }
+
+            this.resize();
+
             return id;
         },
 
@@ -1001,12 +1002,16 @@ if (typeof(PhpDebugBar) == 'undefined') {
          * @this {DebugBar}
          * @param {String} id
          */
-        showDataSet: function(id, label) {
-            this.dataChangeHandler(this.datasets[id]);
+        showDataSet: function(id) {
             this.activeDatasetId = id;
+            this.dataChangeHandler(this.datasets[id]);
+
+            if (this.$datasets.val() !== id) {
+                this.$datasets.val(id);
+            }
 
             if (this.datasetTab) {
-                this.datasetTab.set('title', label);
+                this.datasetTab.get('widget').set('id', id);
             }
         },
 
@@ -1060,6 +1065,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
                     'debugbar': this
                 })});
             this.datasetTab.$tab.addClass(csscls('tab-history'));
+            this.datasetTab.$tab.attr('data-collector', '__datasets');
+            this.datasetTab.$el.attr('data-collector', '__datasets');
             this.datasetTab.$tab.insertAfter(this.$openbtn).hide();
             this.datasetTab.$tab.click(() => {
                 if (!this.isMinimized() && self.activePanelName == '__datasets') {

src/DebugBar/Resources/widgets.js

@@ -667,6 +667,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             }
             this.set(options);
             this.set('autoshow', null);
+            this.set('id', null);
             this.set('sort', localStorage.getItem('debugbar-history-sort') || 'asc');
             this.$el.addClass(csscls('dataset-history'))
 
@@ -724,7 +725,6 @@ if (typeof(PhpDebugBar) == 'undefined') {
                         .append($('<th>Date ↕</th>').css('width', '175px').click(function() {
                             self.set('sort', self.get('sort') === 'asc' ? 'desc' : 'asc')
                             localStorage.setItem('debugbar-history-sort', self.get('sort'))
-                            console.log('set sort', self.get('sort'))
                         }))
                         .append($('<th>Method</th>').css('width', '80px'))
                         .append($('<th>URL</th>'))
@@ -749,7 +749,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
         },
 
         render: function() {
-            this.bindAttr(['data'], function() {
+            this.bindAttr('data', function() {
                 if (this.get('autoshow') === null && this.get('debugbar').ajaxHandler) {
                     this.set('autoshow', this.get('debugbar').ajaxHandler.autoShow);
                 }
@@ -766,18 +766,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
                 }
 
                 this.get('itemRenderer')(this, data);
-
-                // Switch active tab
-                this.$table.find('.' + csscls('active')).removeClass(csscls('active'));
-                this.$table.find('tr[data-id=' + this.get('debugbar').activeDatasetId+']').addClass(csscls('active'));
-            });
+           });
             this.bindAttr(['itemRenderer', 'search', 'method', 'sort'], function() {
                 this.renderDatasets();
             })
-            this.bindAttr(['autoshow'], function() {
+            this.bindAttr('autoshow', function() {
                 var autoshow = this.get('autoshow');
                 this.$autoshow.prop('checked', autoshow);
             })
+            this.bindAttr('id', function() {
+                var id = this.get('id');
+                this.$table.find('.' + csscls('active')).removeClass(csscls('active'));
+                this.$table.find('tr[data-id=' + id+']').addClass(csscls('active'));
+            })
         },
 
         /**

tests/DebugBar/Tests/Browser/DebugbarTest.php

@@ -66,6 +66,21 @@ public function testDebugbarAjax(): void
 
         $client->waitForElementToContain('.phpdebugbar-datasets-switcher', 'ajax_exception.php');
         $client->waitForElementToContain('.phpdebugbar-panel[data-collector=exceptions] .phpdebugbar-widgets-message', 'Something failed!');
+
+        // Open network tab
+        $client->click($this->getTabLink($crawler, '__datasets'));
+        $client->waitForVisibility('.phpdebugbar-panel[data-collector=__datasets] .phpdebugbar-widgets-table-row');
+
+        $requests = $crawler->filter('.phpdebugbar-panel[data-collector=__datasets] .phpdebugbar-widgets-table-row')
+            ->each(function(WebDriverElement $node){
+                return $node->getText();
+            });
+        $this->assertStringContainsString('GET /demo/', $requests[0]);
+        $this->assertStringContainsString('GET /demo/ajax.php (ajax)', $requests[1]);
+        $this->assertStringContainsString('GET /demo/ajax_exception.php (ajax)', $requests[2]);
+
+
+
     }
 
 }