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.addStyleClass("css-named-flow-collections-view");
     44     this.element.addStyleClass("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.addStyleClass("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.showViewInDrawer(this._statusElement, 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.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      */
    293     _selectNamedFlowTab: function(flowHash)
    294     {
    295         var flowContainer = this._namedFlows[flowHash];
    296 
    297         if (this._tabbedPane.selectedTabId === flowHash)
    298             return;
    299 
    300         if (!this._tabbedPane.selectTab(flowHash)) {
    301             if (!flowContainer.flowView)
    302                 flowContainer.flowView = new WebInspector.CSSNamedFlowView(flowContainer.flow);
    303 
    304             this._tabbedPane.appendTab(flowHash, flowContainer.flow.name, flowContainer.flowView);
    305             this._tabbedPane.selectTab(flowHash);
    306         }
    307     },
    308 
    309     /**
    310      * @param {WebInspector.Event} event
    311      */
    312     _selectedNodeChanged: function(event)
    313     {
    314         var node = /** @type {WebInspector.DOMNode} */ (event.data);
    315         this._showNamedFlowForNode(node);
    316     },
    317 
    318     /**
    319      * @param {WebInspector.Event} event
    320      */
    321     _tabSelected: function(event)
    322     {
    323         this._selectNamedFlowInSidebar(event.data.tabId);
    324     },
    325 
    326     /**
    327      * @param {WebInspector.Event} event
    328      */
    329     _tabClosed: function(event)
    330     {
    331         this._namedFlows[event.data.tabId].flowTreeItem.deselect();
    332     },
    333 
    334     /**
    335      * @param {?WebInspector.DOMNode} node
    336      */
    337     _showNamedFlowForNode: function(node)
    338     {
    339         if (!node)
    340             return;
    341 
    342         if (this._regionNodes[node.id]) {
    343             this._showNamedFlow(this._regionNodes[node.id]);
    344             return;
    345         }
    346 
    347         while (node) {
    348             if (this._contentNodes[node.id]) {
    349                 this._showNamedFlow(this._contentNodes[node.id]);
    350                 return;
    351             }
    352 
    353             node = node.parentNode;
    354         }
    355     },
    356 
    357     wasShown: function()
    358     {
    359         WebInspector.SidebarView.prototype.wasShown.call(this);
    360 
    361         WebInspector.domAgent.requestDocument(this._setDocument.bind(this));
    362 
    363         WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
    364 
    365         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
    366         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
    367         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
    368         WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, this._regionOversetChanged, this);
    369 
    370         WebInspector.panel("elements").treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
    371 
    372         this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
    373         this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._tabClosed, this);
    374     },
    375 
    376     willHide: function()
    377     {
    378         WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
    379 
    380         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
    381         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
    382         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
    383         WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, this._regionOversetChanged, this);
    384 
    385         WebInspector.panel("elements").treeOutline.removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
    386 
    387         this._tabbedPane.removeEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
    388         this._tabbedPane.removeEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._tabClosed, this);
    389     },
    390 
    391     __proto__: WebInspector.SidebarView.prototype
    392 }
    393 
    394 /**
    395  * @constructor
    396  * @extends {TreeElement}
    397  */
    398 WebInspector.FlowTreeElement = function(flowContainer)
    399 {
    400     var container = document.createElement("div");
    401     container.createChild("div", "selection");
    402     container.createChild("span", "title").createChild("span").textContent = flowContainer.flow.name;
    403 
    404     TreeElement.call(this, container, flowContainer, false);
    405 
    406     this._overset = false;
    407     this.setOverset(flowContainer.flow.overset);
    408 }
    409 
    410 WebInspector.FlowTreeElement.prototype = {
    411     /**
    412      * @param {boolean} newOverset
    413      */
    414     setOverset: function(newOverset)
    415     {
    416         if (this._overset === newOverset)
    417             return;
    418 
    419         if (newOverset) {
    420             this.title.addStyleClass("named-flow-overflow");
    421             this.tooltip = WebInspector.UIString("Overflows.");
    422         } else {
    423             this.title.removeStyleClass("named-flow-overflow");
    424             this.tooltip = "";
    425         }
    426 
    427         this._overset = newOverset;
    428     },
    429 
    430     __proto__: TreeElement.prototype
    431 }
    432