| OLD | NEW |
| (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 } | |
| OLD | NEW |