Add dataset tab instead of dropdown

src/DebugBar/JavascriptRenderer.php

@@ -78,6 +78,8 @@ class JavascriptRenderer
 
     protected $ajaxHandlerAutoShow = true;
 
+    protected $ajaxHandlerEnableTab = false;
+
     protected $openHandlerClass = 'PhpDebugBar.OpenHandler';
 
     protected $openHandlerUrl;
@@ -179,6 +181,9 @@ public function setOptions(array $options)
         if (array_key_exists('ajax_handler_auto_show', $options)) {
             $this->setAjaxHandlerAutoShow($options['ajax_handler_auto_show']);
         }
+        if (array_key_exists('ajax_handler_enable_tab', $options)) {
+            $this->setAjaxHandlerEnableTab($options['ajax_handler_enable_tab']);
+        }
         if (array_key_exists('open_handler_classname', $options)) {
             $this->setOpenHandlerClass($options['open_handler_classname']);
         }
@@ -571,6 +576,28 @@ public function isAjaxHandlerAutoShow()
         return $this->ajaxHandlerAutoShow;
     }
 
+    /**
+     * Sets whether new ajax debug data will be shown in a separate tab instead of dropdown.
+     *
+     * @param boolean $enabled
+     */
+    public function setAjaxHandlerEnableTab($enabled = true)
+    {
+        $this->ajaxHandlerEnableTab = $enabled;
+        return $this;
+    }
+
+    /**
+     * Check if the Ajax Handler History tab is enabled
+     *
+     * @return boolean
+     */
+    public function isAjaxHandlerTabEnabled()
+    {
+        return $this->ajaxHandlerEnableTab;
+    }
+
+
     /**
      * Sets the class name of the js open handler
      *
@@ -1167,6 +1194,9 @@ protected function getJsControlsDefinitionCode($varname)
         // activate state restoration
         $js .= sprintf("%s.restoreState();\n", $varname);
 
+        if ($this->ajaxHandlerEnableTab) {
+            $js .= sprintf("%s.enableAjaxHandlerTab();\n", $varname);
+        }
         return $js;
     }
 

src/DebugBar/Resources/debugbar.css

@@ -311,3 +311,62 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
   div.phpdebugbar-mini-design a.phpdebugbar-tab i {
     display:inline-block;
   }
+
+/* -------------------------------------- */
+
+  .phpdebugbar-tab-history .phpdebugbar-text {
+      display: inline-flex;
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+  }
+  .phpdebugbar-widgets-dataset-history table {
+      width: 100%;
+      table-layout: fixed;
+  }
+    .phpdebugbar-widgets-dataset-history table th {
+        font-weight: bold;
+    }
+    .phpdebugbar-widgets-dataset-history table td, .phpdebugbar-widgets-dataset-history table th {
+        padding: 6px 3px;
+        border-bottom: 1px solid #ddd;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .phpdebugbar-widgets-dataset-history table td a{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .phpdebugbar-widgets-dataset-history table tr.phpdebugbar-widgets-active {
+        background: #ccc;
+        color: #444;
+    }
+    .phpdebugbar-widgets-dataset-history span.phpdebugbar-badge {
+        margin: 0 5px 0 2px;
+        font-size: 11px;
+        line-height: 14px;
+        padding: 0 6px;
+        background: #ccc;
+        border-radius: 4px;
+        color: #555;
+        font-weight: normal;
+        text-shadow: none;
+        vertical-align: middle;
+    }
+    .phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions {
+        text-align: center;
+        padding: 7px 0;
+        position: sticky;
+        top: 0;
+        background: #fff;
+    }
+    .phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions a {
+        margin: 0 10px;
+    }
+    .phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions input {
+        appearance: checkbox !important;
+        margin: 5px;
+    }

src/DebugBar/Resources/debugbar.js

@@ -364,7 +364,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
                 suffix = '';
             }
 
-            var nb = getObjectSize(this.debugbar.datasets) + 1;
+            var nb = getObjectSize(this.debugbar.datasets) ;
 
             if (typeof(data['__meta']) === 'undefined') {
                 return "#" + nb + suffix;
@@ -422,6 +422,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             this.datasets = {};
             this.firstTabName = null;
             this.activePanelName = null;
+            this.activeDatasetId = null;
             this.datesetTitleFormater = new DatasetTitleFormater(this);
             this.options.bodyMarginBottomHeight = parseInt($('body').css('margin-bottom'));
             this.hasParent = window.parent && window.parent !== window.top
@@ -455,7 +456,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             }
 
             var currentSize = this.$header.width();
-            var cssClass = "phpdebugbar-mini-design";
+            var cssClass = csscls("mini-design");
             var bool = this.$header.hasClass(cssClass);
 
             if (currentSize <= contentSize && !bool) {
@@ -630,7 +631,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             }
 
             var self = this;
-            tab.$tab.appendTo(this.$headerLeft).click(function() {
+            tab.$tab.appendTo( this.$headerLeft).click(function() {
                 if (!self.isMinimized() && self.activePanelName == name) {
                     self.minimize();
                 } else {
@@ -939,18 +940,29 @@ if (typeof(PhpDebugBar) == 'undefined') {
                 return;
             }
 
-            var label = this.datesetTitleFormater.format(id, data, suffix);
-            id = id || (getObjectSize(this.datasets) + 1);
+            var nb = getObjectSize(this.datasets) + 1;
+            id = id || nb;
+            data.__meta['nb'] = nb;
+            data.__meta['suffix'] = suffix;
             this.datasets[id] = data;
 
-            this.$datasets.append($('<option value="' + id + '">' + label + '</option>'));
-            if (this.$datasets.children().length > 1) {
-                this.$datasets.show();
-            }
+            var label = this.datesetTitleFormater.format(id, this.datasets[id], suffix);
 
             if (typeof(show) == 'undefined' || show) {
-                this.showDataSet(id);
+                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();
+                }
             }
+
             return id;
         },
 
@@ -989,9 +1001,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
          * @this {DebugBar}
          * @param {String} id
          */
-        showDataSet: function(id) {
+        showDataSet: function(id, label) {
             this.dataChangeHandler(this.datasets[id]);
-            this.$datasets.val(id);
+            this.activeDatasetId = id;
+
+            if (this.datasetTab) {
+                this.datasetTab.set('title', label);
+            }
         },
 
         /**
@@ -1037,7 +1053,24 @@ if (typeof(PhpDebugBar) == 'undefined') {
          */
         getOpenHandler: function() {
             return this.openHandler;
-        }
+        },
+
+        enableAjaxHandlerTab: function() {
+            this.datasetTab = new PhpDebugBar.DebugBar.Tab({"icon":"history", "title":"Request history", "widget": new PhpDebugBar.Widgets.DatasetWidget({
+                    'debugbar': this
+                })});
+            this.datasetTab.$tab.addClass(csscls('tab-history'));
+            this.datasetTab.$tab.insertAfter(this.$openbtn).hide();
+            this.datasetTab.$tab.click(() => {
+                if (!this.isMinimized() && self.activePanelName == '__datasets') {
+                    this.minimize();
+                } else {
+                    this.showTab('__datasets');
+                }
+            });
+            this.datasetTab.$el.appendTo(this.$body);
+            this.controls['__datasets'] = this.datasetTab;
+        },
 
     });
 
@@ -1057,6 +1090,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
         this.debugbar = debugbar;
         this.headerName = headerName || 'phpdebugbar';
         this.autoShow = typeof(autoShow) == 'undefined' ? true : autoShow;
+        if (localStorage.getItem('phpdebugbar-ajaxhandler-autoshow') !== null) {
+            this.autoShow = localStorage.getItem('phpdebugbar-ajaxhandler-autoshow') == '1';
+        }
     };
 
     $.extend(AjaxHandler.prototype, {
@@ -1097,6 +1133,11 @@ if (typeof(PhpDebugBar) == 'undefined') {
             return Object.prototype.toString.call(response) == '[object XMLHttpRequest]'
         },
 
+        setAutoShow: function(autoshow) {
+            this.autoShow = autoshow;
+            localStorage.setItem('phpdebugbar-ajaxhandler-autoshow', autoshow ? '1' : '0');
+        },
+
         /**
          * Checks if the HEADER-id exists and loads the dataset using the open handler
          *