OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright (C) 2007 Apple Inc. 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 copyright | |
9 * notice, this list of conditions and the following disclaimer. | |
10 * 2. Redistributions in binary form must reproduce the above copyright | |
11 * notice, this list of conditions and the following disclaimer in the | |
12 * documentation and/or other materials provided with the distribution. | |
13 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of | |
14 * its contributors may be used to endorse or promote products derived | |
15 * from this software without specific prior written permission. | |
16 * | |
17 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY | |
18 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | |
19 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | |
20 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY | |
21 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | |
22 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | |
23 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | |
24 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
25 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | |
26 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
27 */ | |
28 | |
29 WebInspector.MetricsSidebarPane = function() | |
30 { | |
31 WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics")); | |
32 } | |
33 | |
34 WebInspector.MetricsSidebarPane.prototype = { | |
35 update: function(node) | |
36 { | |
37 var body = this.bodyElement; | |
38 | |
39 body.removeChildren(); | |
40 | |
41 if (node) | |
42 this.node = node; | |
43 else | |
44 node = this.node; | |
45 | |
46 if (!node || !node.ownerDocument.defaultView) | |
47 return; | |
48 | |
49 var style; | |
50 if (node.nodeType === Node.ELEMENT_NODE) | |
51 style = node.ownerDocument.defaultView.getComputedStyle(node); | |
52 if (!style) | |
53 return; | |
54 | |
55 var metricsElement = document.createElement("div"); | |
56 metricsElement.className = "metrics"; | |
57 | |
58 function createBoxPartElement(style, name, side, suffix) | |
59 { | |
60 var propertyName = (name !== "position" ? name + "-" : "") + side +
suffix; | |
61 var value = style.getPropertyValue(propertyName); | |
62 if (value === "" || (name !== "position" && value === "0px")) | |
63 value = "\u2012"; | |
64 else if (name === "position" && value === "auto") | |
65 value = "\u2012"; | |
66 value = value.replace(/px$/, ""); | |
67 | |
68 var element = document.createElement("div"); | |
69 element.className = side; | |
70 element.textContent = value; | |
71 element.addEventListener("dblclick", this.startEditing.bind(this, el
ement, name, propertyName), false); | |
72 return element; | |
73 } | |
74 | |
75 // Display types for which margin is ignored. | |
76 var noMarginDisplayType = { | |
77 "table-cell": true, | |
78 "table-column": true, | |
79 "table-column-group": true, | |
80 "table-footer-group": true, | |
81 "table-header-group": true, | |
82 "table-row": true, | |
83 "table-row-group": true | |
84 }; | |
85 | |
86 // Display types for which padding is ignored. | |
87 var noPaddingDisplayType = { | |
88 "table-column": true, | |
89 "table-column-group": true, | |
90 "table-footer-group": true, | |
91 "table-header-group": true, | |
92 "table-row": true, | |
93 "table-row-group": true | |
94 }; | |
95 | |
96 // Position types for which top, left, bottom and right are ignored. | |
97 var noPositionType = { | |
98 "static": true | |
99 }; | |
100 | |
101 var boxes = ["content", "padding", "border", "margin", "position"]; | |
102 var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString
("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), W
ebInspector.UIString("position")]; | |
103 var previousBox; | |
104 for (var i = 0; i < boxes.length; ++i) { | |
105 var name = boxes[i]; | |
106 | |
107 if (name === "margin" && noMarginDisplayType[style.display]) | |
108 continue; | |
109 if (name === "padding" && noPaddingDisplayType[style.display]) | |
110 continue; | |
111 if (name === "position" && noPositionType[style.position]) | |
112 continue; | |
113 | |
114 var boxElement = document.createElement("div"); | |
115 boxElement.className = name; | |
116 | |
117 if (name === "content") { | |
118 var width = style.width.replace(/px$/, ""); | |
119 var widthElement = document.createElement("span"); | |
120 widthElement.textContent = width; | |
121 widthElement.addEventListener("dblclick", this.startEditing.bind
(this, widthElement, "width", "width"), false); | |
122 | |
123 var height = style.height.replace(/px$/, ""); | |
124 var heightElement = document.createElement("span"); | |
125 heightElement.textContent = height; | |
126 heightElement.addEventListener("dblclick", this.startEditing.bin
d(this, heightElement, "height", "height"), false); | |
127 | |
128 boxElement.appendChild(widthElement); | |
129 boxElement.appendChild(document.createTextNode(" \u00D7 ")); | |
130 boxElement.appendChild(heightElement); | |
131 } else { | |
132 var suffix = (name === "border" ? "-width" : ""); | |
133 | |
134 var labelElement = document.createElement("div"); | |
135 labelElement.className = "label"; | |
136 labelElement.textContent = boxLabels[i]; | |
137 boxElement.appendChild(labelElement); | |
138 | |
139 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "top", suffix)); | |
140 boxElement.appendChild(document.createElement("br")); | |
141 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "left", suffix)); | |
142 | |
143 if (previousBox) | |
144 boxElement.appendChild(previousBox); | |
145 | |
146 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "right", suffix)); | |
147 boxElement.appendChild(document.createElement("br")); | |
148 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "bottom", suffix)); | |
149 } | |
150 | |
151 previousBox = boxElement; | |
152 } | |
153 | |
154 metricsElement.appendChild(previousBox); | |
155 body.appendChild(metricsElement); | |
156 }, | |
157 | |
158 startEditing: function(targetElement, box, styleProperty) | |
159 { | |
160 if (WebInspector.isBeingEdited(targetElement)) | |
161 return; | |
162 | |
163 var context = { box: box, styleProperty: styleProperty }; | |
164 | |
165 WebInspector.startEditing(targetElement, this.editingCommitted.bind(this
), this.editingCancelled.bind(this), context); | |
166 }, | |
167 | |
168 editingCancelled: function(element, context) | |
169 { | |
170 this.update(); | |
171 }, | |
172 | |
173 editingCommitted: function(element, userInput, previousContent, context) | |
174 { | |
175 if (userInput === previousContent) | |
176 return this.editingCancelled(element, context); // nothing changed,
so cancel | |
177 | |
178 if (context.box !== "position" && (!userInput || userInput === "\u2012")
) | |
179 userInput = "0px"; | |
180 else if (context.box === "position" && (!userInput || userInput === "\u2
012")) | |
181 userInput = "auto"; | |
182 | |
183 // Append a "px" unit if the user input was just a number. | |
184 if (/^\d+$/.test(userInput)) | |
185 userInput += "px"; | |
186 | |
187 this.node.style.setProperty(context.styleProperty, userInput, ""); | |
188 | |
189 this.dispatchEventToListeners("metrics edited"); | |
190 | |
191 this.update(); | |
192 } | |
193 } | |
194 | |
195 WebInspector.MetricsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.p
rototype; | |
OLD | NEW |