Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(221)

Side by Side Diff: Source/devtools/front_end/CSSNamedFlowView.js

Issue 143323014: *** DO NOT LAND *** Attempt to understand Regions complexity Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
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.View}
33 * @param {!WebInspector.NamedFlow} flow
34 */
35 WebInspector.CSSNamedFlowView = function(flow)
36 {
37 WebInspector.View.call(this);
38 this.element.classList.add("css-named-flow");
39 this.element.classList.add("outline-disclosure");
40
41 this._treeOutline = new TreeOutline(this.element.createChild("ol"), true);
42
43 this._contentTreeItem = new TreeElement(WebInspector.UIString("content"), nu ll, true);
44 this._treeOutline.appendChild(this._contentTreeItem);
45
46 this._regionsTreeItem = new TreeElement(WebInspector.UIString("region chain" ), null, true);
47 this._regionsTreeItem.expand();
48 this._treeOutline.appendChild(this._regionsTreeItem);
49
50 this._flow = flow;
51
52 var content = flow.content;
53 for (var i = 0; i < content.length; ++i)
54 this._insertContentNode(content[i]);
55
56 var regions = flow.regions;
57 for (var i = 0; i < regions.length; ++i)
58 this._insertRegion(regions[i]);
59 }
60
61 WebInspector.CSSNamedFlowView.OversetTypeMessageMap = {
62 empty: "empty",
63 fit: "fit",
64 overset: "overset"
65 }
66
67 WebInspector.CSSNamedFlowView.prototype = {
68 /**
69 * @param {?WebInspector.DOMNode} rootDOMNode
70 * @return {?WebInspector.ElementsTreeOutline}
71 */
72 _createFlowTreeOutline: function(rootDOMNode)
73 {
74 if (!rootDOMNode)
75 return null;
76
77 var treeOutline = new WebInspector.ElementsTreeOutline(false, false);
78 treeOutline.element.classList.add("named-flow-element");
79 treeOutline.setVisible(true);
80 treeOutline.rootDOMNode = rootDOMNode;
81 treeOutline.wireToDomAgent();
82 WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.D ocumentUpdated, treeOutline._elementsTreeUpdater._documentUpdated, treeOutline._ elementsTreeUpdater);
83
84 return treeOutline;
85 },
86
87 /**
88 * @param {!DOMAgent.NodeId} contentNodeId
89 * @param {number=} index
90 */
91 _insertContentNode: function(contentNodeId, index)
92 {
93 var treeOutline = this._createFlowTreeOutline(WebInspector.domAgent.node ForId(contentNodeId));
94 var treeItem = new TreeElement(treeOutline.element, treeOutline);
95
96 if (index === undefined) {
97 this._contentTreeItem.appendChild(treeItem);
98 return;
99 }
100
101 this._contentTreeItem.insertChild(treeItem, index);
102 },
103
104 /**
105 * @param {!CSSAgent.Region} region
106 * @param {number=} index
107 */
108 _insertRegion: function(region, index)
109 {
110 var treeOutline = this._createFlowTreeOutline(WebInspector.domAgent.node ForId(region.nodeId));
111 treeOutline.element.classList.add("region-" + region.regionOverset);
112
113 var treeItem = new TreeElement(treeOutline.element, treeOutline);
114 var oversetText = WebInspector.UIString(WebInspector.CSSNamedFlowView.Ov ersetTypeMessageMap[region.regionOverset]);
115 treeItem.tooltip = WebInspector.UIString("Region is %s.", oversetText);
116
117 if (index === undefined) {
118 this._regionsTreeItem.appendChild(treeItem);
119 return;
120 }
121
122 this._regionsTreeItem.insertChild(treeItem, index);
123 },
124
125 get flow()
126 {
127 return this._flow;
128 },
129
130 set flow(newFlow)
131 {
132 this._update(newFlow);
133 },
134
135 /**
136 * @param {!TreeElement} regionTreeItem
137 * @param {string} newRegionOverset
138 * @param {string} oldRegionOverset
139 */
140 _updateRegionOverset: function(regionTreeItem, newRegionOverset, oldRegionOv erset)
141 {
142 var element = regionTreeItem.representedObject.element;
143 element.classList.remove("region-" + oldRegionOverset);
144 element.classList.add("region-" + newRegionOverset);
145
146 var oversetText = WebInspector.UIString(WebInspector.CSSNamedFlowView.Ov ersetTypeMessageMap[newRegionOverset]);
147 regionTreeItem.tooltip = WebInspector.UIString("Region is %s." , overset Text);
148 },
149
150 /**
151 * @param {!Array.<!DOMAgent.NodeId>} oldContent
152 * @param {!Array.<!DOMAgent.NodeId>} newContent
153 */
154 _mergeContentNodes: function(oldContent, newContent)
155 {
156 var nodeIdSet = {};
157 for (var i = 0; i < newContent.length; ++i)
158 nodeIdSet[newContent[i]] = true;
159
160 var oldContentIndex = 0;
161 var newContentIndex = 0;
162 var contentTreeChildIndex = 0;
163
164 while (oldContentIndex < oldContent.length || newContentIndex < newConte nt.length) {
165 if (oldContentIndex === oldContent.length) {
166 this._insertContentNode(newContent[newContentIndex]);
167 ++newContentIndex;
168 continue;
169 }
170
171 if (newContentIndex === newContent.length) {
172 this._contentTreeItem.removeChildAtIndex(contentTreeChildIndex);
173 ++oldContentIndex;
174 continue;
175 }
176
177 if (oldContent[oldContentIndex] === newContent[newContentIndex]) {
178 ++oldContentIndex;
179 ++newContentIndex;
180 ++contentTreeChildIndex;
181 continue;
182 }
183
184 if (nodeIdSet[oldContent[oldContentIndex]]) {
185 this._insertContentNode(newContent[newContentIndex], contentTree ChildIndex);
186 ++newContentIndex;
187 ++contentTreeChildIndex;
188 continue;
189 }
190
191 this._contentTreeItem.removeChildAtIndex(contentTreeChildIndex);
192 ++oldContentIndex;
193 }
194 },
195
196 /**
197 * @param {!Array.<!CSSAgent.Region>} oldRegions
198 * @param {!Array.<!CSSAgent.Region>} newRegions
199 */
200 _mergeRegions: function(oldRegions, newRegions)
201 {
202 var nodeIdSet = {};
203 for (var i = 0; i < newRegions.length; ++i)
204 nodeIdSet[newRegions[i].nodeId] = true;
205
206 var oldRegionsIndex = 0;
207 var newRegionsIndex = 0;
208 var regionsTreeChildIndex = 0;
209
210 while (oldRegionsIndex < oldRegions.length || newRegionsIndex < newRegio ns.length) {
211 if (oldRegionsIndex === oldRegions.length) {
212 this._insertRegion(newRegions[newRegionsIndex]);
213 ++newRegionsIndex;
214 continue;
215 }
216
217 if (newRegionsIndex === newRegions.length) {
218 this._regionsTreeItem.removeChildAtIndex(regionsTreeChildIndex);
219 ++oldRegionsIndex;
220 continue;
221 }
222
223 if (oldRegions[oldRegionsIndex].nodeId === newRegions[newRegionsInde x].nodeId) {
224 if (oldRegions[oldRegionsIndex].regionOverset !== newRegions[new RegionsIndex].regionOverset)
225 this._updateRegionOverset(this._regionsTreeItem.children[reg ionsTreeChildIndex], newRegions[newRegionsIndex].regionOverset, oldRegions[oldRe gionsIndex].regionOverset);
226 ++oldRegionsIndex;
227 ++newRegionsIndex;
228 ++regionsTreeChildIndex;
229 continue;
230 }
231
232 if (nodeIdSet[oldRegions[oldRegionsIndex].nodeId]) {
233 this._insertRegion(newRegions[newRegionsIndex], regionsTreeChild Index);
234 ++newRegionsIndex;
235 ++regionsTreeChildIndex;
236 continue;
237 }
238
239 this._regionsTreeItem.removeChildAtIndex(regionsTreeChildIndex);
240 ++oldRegionsIndex;
241 }
242 },
243
244 /**
245 * @param {!WebInspector.NamedFlow} newFlow
246 */
247 _update: function(newFlow)
248 {
249 this._mergeContentNodes(this._flow.content, newFlow.content);
250 this._mergeRegions(this._flow.regions, newFlow.regions);
251
252 this._flow = newFlow;
253 },
254
255 __proto__: WebInspector.View.prototype
256 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/CSSNamedFlowCollectionsView.js ('k') | Source/devtools/front_end/CSSStyleModel.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698