Home | History | Annotate | Download | only in front_end 
      1 /*
      2  * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
      3  *
      4  * Redistribution and use in source and binary forms, with or without
      5  * modification, are permitted provided that the following conditions
      6  * are met:
      7  *
      8  * 1. Redistributions of source code must retain the above
      9  *    copyright notice, this list of conditions and the following
     10  *    disclaimer.
     11  * 2. Redistributions in binary form must reproduce the above
     12  *    copyright notice, this list of conditions and the following
     13  *    disclaimer in the documentation and/or other materials
     14  *    provided with the distribution.
     15  *
     16  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
     17  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
     18  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
     19  * FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
     20  * COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
     21  * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
     22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
     23  * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
     24  * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
     25  * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
     26  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
     27  * OF THE POSSIBILITY OF SUCH DAMAGE.
     28  */
     29 
     30 /**
     31  * @constructor
     32  * @extends {WebInspector.SidebarView}
     33  */
     34 WebInspector.CSSNamedFlowCollectionsView = function()
     35 {
     36     WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Start);
     37     this.registerRequiredCSS("cssNamedFlows.css");
     38 
     39     this._namedFlows = {};
     40     this._contentNodes = {};
     41     this._regionNodes = {};
     42 
     43     this.element.classList.add("css-named-flow-collections-view");
     44     this.element.classList.add("fill");
     45 
     46     this._statusElement = document.createElement("span");
     47     this._statusElement.textContent = WebInspector.UIString("CSS Named Flows");
     48 
     49     var sidebarHeader = this.firstElement().createChild("div", "tabbed-pane-header selected sidebar-header");
     50     var tab = sidebarHeader.createChild("div", "tabbed-pane-header-tab");
     51     tab.createChild("span", "tabbed-pane-header-tab-title").textContent = WebInspector.UIString("CSS Named Flows");
     52 
     53     this._sidebarContentElement = this.firstElement().createChild("div", "sidebar-content outline-disclosure");
     54     this._flowListElement = this._sidebarContentElement.createChild("ol");
     55     this._flowTree = new TreeOutline(this._flowListElement);
     56 
     57     this._emptyElement = document.createElement("div");
     58     this._emptyElement.classList.add("info");
     59     this._emptyElement.textContent = WebInspector.UIString("No CSS Named Flows");
     60 
     61     this._tabbedPane = new WebInspector.TabbedPane();
     62     this._tabbedPane.closeableTabs = true;
     63     this._tabbedPane.show(this.secondElement());
     64 }
     65 
     66 WebInspector.CSSNamedFlowCollectionsView.prototype = {
     67     showInDrawer: function()
     68     {
     69         WebInspector.inspectorView.showCloseableViewInDrawer("css-flows", WebInspector.UIString("CSS Flows"), this);
     70     },
     71 
     72     reset: function()
     73     {
     74         if (!this._document)
     75             return;
     76 
     77         WebInspector.cssModel.getNamedFlowCollectionAsync(this._document.id, this._resetNamedFlows.bind(this));
     78     },
     79 
     80     /**
     81      * @param {!WebInspector.DOMDocument} document
     82      */
     83     _setDocument: function(document)
     84     {
     85         this._document = document;
     86         this.reset();
     87     },
     88 
     89     /**
     90      * @param {!WebInspector.Event} event
     91      */
     92     _documentUpdated: function(event)
     93     {
     94         var document = /** @type {!WebInspector.DOMDocument} */ (event.data);
     95         this._setDocument(document);
     96     },
     97 
     98     /**
     99      * @param {boolean} hasContent
    100      */
    101     _setSidebarHasContent: function(hasContent)
    102     {
    103         if (hasContent) {
    104             if (!this._emptyElement.parentNode)
    105                 return;
    106 
    107             this._sidebarContentElement.removeChild(this._emptyElement);
    108             this._sidebarContentElement.appendChild(this._flowListElement);
    109         } else {
    110             if (!this._flowListElement.parentNode)
    111                 return;
    112 
    113             this._sidebarContentElement.removeChild(this._flowListElement);
    114             this._sidebarContentElement.appendChild(this._emptyElement);
    115         }
    116     },
    117 
    118     /**
    119      * @param {!WebInspector.NamedFlow} flow
    120      */
    121     _appendNamedFlow: function(flow)
    122     {
    123         var flowHash = this._hashNamedFlow(flow.documentNodeId, flow.name);
    124         var flowContainer = { flow: flow, flowHash: flowHash };
    125 
    126         for (var i = 0; i < flow.content.length; ++i)
    127             this._contentNodes[flow.content[i]] = flowHash;
    128         for (var i = 0; i < flow.regions.length; ++i)
    129             this._regionNodes[flow.regions[i].nodeId] = flowHash;
    130 
    131         var flowTreeItem = new WebInspector.FlowTreeElement(flowContainer);
    132         flowTreeItem.onselect = this._selectNamedFlowTab.bind(this, flowHash);
    133 
    134         flowContainer.flowTreeItem = flowTreeItem;
    135         this._namedFlows[flowHash] = flowContainer;
    136 
    137         if (!this._flowTree.children.length)
    138             this._setSidebarHasContent(true);
    139         this._flowTree.appendChild(flowTreeItem);
    140     },
    141 
    142     /**
    143      * @param {string} flowHash
    144      */
    145     _removeNamedFlow: function(flowHash)
    146     {
    147         var flowContainer = this._namedFlows[flowHash];
    148 
    149         if (this._tabbedPane._tabsById[flowHash])
    150             this._tabbedPane.closeTab(flowHash);
    151         this._flowTree.removeChild(flowContainer.flowTreeItem);
    152 
    153         var flow = flowContainer.flow;
    154         for (var i = 0; i < flow.content.length; ++i)
    155             delete this._contentNodes[flow.content[i]];
    156         for (var i = 0; i < flow.regions.length; ++i)
    157             delete this._regionNodes[flow.regions[i].nodeId];
    158 
    159         delete this._namedFlows[flowHash];
    160 
    161         if (!this._flowTree.children.length)
    162             this._setSidebarHasContent(false);
    163     },
    164 
    165     /**
    166      * @param {!WebInspector.NamedFlow} flow
    167      */
    168     _updateNamedFlow: function(flow)
    169     {
    170         var flowHash = this._hashNamedFlow(flow.documentNodeId, flow.name);
    171         var flowContainer = this._namedFlows[flowHash];
    172 
    173         if (!flowContainer)
    174             return;
    175 
    176         var oldFlow = flowContainer.flow;
    177         flowContainer.flow = flow;
    178 
    179         for (var i = 0; i < oldFlow.content.length; ++i)
    180             delete this._contentNodes[oldFlow.content[i]];
    181         for (var i = 0; i < oldFlow.regions.length; ++i)
    182             delete this._regionNodes[oldFlow.regions[i].nodeId];
    183 
    184         for (var i = 0; i < flow.content.length; ++i)
    185             this._contentNodes[flow.content[i]] = flowHash;
    186         for (var i = 0; i < flow.regions.length; ++i)
    187             this._regionNodes[flow.regions[i].nodeId] = flowHash;
    188 
    189         flowContainer.flowTreeItem.setOverset(flow.overset);
    190 
    191         if (flowContainer.flowView)
    192             flowContainer.flowView.flow = flow;
    193     },
    194 
    195     /**
    196      * @param {?WebInspector.NamedFlowCollection} namedFlowCollection
    197      */
    198     _resetNamedFlows: function(namedFlowCollection)
    199     {
    200         for (var flowHash in this._namedFlows)
    201             this._removeNamedFlow(flowHash);
    202 
    203         var namedFlows = namedFlowCollection ? namedFlowCollection.namedFlowMap : {};
    204         for (var flowName in namedFlows)
    205             this._appendNamedFlow(namedFlows[flowName]);
    206 
    207         if (!this._flowTree.children.length)
    208             this._setSidebarHasContent(false);
    209         else
    210             this._showNamedFlowForNode(WebInspector.panel("elements").treeOutline.selectedDOMNode());
    211     },
    212 
    213     /**
    214      * @param {!WebInspector.Event} event
    215      */
    216     _namedFlowCreated: function(event)
    217     {
    218         // FIXME: We only have support for Named Flows in the main document.
    219         if (event.data.documentNodeId !== this._document.id)
    220             return;
    221 
    222         var flow = /** @type {!WebInspector.NamedFlow} */ (event.data);
    223         this._appendNamedFlow(flow);
    224     },
    225 
    226     /**
    227      * @param {!WebInspector.Event} event
    228      */
    229     _namedFlowRemoved: function(event)
    230     {
    231         // FIXME: We only have support for Named Flows in the main document.
    232         if (event.data.documentNodeId !== this._document.id)
    233             return;
    234 
    235         this._removeNamedFlow(this._hashNamedFlow(event.data.documentNodeId, event.data.flowName));
    236     },
    237 
    238     /**
    239      * @param {!WebInspector.Event} event
    240      */
    241     _regionLayoutUpdated: function(event)
    242     {
    243         // FIXME: We only have support for Named Flows in the main document.
    244         if (event.data.documentNodeId !== this._document.id)
    245             return;
    246 
    247         var flow = /** @type {!WebInspector.NamedFlow} */ (event.data);
    248         this._updateNamedFlow(flow);
    249     },
    250 
    251     /**
    252      * @param {!WebInspector.Event} event
    253      */
    254     _regionOversetChanged: function(event)
    255     {
    256         // FIXME: We only have support for Named Flows in the main document.
    257         if (event.data.documentNodeId !== this._document.id)
    258             return;
    259 
    260         var flow = /** @type {!WebInspector.NamedFlow} */ (event.data);
    261         this._updateNamedFlow(flow);
    262     },
    263 
    264     /**
    265      * @param {!DOMAgent.NodeId} documentNodeId
    266      * @param {string} flowName
    267      */
    268     _hashNamedFlow: function(documentNodeId, flowName)
    269     {
    270         return documentNodeId + "|" + flowName;
    271     },
    272 
    273     /**
    274      * @param {string} flowHash
    275      */
    276     _showNamedFlow: function(flowHash)
    277     {
    278         this._selectNamedFlowInSidebar(flowHash);
    279         this._selectNamedFlowTab(flowHash);
    280     },
    281 
    282     /**
    283      * @param {string} flowHash
    284      */
    285     _selectNamedFlowInSidebar: function(flowHash)
    286     {
    287         this._namedFlows[flowHash].flowTreeItem.select(true);
    288     },
    289 
    290     /**
    291      * @param {string} flowHash
    292      * @return {boolean}
    293      */
    294     _selectNamedFlowTab: function(flowHash)
    295     {
    296         var flowContainer = this._namedFlows[flowHash];
    297 
    298         if (this._tabbedPane.selectedTabId === flowHash)
    299             return false;
    300 
    301         if (!this._tabbedPane.selectTab(flowHash)) {
    302             if (!flowContainer.flowView)
    303                 flowContainer.flowView = new WebInspector.CSSNamedFlowView(flowContainer.flow);
    304 
    305             this._tabbedPane.appendTab(flowHash, flowContainer.flow.name, flowContainer.flowView);
    306             this._tabbedPane.selectTab(flowHash);
    307         }
    308         return false;
    309     },
    310 
    311     /**
    312      * @param {!WebInspector.Event} event
    313      */
    314     _selectedNodeChanged: function(event)
    315     {
    316         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
    317         this._showNamedFlowForNode(node);
    318     },
    319 
    320     /**
    321      * @param {!WebInspector.Event} event
    322      */
    323     _tabSelected: function(event)
    324     {
    325         this._selectNamedFlowInSidebar(event.data.tabId);
    326     },
    327 
    328     /**
    329      * @param {!WebInspector.Event} event
    330      */
    331     _tabClosed: function(event)
    332     {
    333         this._namedFlows[event.data.tabId].flowTreeItem.deselect();
    334     },
    335 
    336     /**
    337      * @param {?WebInspector.DOMNode} node
    338      */
    339     _showNamedFlowForNode: function(node)
    340     {
    341         if (!node)
    342             return;
    343 
    344         if (this._regionNodes[node.id]) {
    345             this._showNamedFlow(this._regionNodes[node.id]);
    346             return;
    347         }
    348 
    349         while (node) {
    350             if (this._contentNodes[node.id]) {
    351                 this._showNamedFlow(this._contentNodes[node.id]);
    352                 return;
    353             }
    354 
    355             node = node.parentNode;
    356         }
    357     },
    358 
    359     wasShown: function()
    360     {
    361         WebInspector.SidebarView.prototype.wasShown.call(this);
    362 
    363         WebInspector.domAgent.requestDocument(this._setDocument.bind(this));
    364 
    365         WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
    366 
    367         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
    368         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
    369         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
    370         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, this._regionOversetChanged, this);
    371 
    372         WebInspector.panel("elements").treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
    373 
    374         this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
    375         this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._tabClosed, this);
    376     },
    377 
    378     willHide: function()
    379     {
    380         WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
    381 
    382         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
    383         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
    384         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
    385         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, this._regionOversetChanged, this);
    386 
    387         WebInspector.panel("elements").treeOutline.removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
    388 
    389         this._tabbedPane.removeEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
    390         this._tabbedPane.removeEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._tabClosed, this);
    391     },
    392 
    393     __proto__: WebInspector.SidebarView.prototype
    394 }
    395 
    396 /**
    397  * @constructor
    398  * @extends {TreeElement}
    399  */
    400 WebInspector.FlowTreeElement = function(flowContainer)
    401 {
    402     var container = document.createElement("div");
    403     container.createChild("div", "selection");
    404     container.createChild("span", "title").createChild("span").textContent = flowContainer.flow.name;
    405 
    406     TreeElement.call(this, container, flowContainer, false);
    407 
    408     this._overset = false;
    409     this.setOverset(flowContainer.flow.overset);
    410 }
    411 
    412 WebInspector.FlowTreeElement.prototype = {
    413     /**
    414      * @param {boolean} newOverset
    415      */
    416     setOverset: function(newOverset)
    417     {
    418         if (this._overset === newOverset)
    419             return;
    420 
    421         if (newOverset) {
    422             this.title.classList.add("named-flow-overflow");
    423             this.tooltip = WebInspector.UIString("Overflows.");
    424         } else {
    425             this.title.classList.remove("named-flow-overflow");
    426             this.tooltip = "";
    427         }
    428 
    429         this._overset = newOverset;
    430     },
    431 
    432     __proto__: TreeElement.prototype
    433 }
    434