Source/devtools/front_end/CSSNamedFlowCollectionsView.js

/*
 * Copyright (C) 2012 Adobe Systems Incorporated. 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.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND 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 THE
 * COPYRIGHT HOLDER OR 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.
 */

/**
 * @constructor
 * @extends {WebInspector.SidebarView}
 */
WebInspector.CSSNamedFlowCollectionsView = function()
{
    WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Start);
    this.registerRequiredCSS("cssNamedFlows.css");

    this._namedFlows = {};
    this._contentNodes = {};
    this._regionNodes = {};

    this.element.classList.add("css-named-flow-collections-view");
    this.element.classList.add("fill");

    this._statusElement = document.createElement("span");
    this._statusElement.textContent = WebInspector.UIString("CSS Named Flows");

    var sidebarHeader = this.firstElement().createChild("div", "tabbed-pane-header selected sidebar-header");
    var tab = sidebarHeader.createChild("div", "tabbed-pane-header-tab");
    tab.createChild("span", "tabbed-pane-header-tab-title").textContent = WebInspector.UIString("CSS Named Flows");

    this._sidebarContentElement = this.firstElement().createChild("div", "sidebar-content outline-disclosure");
    this._flowListElement = this._sidebarContentElement.createChild("ol");
    this._flowTree = new TreeOutline(this._flowListElement);

    this._emptyElement = document.createElement("div");
    this._emptyElement.classList.add("info");
    this._emptyElement.textContent = WebInspector.UIString("No CSS Named Flows");

    this._tabbedPane = new WebInspector.TabbedPane();
    this._tabbedPane.closeableTabs = true;
    this._tabbedPane.show(this.secondElement());
}

WebInspector.CSSNamedFlowCollectionsView.prototype = {
    showInDrawer: function()
    {
        WebInspector.inspectorView.showCloseableViewInDrawer("css-flows", WebInspector.UIString("CSS Flows"), this);
    },

    reset: function()
    {
        if (!this._document)
            return;

        WebInspector.cssModel.getNamedFlowCollectionAsync(this._document.id, this._resetNamedFlows.bind(this));
    },

    /**
     * @param {!WebInspector.DOMDocument} document
     */
    _setDocument: function(document)
    {
        this._document = document;
        this.reset();
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _documentUpdated: function(event)
    {
        var document = /** @type {!WebInspector.DOMDocument} */ (event.data);
        this._setDocument(document);
    },

    /**
     * @param {boolean} hasContent
     */
    _setSidebarHasContent: function(hasContent)
    {
        if (hasContent) {
            if (!this._emptyElement.parentNode)
                return;

            this._sidebarContentElement.removeChild(this._emptyElement);
            this._sidebarContentElement.appendChild(this._flowListElement);
        } else {
            if (!this._flowListElement.parentNode)
                return;

            this._sidebarContentElement.removeChild(this._flowListElement);
            this._sidebarContentElement.appendChild(this._emptyElement);
        }
    },

    /**
     * @param {!WebInspector.NamedFlow} flow
     */
    _appendNamedFlow: function(flow)
    {
        var flowHash = this._hashNamedFlow(flow.documentNodeId, flow.name);
        var flowContainer = { flow: flow, flowHash: flowHash };

        for (var i = 0; i < flow.content.length; ++i)
            this._contentNodes[flow.content[i]] = flowHash;
        for (var i = 0; i < flow.regions.length; ++i)
            this._regionNodes[flow.regions[i].nodeId] = flowHash;

        var flowTreeItem = new WebInspector.FlowTreeElement(flowContainer);
        flowTreeItem.onselect = this._selectNamedFlowTab.bind(this, flowHash);

        flowContainer.flowTreeItem = flowTreeItem;
        this._namedFlows[flowHash] = flowContainer;

        if (!this._flowTree.children.length)
            this._setSidebarHasContent(true);
        this._flowTree.appendChild(flowTreeItem);
    },

    /**
     * @param {string} flowHash
     */
    _removeNamedFlow: function(flowHash)
    {
        var flowContainer = this._namedFlows[flowHash];

        if (this._tabbedPane._tabsById[flowHash])
            this._tabbedPane.closeTab(flowHash);
        this._flowTree.removeChild(flowContainer.flowTreeItem);

        var flow = flowContainer.flow;
        for (var i = 0; i < flow.content.length; ++i)
            delete this._contentNodes[flow.content[i]];
        for (var i = 0; i < flow.regions.length; ++i)
            delete this._regionNodes[flow.regions[i].nodeId];

        delete this._namedFlows[flowHash];

        if (!this._flowTree.children.length)
            this._setSidebarHasContent(false);
    },

    /**
     * @param {!WebInspector.NamedFlow} flow
     */
    _updateNamedFlow: function(flow)
    {
        var flowHash = this._hashNamedFlow(flow.documentNodeId, flow.name);
        var flowContainer = this._namedFlows[flowHash];

        if (!flowContainer)
            return;

        var oldFlow = flowContainer.flow;
        flowContainer.flow = flow;

        for (var i = 0; i < oldFlow.content.length; ++i)
            delete this._contentNodes[oldFlow.content[i]];
        for (var i = 0; i < oldFlow.regions.length; ++i)
            delete this._regionNodes[oldFlow.regions[i].nodeId];

        for (var i = 0; i < flow.content.length; ++i)
            this._contentNodes[flow.content[i]] = flowHash;
        for (var i = 0; i < flow.regions.length; ++i)
            this._regionNodes[flow.regions[i].nodeId] = flowHash;

        flowContainer.flowTreeItem.setOverset(flow.overset);

        if (flowContainer.flowView)
            flowContainer.flowView.flow = flow;
    },

    /**
     * @param {?WebInspector.NamedFlowCollection} namedFlowCollection
     */
    _resetNamedFlows: function(namedFlowCollection)
    {
        for (var flowHash in this._namedFlows)
            this._removeNamedFlow(flowHash);

        var namedFlows = namedFlowCollection ? namedFlowCollection.namedFlowMap : {};
        for (var flowName in namedFlows)
            this._appendNamedFlow(namedFlows[flowName]);

        if (!this._flowTree.children.length)
            this._setSidebarHasContent(false);
        else
            this._showNamedFlowForNode(WebInspector.panel("elements").treeOutline.selectedDOMNode());
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _namedFlowCreated: function(event)
    {
        // FIXME: We only have support for Named Flows in the main document.
        if (event.data.documentNodeId !== this._document.id)
            return;

        var flow = /** @type {!WebInspector.NamedFlow} */ (event.data);
        this._appendNamedFlow(flow);
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _namedFlowRemoved: function(event)
    {
        // FIXME: We only have support for Named Flows in the main document.
        if (event.data.documentNodeId !== this._document.id)
            return;

        this._removeNamedFlow(this._hashNamedFlow(event.data.documentNodeId, event.data.flowName));
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _regionLayoutUpdated: function(event)
    {
        // FIXME: We only have support for Named Flows in the main document.
        if (event.data.documentNodeId !== this._document.id)
            return;

        var flow = /** @type {!WebInspector.NamedFlow} */ (event.data);
        this._updateNamedFlow(flow);
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _regionOversetChanged: function(event)
    {
        // FIXME: We only have support for Named Flows in the main document.
        if (event.data.documentNodeId !== this._document.id)
            return;

        var flow = /** @type {!WebInspector.NamedFlow} */ (event.data);
        this._updateNamedFlow(flow);
    },

    /**
     * @param {!DOMAgent.NodeId} documentNodeId
     * @param {string} flowName
     */
    _hashNamedFlow: function(documentNodeId, flowName)
    {
        return documentNodeId + "|" + flowName;
    },

    /**
     * @param {string} flowHash
     */
    _showNamedFlow: function(flowHash)
    {
        this._selectNamedFlowInSidebar(flowHash);
        this._selectNamedFlowTab(flowHash);
    },

    /**
     * @param {string} flowHash
     */
    _selectNamedFlowInSidebar: function(flowHash)
    {
        this._namedFlows[flowHash].flowTreeItem.select(true);
    },

    /**
     * @param {string} flowHash
     * @return {boolean}
     */
    _selectNamedFlowTab: function(flowHash)
    {
        var flowContainer = this._namedFlows[flowHash];

        if (this._tabbedPane.selectedTabId === flowHash)
            return false;

        if (!this._tabbedPane.selectTab(flowHash)) {
            if (!flowContainer.flowView)
                flowContainer.flowView = new WebInspector.CSSNamedFlowView(flowContainer.flow);

            this._tabbedPane.appendTab(flowHash, flowContainer.flow.name, flowContainer.flowView);
            this._tabbedPane.selectTab(flowHash);
        }
        return false;
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _selectedNodeChanged: function(event)
    {
        var node = /** @type {!WebInspector.DOMNode} */ (event.data);
        this._showNamedFlowForNode(node);
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _tabSelected: function(event)
    {
        this._selectNamedFlowInSidebar(event.data.tabId);
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _tabClosed: function(event)
    {
        this._namedFlows[event.data.tabId].flowTreeItem.deselect();
    },

    /**
     * @param {?WebInspector.DOMNode} node
     */
    _showNamedFlowForNode: function(node)
    {
        if (!node)
            return;

        if (this._regionNodes[node.id]) {
            this._showNamedFlow(this._regionNodes[node.id]);
            return;
        }

        while (node) {
            if (this._contentNodes[node.id]) {
                this._showNamedFlow(this._contentNodes[node.id]);
                return;
            }

            node = node.parentNode;
        }
    },

    wasShown: function()
    {
        WebInspector.SidebarView.prototype.wasShown.call(this);

        WebInspector.domAgent.requestDocument(this._setDocument.bind(this));

        WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);

        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, this._regionOversetChanged, this);

        WebInspector.panel("elements").treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);

        this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
        this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._tabClosed, this);
    },

    willHide: function()
    {
        WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);

        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, this._regionOversetChanged, this);

        WebInspector.panel("elements").treeOutline.removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);

        this._tabbedPane.removeEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
        this._tabbedPane.removeEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._tabClosed, this);
    },

    __proto__: WebInspector.SidebarView.prototype
}

/**
 * @constructor
 * @extends {TreeElement}
 */
WebInspector.FlowTreeElement = function(flowContainer)
{
    var container = document.createElement("div");
    container.createChild("div", "selection");
    container.createChild("span", "title").createChild("span").textContent = flowContainer.flow.name;

    TreeElement.call(this, container, flowContainer, false);

    this._overset = false;
    this.setOverset(flowContainer.flow.overset);
}

WebInspector.FlowTreeElement.prototype = {
    /**
     * @param {boolean} newOverset
     */
    setOverset: function(newOverset)
    {
        if (this._overset === newOverset)
            return;

        if (newOverset) {
            this.title.classList.add("named-flow-overflow");
            this.tooltip = WebInspector.UIString("Overflows.");
        } else {
            this.title.classList.remove("named-flow-overflow");
            this.tooltip = "";
        }

        this._overset = newOverset;
    },

    __proto__: TreeElement.prototype
}