DevTools: [Console] use filtering to collapse and expand console groups

Source/devtools/front_end/console/ConsoleView.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 73 matching lines @@
     this._scrolledToBottom = true;
 
     this._filterStatusMessageElement = this._messagesElement.createChild("div", "console-message");
     this._filterStatusTextElement = this._filterStatusMessageElement.createChild("span", "console-info");
     this._filterStatusMessageElement.createTextChild(" ");
     var resetFiltersLink = this._filterStatusMessageElement.createChild("span", "console-info node-link");
     resetFiltersLink.textContent = WebInspector.UIString("Show all messages.");
     resetFiltersLink.addEventListener("click", this._filter.reset.bind(this._filter), true);
 
     this._messagesContainer = this._messagesElement.createChild("div", "console-group");
-    this._topGroup = WebInspector.ConsoleGroup.createTopGroup(this._messagesContainer);
+    this._topGroup = WebInspector.ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
 
     this._promptElement = this._messagesElement.createChild("div", "source-code");
     this._promptElement.id = "console-prompt";
     this._promptElement.spellcheck = false;
     this._promptElement.addEventListener("paste", this._onPasteIntoPrompt.bind(this), false);
     this._promptElement.addEventListener("drop", this._onPasteIntoPrompt.bind(this), false);
     this._messagesElement.appendChild(this._promptElement);
     this._messagesElement.appendChild(document.createElement("br"));
 
@@ skipping 299 matching lines @@
     _onConsoleMessageAdded: function(event)
     {
         var message = /** @type {!WebInspector.ConsoleMessage} */ (event.data);
         var viewMessage = this._createViewMessage(message);
         this._consoleMessageAdded(viewMessage);
     },
 
     /**
      * @param {!WebInspector.ConsoleViewMessage} viewMessage
      */
     _showConsoleMessage: function(viewMessage)

[pfeldman, 2014/04/28 09:00:33]

_addConsoleMessage ?

     {
+        var lastMessage = this._visibleViewMessages.peekLast();
         if (viewMessage.consoleMessage().type === WebInspector.ConsoleMessage.MessageType.EndGroup) {
-            this._currentGroup = this._currentGroup.endGroup();
+            if (lastMessage && !this._currentGroup.messagesHidden())

[pfeldman, 2014/04/28 09:00:33]

.collapsed()

+                lastMessage.incrementCloseGroupDecorationCount();
+            this._currentGroup = this._currentGroup.parentGroup();
             return;
         }
+        if (!this._currentGroup.messagesHidden()) {
+            // this._messagesElement.isScrolledToBottom() is forcing style recalculation.
+            // We just skip it if the scroll action has been scheduled.
+            if (!this._isScrollIntoViewScheduled() && ((viewMessage instanceof WebInspector.ConsoleCommandResult) || this._messagesElement.isScrolledToBottom()))
+                this._scheduleScrollIntoView();
 
-        // this._messagesElement.isScrolledToBottom() is forcing style recalculation.
-        // We just skip it if the scroll action has been scheduled.
-        if (!this._isScrollIntoViewScheduled() && ((viewMessage instanceof WebInspector.ConsoleCommandResult) || this._messagesElement.isScrolledToBottom()))
-            this._scheduleScrollIntoView();
+            var originatingMessage = viewMessage.consoleMessage().originatingMessage();
+            if (lastMessage && originatingMessage && lastMessage.consoleMessage() === originatingMessage)
+                lastMessage.toMessageElement().classList.add("console-adjacent-user-command-result");
 
-        this._visibleViewMessages.push(viewMessage);
-        if (WebInspector.ConsoleGroup.isGroupStartMessage(viewMessage))
-            this._currentGroup = this._currentGroup.createChildGroup(viewMessage);
-        else
-            this._currentGroup.addMessage(viewMessage);
+            this._messagesContainer.appendChild(viewMessage.toMessageElement());
+            viewMessage.wasShown();
+            this._visibleViewMessages.push(viewMessage);
 
-        if (this._searchRegex && viewMessage.matchesRegex(this._searchRegex)) {
-            this._searchResults.push(viewMessage);
-            this._searchableView.updateSearchMatchesCount(this._searchResults.length);
+            if (this._searchRegex && viewMessage.matchesRegex(this._searchRegex)) {
+                this._searchResults.push(viewMessage);
+                this._searchableView.updateSearchMatchesCount(this._searchResults.length);
+            }
         }
+
+        if (viewMessage.consoleMessage().isGroupStartMessage())
+            this._currentGroup = new WebInspector.ConsoleGroup(this._currentGroup, viewMessage);
     },
 
     /**
      * @param {!WebInspector.ConsoleMessage} message
      * @return {!WebInspector.ConsoleViewMessage}
      */
     _createViewMessage: function(message)
     {
         var nestingLevel = this._currentGroup.nestingLevel();
         switch (message.type) {
         case WebInspector.ConsoleMessage.MessageType.Command:
             return new WebInspector.ConsoleCommand(message, nestingLevel);
         case WebInspector.ConsoleMessage.MessageType.Result:
             return new WebInspector.ConsoleCommandResult(message, this._linkifier, nestingLevel);
+        case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
+        case WebInspector.ConsoleMessage.MessageType.StartGroup:
+            return new WebInspector.ConsoleGroupViewMessage(message, this._linkifier, nestingLevel);
         default:
             return new WebInspector.ConsoleViewMessage(message, this._linkifier, nestingLevel);
         }
     },
 
     _consoleCleared: function()
     {
         this._clearCurrentSearchResultHighlight();
         this._consoleMessages = [];
         this._scrolledToBottom = true;
@@ skipping 69 matching lines @@
         if (!WebInspector.settings.consoleTimestampsEnabled.get() && viewMessage && !lastMessage.consoleMessage().isGroupMessage() && lastMessage.consoleMessage().isEqual(viewMessage.consoleMessage())) {
             viewMessage.incrementRepeatCount();
             return true;
         }
 
         return false;
     },
 
     _updateMessageList: function()
     {
-        this._topGroup.detach();
-        this._topGroup = WebInspector.ConsoleGroup.createTopGroup(this._messagesContainer);
+        this._topGroup = WebInspector.ConsoleGroup.createTopGroup();
         this._currentGroup = this._topGroup;
         this._searchResults = [];
         this._hiddenByFilterCount = 0;
+        for (var i = 0; i < this._visibleViewMessages.length; ++i) {
+            var visibleMessage = this._visibleViewMessages[i];
+            visibleMessage.willHide();
+            visibleMessage.toMessageElement().remove();
+            visibleMessage.resetCloseGroupDecorationCount();
+            visibleMessage.resetIncrementRepeatCount();
+        }
+
         this._visibleViewMessages = [];
         for (var i = 0; i < this._consoleMessages.length; ++i) {
             var viewMessage = this._consoleMessages[i];
-            viewMessage.resetIncrementRepeatCount();
             if (this._tryToCollapseMessages(viewMessage, this._visibleViewMessages.peekLast()))
                 continue;
             if (this._filter.shouldBeVisible(viewMessage))
                 this._showConsoleMessage(viewMessage);
             else
                 this._hiddenByFilterCount++;
         }
         this._updateFilterStatus();
     },
 
     /**
      * @param {!WebInspector.Target} target
      * @param {!WebInspector.Event} event
      */
     _monitoringXHREnabledSettingChanged: function(target, event)
     {
         var enabled = /** @type {boolean} */ (event.data);
         WebInspector.targetManager.targets().forEach(function(target) {target.consoleAgent().setMonitoringXHREnabled(enabled);});
     },
 
-    _messagesClicked: function()
+    /**
+     * @param {?Event} event
+     */
+    _messagesClicked: function(event)
     {
         if (!this._prompt.isCaretInsidePrompt() && window.getSelection().isCollapsed)
             this._prompt.moveCaretToEndOfPrompt();
+        var groupMessage = event.target.enclosingNodeOrSelfWithClass("console-group-title");
+        if (!groupMessage)
+            return;
+        var consoleGroupViewMessage = groupMessage.parentElement.message;
+        consoleGroupViewMessage.setCollapsed(!consoleGroupViewMessage.collapsed());
+        var originalScrollPosition = this._messagesElement.scrollTop;
+        this._updateMessageList();
+        this._cancelScheduledScrollIntoView();
+        this._messagesElement.scrollTop = originalScrollPosition;
     },
 
     _registerShortcuts: function()
     {
         this._shortcuts = {};
 
         var shortcut = WebInspector.KeyboardShortcut;
         var section = WebInspector.shortcutsScreen.section(WebInspector.UIString("Console"));
 
         var shortcutL = shortcut.makeDescriptor("l", WebInspector.KeyboardShortcut.Modifiers.Ctrl);
@@ skipping 316 matching lines @@
      * @param {!WebInspector.ConsoleViewMessage} viewMessage
      * @return {boolean}
      */
     shouldBeVisible: function(viewMessage)
     {
         var message = viewMessage.consoleMessage();
         var executionContext = WebInspector.context.flavor(WebInspector.ExecutionContext);
         if (!this._view._showAllMessagesCheckbox.checked() && executionContext && (message.target() !== executionContext.target() || message.executionContextId !== executionContext.id))
             return false;
 
-        if (WebInspector.ConsoleGroup.isGroupStartMessage(viewMessage) || message.type === WebInspector.ConsoleMessage.MessageType.EndGroup)
+        if (viewMessage.consoleMessage().isGroupMessage())
             return true;
 
         if (message.type === WebInspector.ConsoleMessage.MessageType.Result || message.type === WebInspector.ConsoleMessage.MessageType.Command)
             return true;
 
         if (message.url && this._messageURLFilters[message.url])
             return false;
 
         if (message.level && !this._levelFilterUI.accept(message.level))
             return false;
@@ skipping 132 matching lines @@
         var element = WebInspector.ConsoleViewMessage.prototype.contentElement.call(this);
         element.classList.add("console-user-command-result");
         return element;
     },
 
     __proto__: WebInspector.ConsoleViewMessage.prototype
 }
 
 /**
  * @constructor
- * @param {!Element} container
  * @param {?WebInspector.ConsoleGroup} parentGroup
  * @param {?WebInspector.ConsoleViewMessage} groupMessage
  */
-WebInspector.ConsoleGroup = function(container, parentGroup, groupMessage)
+WebInspector.ConsoleGroup = function(parentGroup, groupMessage)
 {
     this._parentGroup = parentGroup;
     this._nestingLevel = parentGroup ? parentGroup.nestingLevel() + 1 : 0;
-    this._childMessages = [];
-    this._childGroups = [];
-
-    if (groupMessage) {
-        this._titleClicked = this._titleClicked.bind(this);
-        this._titleElement = groupMessage.toMessageElement();
-        this._titleElement.addEventListener("click", this._titleClicked, false);
-        if (groupMessage.consoleMessage().type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
-            this._titleElement.classList.add("collapsed");
-    }
-
-    this._messagesElement = container;
+    this._messagesHidden = groupMessage && groupMessage.collapsed() || this._parentGroup && this._parentGroup.messagesHidden();
 }
 
 /**
- * @param {!WebInspector.ConsoleViewMessage} viewMessage
- * @return {boolean}
- */
-WebInspector.ConsoleGroup.isGroupStartMessage = function(viewMessage)
-{
-    var messageType = viewMessage.consoleMessage().type;
-    return messageType === WebInspector.ConsoleMessage.MessageType.StartGroup || messageType === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed;
-}
-
-/**
- * @param {!Element} messagesContainer
  * @return {!WebInspector.ConsoleGroup}
  */
-WebInspector.ConsoleGroup.createTopGroup = function(messagesContainer)
+WebInspector.ConsoleGroup.createTopGroup = function()
 {
-    return new WebInspector.ConsoleGroup(messagesContainer, null, null);
+    return new WebInspector.ConsoleGroup(null, null);
 }
 
 WebInspector.ConsoleGroup.prototype = {
     /**
+     * @return {boolean}
+     */
+    messagesHidden: function()
+    {
+        return this._messagesHidden;
+    },
+
+    /**
      * @return {number}
      */
     nestingLevel: function()
     {
         return this._nestingLevel;
     },
 
     /**
-     * @param {!WebInspector.ConsoleViewMessage} viewMessage
-     * @return {!WebInspector.ConsoleGroup}
-     */
-    createChildGroup: function(viewMessage)
-    {
-        var group = new WebInspector.ConsoleGroup(this._messagesElement, this, viewMessage);
-        this._childGroups.push(group);
-        this._addChild(viewMessage);
-        return group;
-    },
-
-    /**
      * @return {?WebInspector.ConsoleGroup}
      */
-    endGroup: function()
+    parentGroup: function()
     {
-        if (this._childMessages.length) {
-            var lastDescendant = this._lastDescendantViewMessage();
-            lastDescendant.setCloseGroupDecorationCount(lastDescendant.closeGroupDecorationCount() + 1);
-        }
         return this._parentGroup || this;
     },
-
-    /**
-     * @return {!WebInspector.ConsoleViewMessage}
-     */
-    _lastDescendantViewMessage: function()
-    {
-        if (!this._childMessages.length)
-            return this._titleElement.message;
-        var lastChild = this._childMessages.peekLast();
-        return WebInspector.ConsoleGroup.isGroupStartMessage(lastChild) ? this._childGroups.peekLast()._lastDescendantViewMessage() : lastChild;
-    },
-
-    /**
-     * @param {!WebInspector.ConsoleViewMessage} viewMessage
-     */
-    addMessage: function(viewMessage)
-    {
-        this._addChild(viewMessage);
-        this._toggleHideViewMessage(viewMessage, this._collapsed());
-
-        var originatingMessage = viewMessage.consoleMessage().originatingMessage();
-        var element = viewMessage.toMessageElement();
-        if (element.previousSibling && originatingMessage && element.previousSibling.message && element.previousSibling.message.consoleMessage() === originatingMessage)
-            element.previousSibling.classList.add("console-adjacent-user-command-result");
-    },
-
-    /**
-     * @param {?Event} event
-     */
-    _titleClicked: function(event)
-    {
-        var isCollapsed = this._titleElement.classList.toggle("collapsed")
-        if (isCollapsed) {
-            var lastVisibleDescendant = this._lastDescendantViewMessage();
-            var closeGroupCount = lastVisibleDescendant.closeGroupDecorationCount();
-            this._titleElement.message.setCloseGroupDecorationCount(closeGroupCount - (lastVisibleDescendant.nestingLevel() - this.nestingLevel() + 1));
-        } else if (this._childMessages.length) {
-            this._titleElement.message.setCloseGroupDecorationCount(0);
-        }
-        this._toggleHideChildren(isCollapsed);
-        this._titleElement.scrollIntoViewIfNeeded(true);
-        event.consume(true);
-    },
-
-    /**
-     * @param {!WebInspector.ConsoleViewMessage} viewMessage
-     */
-    _addChild: function(viewMessage)
-    {
-        this._childMessages.push(viewMessage);
-        this._messagesElement.appendChild(viewMessage.toMessageElement());
-        viewMessage.wasShown();
-    },
-
-    /**
-     * @return {boolean}
-     */
-    _collapsed: function()
-    {
-        return this._titleElement && this._titleElement.classList.contains("collapsed");
-    },
-
-    /**
-     * @param {!WebInspector.ConsoleViewMessage} viewMessage
-     * @param {boolean} state
-     */
-    _toggleHideViewMessage: function(viewMessage, state)
-    {
-        viewMessage.toMessageElement().classList.toggle("hidden", state);
-    },
-
-    /**
-     * @param {boolean} hideChildren
-     */
-    _toggleHideChildren: function(hideChildren)
-    {
-        if (!hideChildren && this._collapsed())
-            return;
-        for (var i = 0; i < this._childMessages.length; ++i)
-            this._toggleHideViewMessage(this._childMessages[i], hideChildren);
-        for (var i = 0; i < this._childGroups.length; ++i)
-            this._childGroups[i]._toggleHideChildren(hideChildren);
-    },
-
-    detach: function()
-    {
-        if (this._titleElement)
-            this._titleElement.removeEventListener("click", this._titleClicked, false);
-        for (var i = 0; i < this._childGroups.length; ++i)
-            this._childGroups[i].detach();
-        for (var i = 0; i < this._childMessages.length; ++i) {
-            this._childMessages[i].willHide();
-            this._childMessages[i].toMessageElement().remove();
-            this._childMessages[i].setCloseGroupDecorationCount(0);
-        }
-    },
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ActionDelegate}
  */
 WebInspector.ConsoleView.ShowConsoleActionDelegate = function()
 {
 }
 
 WebInspector.ConsoleView.ShowConsoleActionDelegate.prototype = {
     /**
      * @return {boolean}
      */
     handleAction: function()
     {
         WebInspector.console.show();
         return true;
     }
 }