webkitgtk-2.16.5HEADwebkitgtk-2.16.5master

1 files changed, 687 insertions, 0 deletions

diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
new file mode 100644
index 000000000..34a45e046
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
@@ -0,0 +1,687 @@
+/*
+ * Copyright (C) 2007, 2013, 2015 Apple Inc.  All rights reserved.
+ *
+ * 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.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
+{
+    constructor(element)
+    {
+        super();
+
+        this.element = element || document.createElement("ol");
+        this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
+        this.element.addEventListener("contextmenu", this._handleContextmenu.bind(this));
+
+        this.children = [];
+        this.selectedTreeElement = null;
+        this._childrenListNode = this.element;
+        this._childrenListNode.removeChildren();
+        this._knownTreeElements = [];
+        this._treeElementsExpandedState = [];
+        this.allowsRepeatSelection = false;
+        this.root = true;
+        this.hasChildren = false;
+        this.expanded = true;
+        this.selected = false;
+        this.treeOutline = this;
+        this._hidden = false;
+        this._compact = false;
+        this._large = false;
+        this._disclosureButtons = true;
+        this._customIndent = false;
+
+        this._childrenListNode.tabIndex = 0;
+        this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
+
+        WebInspector.TreeOutline._generateStyleRulesIfNeeded();
+    }
+
+    // Public
+
+    get hidden()
+    {
+        return this._hidden;
+    }
+
+    set hidden(x)
+    {
+        if (this._hidden === x)
+            return;
+
+        this._hidden = x;
+        this.element.hidden = this._hidden;
+    }
+
+    get compact()
+    {
+        return this._compact;
+    }
+
+    set compact(x)
+    {
+        if (this._compact === x)
+            return;
+
+        this._compact = x;
+        if (this._compact)
+            this.large = false;
+
+        this.element.classList.toggle("compact", this._compact);
+    }
+
+    get large()
+    {
+        return this._large;
+    }
+
+    set large(x)
+    {
+        if (this._large === x)
+            return;
+
+        this._large = x;
+        if (this._large)
+            this.compact = false;
+
+        this.element.classList.toggle("large", this._large);
+    }
+
+    get disclosureButtons()
+    {
+        return this._disclosureButtons;
+    }
+
+    set disclosureButtons(x)
+    {
+        if (this._disclosureButtons === x)
+            return;
+
+        this._disclosureButtons = x;
+        this.element.classList.toggle("hide-disclosure-buttons", !this._disclosureButtons);
+    }
+
+    get customIndent()
+    {
+        return this._customIndent;
+    }
+
+    set customIndent(x)
+    {
+        if (this._customIndent === x)
+            return;
+
+        this._customIndent = x;
+        this.element.classList.toggle(WebInspector.TreeOutline.CustomIndentStyleClassName, this._customIndent);
+    }
+
+    appendChild(child)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        var lastChild = this.children[this.children.length - 1];
+        if (lastChild) {
+            lastChild.nextSibling = child;
+            child.previousSibling = lastChild;
+        } else {
+            child.previousSibling = null;
+            child.nextSibling = null;
+        }
+
+        var isFirstChild = !this.children.length;
+
+        this.children.push(child);
+        this.hasChildren = true;
+        child.parent = this;
+        child.treeOutline = this.treeOutline;
+        child.treeOutline._rememberTreeElement(child);
+
+        var current = child.children[0];
+        while (current) {
+            current.treeOutline = this.treeOutline;
+            current.treeOutline._rememberTreeElement(current);
+            current = current.traverseNextTreeElement(false, child, true);
+        }
+
+        if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
+
+        if (this._childrenListNode)
+            child._attach();
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});
+
+        if (isFirstChild && this.expanded)
+            this.expand();
+    }
+
+    insertChild(child, index)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        var previousChild = (index > 0 ? this.children[index - 1] : null);
+        if (previousChild) {
+            previousChild.nextSibling = child;
+            child.previousSibling = previousChild;
+        } else {
+            child.previousSibling = null;
+        }
+
+        var nextChild = this.children[index];
+        if (nextChild) {
+            nextChild.previousSibling = child;
+            child.nextSibling = nextChild;
+        } else {
+            child.nextSibling = null;
+        }
+
+        var isFirstChild = !this.children.length;
+
+        this.children.splice(index, 0, child);
+        this.hasChildren = true;
+        child.parent = this;
+        child.treeOutline = this.treeOutline;
+        child.treeOutline._rememberTreeElement(child);
+
+        var current = child.children[0];
+        while (current) {
+            current.treeOutline = this.treeOutline;
+            current.treeOutline._rememberTreeElement(current);
+            current = current.traverseNextTreeElement(false, child, true);
+        }
+
+        if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
+
+        if (this._childrenListNode)
+            child._attach();
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});
+
+        if (isFirstChild && this.expanded)
+            this.expand();
+    }
+
+    removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling)
+    {
+        console.assert(childIndex >= 0 && childIndex < this.children.length);
+        if (childIndex < 0 || childIndex >= this.children.length)
+            return;
+
+        let child = this.children[childIndex];
+        this.children.splice(childIndex, 1);
+
+        let parent = child.parent;
+        if (child.deselect(suppressOnDeselect)) {
+            if (child.previousSibling && !suppressSelectSibling)
+                child.previousSibling.select(true, false);
+            else if (child.nextSibling && !suppressSelectSibling)
+                child.nextSibling.select(true, false);
+            else if (!suppressSelectSibling)
+                parent.select(true, false);
+        }
+
+        if (child.previousSibling)
+            child.previousSibling.nextSibling = child.nextSibling;
+        if (child.nextSibling)
+            child.nextSibling.previousSibling = child.previousSibling;
+
+        let treeOutline = child.treeOutline;
+        if (treeOutline) {
+            treeOutline._forgetTreeElement(child);
+            treeOutline._forgetChildrenRecursive(child);
+        }
+
+        child._detach();
+        child.treeOutline = null;
+        child.parent = null;
+        child.nextSibling = null;
+        child.previousSibling = null;
+
+        if (treeOutline)
+            treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
+    }
+
+    removeChild(child, suppressOnDeselect, suppressSelectSibling)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        var childIndex = this.children.indexOf(child);
+        console.assert(childIndex !== -1);
+        if (childIndex === -1)
+            return;
+
+        this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
+
+        if (!this.children.length) {
+            if (this._listItemNode)
+                this._listItemNode.classList.remove("parent");
+            this.hasChildren = false;
+        }
+    }
+
+    removeChildren(suppressOnDeselect)
+    {
+        for (let child of this.children) {
+            child.deselect(suppressOnDeselect);
+
+            let treeOutline = child.treeOutline;
+            if (treeOutline) {
+                treeOutline._forgetTreeElement(child);
+                treeOutline._forgetChildrenRecursive(child);
+            }
+
+            child._detach();
+            child.treeOutline = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+
+            if (treeOutline)
+                treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
+        }
+
+        this.children = [];
+    }
+
+    removeChildrenRecursive(suppressOnDeselect)
+    {
+        let childrenToRemove = this.children;
+        let child = this.children[0];
+        while (child) {
+            if (child.children.length)
+                childrenToRemove = childrenToRemove.concat(child.children);
+            child = child.traverseNextTreeElement(false, this, true);
+        }
+
+        for (let child of childrenToRemove) {
+            child.deselect(suppressOnDeselect);
+
+            let treeOutline = child.treeOutline;
+            if (treeOutline)
+                treeOutline._forgetTreeElement(child);
+
+            child._detach();
+            child.children = [];
+            child.treeOutline = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+
+            if (treeOutline)
+                treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
+        }
+
+        this.children = [];
+    }
+
+    _rememberTreeElement(element)
+    {
+        if (!this._knownTreeElements[element.identifier])
+            this._knownTreeElements[element.identifier] = [];
+
+        // check if the element is already known
+        var elements = this._knownTreeElements[element.identifier];
+        if (elements.indexOf(element) !== -1)
+            return;
+
+        // add the element
+        elements.push(element);
+    }
+
+    _forgetTreeElement(element)
+    {
+        if (this.selectedTreeElement === element) {
+            element.deselect(true);
+            this.selectedTreeElement = null;
+        }
+        if (this._knownTreeElements[element.identifier])
+            this._knownTreeElements[element.identifier].remove(element, true);
+    }
+
+    _forgetChildrenRecursive(parentElement)
+    {
+        var child = parentElement.children[0];
+        while (child) {
+            this._forgetTreeElement(child);
+            child = child.traverseNextTreeElement(false, parentElement, true);
+        }
+    }
+
+    getCachedTreeElement(representedObject)
+    {
+        if (!representedObject)
+            return null;
+
+        if (representedObject.__treeElementIdentifier) {
+            // If this representedObject has a tree element identifier, and it is a known TreeElement
+            // in our tree we can just return that tree element.
+            var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
+            if (elements) {
+                for (var i = 0; i < elements.length; ++i)
+                    if (elements[i].representedObject === representedObject)
+                        return elements[i];
+            }
+        }
+        return null;
+    }
+
+    findTreeElement(representedObject, isAncestor, getParent)
+    {
+        if (!representedObject)
+            return null;
+
+        var cachedElement = this.getCachedTreeElement(representedObject);
+        if (cachedElement)
+            return cachedElement;
+
+        // The representedObject isn't known, so we start at the top of the tree and work down to find the first
+        // tree element that represents representedObject or one of its ancestors.
+        var item;
+        var found = false;
+        for (var i = 0; i < this.children.length; ++i) {
+            item = this.children[i];
+            if (item.representedObject === representedObject || (isAncestor && isAncestor(item.representedObject, representedObject))) {
+                found = true;
+                break;
+            }
+        }
+
+        if (!found)
+            return null;
+
+        // Make sure the item that we found is connected to the root of the tree.
+        // Build up a list of representedObject's ancestors that aren't already in our tree.
+        var ancestors = [];
+        var currentObject = representedObject;
+        while (currentObject) {
+            ancestors.unshift(currentObject);
+            if (currentObject === item.representedObject)
+                break;
+            currentObject = getParent(currentObject);
+        }
+
+        // For each of those ancestors we populate them to fill in the tree.
+        for (var i = 0; i < ancestors.length; ++i) {
+            // Make sure we don't call findTreeElement with the same representedObject
+            // again, to prevent infinite recursion.
+            if (ancestors[i] === representedObject)
+                continue;
+
+            // FIXME: we could do something faster than findTreeElement since we will know the next
+            // ancestor exists in the tree.
+            item = this.findTreeElement(ancestors[i], isAncestor, getParent);
+            if (item)
+                item.onpopulate();
+        }
+
+        return this.getCachedTreeElement(representedObject);
+    }
+
+    _treeElementDidChange(treeElement)
+    {
+        if (treeElement.treeOutline !== this)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDidChange, {element: treeElement});
+    }
+
+    treeElementFromNode(node)
+    {
+        var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
+        if (listNode)
+            return listNode.parentTreeElement || listNode.treeElement;
+        return null;
+    }
+
+    treeElementFromPoint(x, y)
+    {
+        var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
+        if (!node)
+            return null;
+
+        return this.treeElementFromNode(node);
+    }
+
+    _treeKeyDown(event)
+    {
+        if (event.target !== this._childrenListNode)
+            return;
+
+        if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
+            return;
+
+        var handled = false;
+        var nextSelectedElement;
+        if (event.keyIdentifier === "Up" && !event.altKey) {
+            nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
+            while (nextSelectedElement && !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(true);
+            handled = nextSelectedElement ? true : false;
+        } else if (event.keyIdentifier === "Down" && !event.altKey) {
+            nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
+            while (nextSelectedElement && !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.traverseNextTreeElement(true);
+            handled = nextSelectedElement ? true : false;
+        } else if (event.keyIdentifier === "Left") {
+            if (this.selectedTreeElement.expanded) {
+                if (event.altKey)
+                    this.selectedTreeElement.collapseRecursively();
+                else
+                    this.selectedTreeElement.collapse();
+                handled = true;
+            } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
+                handled = true;
+                if (this.selectedTreeElement.parent.selectable) {
+                    nextSelectedElement = this.selectedTreeElement.parent;
+                    while (nextSelectedElement && !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.parent;
+                    handled = nextSelectedElement ? true : false;
+                } else if (this.selectedTreeElement.parent)
+                    this.selectedTreeElement.parent.collapse();
+            }
+        } else if (event.keyIdentifier === "Right") {
+            if (!this.selectedTreeElement.revealed()) {
+                this.selectedTreeElement.reveal();
+                handled = true;
+            } else if (this.selectedTreeElement.hasChildren) {
+                handled = true;
+                if (this.selectedTreeElement.expanded) {
+                    nextSelectedElement = this.selectedTreeElement.children[0];
+                    while (nextSelectedElement && !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.nextSibling;
+                    handled = nextSelectedElement ? true : false;
+                } else {
+                    if (event.altKey)
+                        this.selectedTreeElement.expandRecursively();
+                    else
+                        this.selectedTreeElement.expand();
+                }
+            }
+        } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
+            if (this.selectedTreeElement.ondelete)
+                handled = this.selectedTreeElement.ondelete();
+            if (!handled && this.treeOutline.ondelete)
+                handled = this.treeOutline.ondelete(this.selectedTreeElement);
+        } else if (isEnterKey(event)) {
+            if (this.selectedTreeElement.onenter)
+                handled = this.selectedTreeElement.onenter();
+            if (!handled && this.treeOutline.onenter)
+                handled = this.treeOutline.onenter(this.selectedTreeElement);
+        } else if (event.keyIdentifier === "U+0020" /* Space */) {
+            if (this.selectedTreeElement.onspace)
+                handled = this.selectedTreeElement.onspace();
+            if (!handled && this.treeOutline.onspace)
+                handled = this.treeOutline.onspace(this.selectedTreeElement);
+        }
+
+        if (nextSelectedElement) {
+            nextSelectedElement.reveal();
+            nextSelectedElement.select(false, true);
+        }
+
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    expand()
+    {
+        // this is the root, do nothing
+    }
+
+    collapse()
+    {
+        // this is the root, do nothing
+    }
+
+    revealed()
+    {
+        return true;
+    }
+
+    reveal()
+    {
+        // this is the root, do nothing
+    }
+
+    select()
+    {
+        // this is the root, do nothing
+    }
+
+    revealAndSelect(omitFocus)
+    {
+        // this is the root, do nothing
+    }
+
+    get selectedTreeElementIndex()
+    {
+        if (!this.hasChildren || !this.selectedTreeElement)
+            return;
+
+        for (var i = 0; i < this.children.length; ++i) {
+            if (this.children[i] === this.selectedTreeElement)
+                return i;
+        }
+
+        return false;
+    }
+
+    // Protected
+
+    treeElementFromEvent(event)
+    {
+        let scrollContainer = this.element.parentElement;
+
+        // We choose this X coordinate based on the knowledge that our list
+        // items extend at least to the right edge of the outer <ol> container.
+        // In the no-word-wrap mode the outer <ol> may be wider than the tree container
+        // (and partially hidden), in which case we are left to use only its right boundary.
+        let x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
+        let y = event.pageY;
+
+        // Our list items have 1-pixel cracks between them vertically. We avoid
+        // the cracks by checking slightly above and slightly below the mouse
+        // and seeing if we hit the same element each time.
+        let elementUnderMouse = this.treeElementFromPoint(x, y);
+        let elementAboveMouse = this.treeElementFromPoint(x, y - 2);
+        let element = null;
+        if (elementUnderMouse === elementAboveMouse)
+            element = elementUnderMouse;
+        else
+            element = this.treeElementFromPoint(x, y + 2);
+
+        return element;
+    }
+
+    populateContextMenu(contextMenu, event, treeElement)
+    {
+        treeElement.populateContextMenu(contextMenu, event);
+    }
+
+    // Private
+
+    static _generateStyleRulesIfNeeded()
+    {
+        if (WebInspector.TreeOutline._styleElement)
+           return;
+
+        WebInspector.TreeOutline._styleElement = document.createElement("style");
+
+        let maximumTreeDepth = 32;
+        let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
+        let depthPadding = 10;
+
+        let styleText = "";
+        let childrenSubstring = "";
+        for (let i = 1; i <= maximumTreeDepth; ++i) {
+            // Keep all the elements at the same depth once the maximum is reached.
+            childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
+            styleText += `.${WebInspector.TreeOutline.ElementStyleClassName}:not(.${WebInspector.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;
+            styleText += "padding-left: " + (baseLeftPadding + (depthPadding * i)) + "px; }\n";
+        }
+
+        WebInspector.TreeOutline._styleElement.textContent = styleText;
+
+        document.head.appendChild(WebInspector.TreeOutline._styleElement);
+    }
+
+    _handleContextmenu(event)
+    {
+        let treeElement = this.treeElementFromEvent(event);
+        if (!treeElement)
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        this.populateContextMenu(contextMenu, event, treeElement);
+    }
+};
+
+WebInspector.TreeOutline._styleElement = null;
+
+WebInspector.TreeOutline.ElementStyleClassName = "tree-outline";
+WebInspector.TreeOutline.CustomIndentStyleClassName = "custom-indent";
+
+WebInspector.TreeOutline.Event = {
+    ElementAdded: Symbol("element-added"),
+    ElementDidChange: Symbol("element-did-change"),
+    ElementRemoved: Symbol("element-removed"),
+    ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
+    ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
+    SelectionDidChange: Symbol("selection-did-change")
+};
+
+WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;