CSSNamedFlowCollectionsView.js [plain text]
WebInspector.CSSNamedFlowCollectionsView = function()
{
WebInspector.SidebarView.call(this, WebInspector.SidebarView.SidebarPosition.Start);
this.registerRequiredCSS("cssNamedFlows.css");
this._namedFlows = {};
this._contentNodes = {};
this._regionNodes = {};
this.element.addStyleClass("css-named-flow-collections-view");
this.element.addStyleClass("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.addStyleClass("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.showViewInDrawer(this._statusElement, this);
},
reset: function()
{
if (!this._document)
return;
WebInspector.cssModel.getNamedFlowCollectionAsync(this._document.id, this._resetNamedFlows.bind(this));
},
_setDocument: function(document)
{
this._document = document;
this.reset();
},
_documentUpdated: function(event)
{
var document = (event.data);
this._setDocument(document);
},
_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);
}
},
_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);
},
_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);
},
_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;
},
_resetNamedFlows: function(namedFlowCollection)
{
for (var flowHash in this._namedFlows)
this._removeNamedFlow(flowHash);
var namedFlows = 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());
},
_namedFlowCreated: function(event)
{
if (event.data.documentNodeId !== this._document.id)
return;
var flow = (event.data);
this._appendNamedFlow(flow);
},
_namedFlowRemoved: function(event)
{
if (event.data.documentNodeId !== this._document.id)
return;
this._removeNamedFlow(this._hashNamedFlow(event.data.documentNodeId, event.data.flowName));
},
_regionLayoutUpdated: function(event)
{
if (event.data.documentNodeId !== this._document.id)
return;
var flow = (event.data);
this._updateNamedFlow(flow);
},
_hashNamedFlow: function(documentNodeId, flowName)
{
return documentNodeId + "|" + flowName;
},
_showNamedFlow: function(flowHash)
{
this._selectNamedFlowInSidebar(flowHash);
this._selectNamedFlowTab(flowHash);
},
_selectNamedFlowInSidebar: function(flowHash)
{
this._namedFlows[flowHash].flowTreeItem.select(true);
},
_selectNamedFlowTab: function(flowHash)
{
var flowContainer = this._namedFlows[flowHash];
if (this._tabbedPane.selectedTabId === flowHash)
return;
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);
}
},
_selectedNodeChanged: function(event)
{
var node = (event.data);
this._showNamedFlowForNode(node);
},
_tabSelected: function(event)
{
this._selectNamedFlowInSidebar(event.data.tabId);
},
_tabClosed: function(event)
{
this._namedFlows[event.data.tabId].flowTreeItem.deselect();
},
_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.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.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
}
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 = {
setOverset: function(newOverset)
{
if (this._overset === newOverset)
return;
if (newOverset) {
this.title.addStyleClass("named-flow-overflow");
this.tooltip = WebInspector.UIString("Overflows.");
} else {
this.title.removeStyleClass("named-flow-overflow");
this.tooltip = "";
}
this._overset = newOverset;
},
__proto__: TreeElement.prototype
}