2 * Copyright (C) 2007 Apple Inc. All rights reserved.
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions
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.
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.
29 WebInspector.MetricsSidebarPane = function()
31 WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics"));
33 WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
34 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this);
37 WebInspector.MetricsSidebarPane.prototype = {
38 update: function(node)
45 _innerUpdate: function()
47 // FIXME: avoid updates of a collapsed pane.
50 if (!node || node.nodeType() !== Node.ELEMENT_NODE) {
51 this.bodyElement.removeChildren();
55 function callback(style)
57 if (!style || this.node !== node)
59 this._updateMetrics(style);
61 WebInspector.cssModel.getComputedStyleAsync(node.id, callback.bind(this));
63 function inlineStyleCallback(style)
65 if (!style || this.node !== node)
67 this.inlineStyle = style;
69 WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback.bind(this));
72 _styleSheetChanged: function()
77 _attributesUpdated: function(event)
79 if (this.node !== event.data)
82 // "style" attribute might have changed. Update metrics unless they are being edited.
83 if (!this._isEditingMetrics)
87 _getPropertyValueAsPx: function(style, propertyName)
89 return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0);
92 _getBox: function(computedStyle, componentName)
94 var suffix = componentName === "border" ? "-width" : "";
95 var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
96 var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
97 var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
98 var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
99 return { left: left, top: top, right: right, bottom: bottom };
102 _highlightDOMNode: function(showHighlight, mode, event)
104 function enclosingOrSelfWithClassInArray(element, classNames)
106 for (var node = element; node && node !== element.ownerDocument; node = node.parentNode) {
107 if (node.nodeType === Node.ELEMENT_NODE) {
108 for (var i = 0; i < classNames.length; ++i) {
109 if (node.hasStyleClass(classNames[i]))
117 function getBoxRectangleElement(element)
121 return enclosingOrSelfWithClassInArray(element, ["metrics", "margin", "border", "padding", "content"]);
124 event.stopPropagation();
125 var fromElement = getBoxRectangleElement(event.fromElement);
126 var toElement = getBoxRectangleElement(event.toElement);
128 if (fromElement === toElement)
131 function handleMouseOver(element)
133 element.addStyleClass("hovered");
136 if (element.hasStyleClass("margin"))
137 bgColor = WebInspector.Color.PageHighlight.Margin.toString("original");
138 else if (element.hasStyleClass("border"))
139 bgColor = WebInspector.Color.PageHighlight.Border.toString("original");
140 else if (element.hasStyleClass("padding"))
141 bgColor = WebInspector.Color.PageHighlight.Padding.toString("original");
142 else if (element.hasStyleClass("content"))
143 bgColor = WebInspector.Color.PageHighlight.Content.toString("original");
145 element.style.backgroundColor = bgColor;
148 function handleMouseOut(element)
150 element.style.backgroundColor = "";
151 element.removeStyleClass("hovered");
156 if (this.node && toElement)
157 handleMouseOver(toElement);
158 var nodeId = this.node ? this.node.id : 0;
162 handleMouseOut(fromElement);
166 if (this._highlightMode === mode)
168 this._highlightMode = mode;
170 delete this._highlightMode;
171 WebInspector.highlightDOMNode(nodeId, mode);
174 _updateMetrics: function(style)
176 // Updating with computed style.
177 var metricsElement = document.createElement("div");
178 metricsElement.className = "metrics";
181 function createBoxPartElement(style, name, side, suffix)
183 var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
184 var value = style.getPropertyValue(propertyName);
185 if (value === "" || (name !== "position" && value === "0px"))
187 else if (name === "position" && value === "auto")
189 value = value.replace(/px$/, "");
191 var element = document.createElement("div");
192 element.className = side;
193 element.textContent = value;
194 element.addEventListener("dblclick", this.startEditing.bind(this, element, name, propertyName, style), false);
198 function getContentAreaWidthPx(style)
200 var width = style.getPropertyValue("width").replace(/px$/, "");
201 if (style.getPropertyValue("box-sizing") === "border-box") {
202 var borderBox = self._getBox(style, "border");
203 var paddingBox = self._getBox(style, "padding");
205 width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
211 function getContentAreaHeightPx(style)
213 var height = style.getPropertyValue("height").replace(/px$/, "");
214 if (style.getPropertyValue("box-sizing") === "border-box") {
215 var borderBox = self._getBox(style, "border");
216 var paddingBox = self._getBox(style, "padding");
218 height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
224 // Display types for which margin is ignored.
225 var noMarginDisplayType = {
227 "table-column": true,
228 "table-column-group": true,
229 "table-footer-group": true,
230 "table-header-group": true,
232 "table-row-group": true
235 // Display types for which padding is ignored.
236 var noPaddingDisplayType = {
237 "table-column": true,
238 "table-column-group": true,
239 "table-footer-group": true,
240 "table-header-group": true,
242 "table-row-group": true
245 // Position types for which top, left, bottom and right are ignored.
246 var noPositionType = {
250 var boxes = ["content", "padding", "border", "margin", "position"];
251 var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), WebInspector.UIString("position")];
253 for (var i = 0; i < boxes.length; ++i) {
256 if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")])
258 if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")])
260 if (name === "position" && noPositionType[style.getPropertyValue("position")])
263 var boxElement = document.createElement("div");
264 boxElement.className = name;
265 boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
266 boxElement.addEventListener("mouseout", this._highlightDOMNode.bind(this, false, ""), false);
268 if (name === "content") {
269 var widthElement = document.createElement("span");
270 widthElement.textContent = getContentAreaWidthPx(style);
271 widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width", style), false);
273 var heightElement = document.createElement("span");
274 heightElement.textContent = getContentAreaHeightPx(style);
275 heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height", style), false);
277 boxElement.appendChild(widthElement);
278 boxElement.appendChild(document.createTextNode(" \u00D7 "));
279 boxElement.appendChild(heightElement);
281 var suffix = (name === "border" ? "-width" : "");
283 var labelElement = document.createElement("div");
284 labelElement.className = "label";
285 labelElement.textContent = boxLabels[i];
286 boxElement.appendChild(labelElement);
288 boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
289 boxElement.appendChild(document.createElement("br"));
290 boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
293 boxElement.appendChild(previousBox);
295 boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
296 boxElement.appendChild(document.createElement("br"));
297 boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
300 previousBox = boxElement;
303 metricsElement.appendChild(previousBox);
304 metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, ""), false);
305 metricsElement.addEventListener("mouseout", this._highlightDOMNode.bind(this, false, ""), false);
306 this.bodyElement.removeChildren();
307 this.bodyElement.appendChild(metricsElement);
310 startEditing: function(targetElement, box, styleProperty, computedStyle)
312 if (WebInspector.isBeingEdited(targetElement))
315 var context = { box: box, styleProperty: styleProperty, computedStyle: computedStyle };
316 var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty);
317 context.keyDownHandler = boundKeyDown;
318 targetElement.addEventListener("keydown", boundKeyDown, false);
320 this._isEditingMetrics = true;
321 WebInspector.startEditing(targetElement, {
323 commitHandler: this.editingCommitted.bind(this),
324 cancelHandler: this.editingCancelled.bind(this)
326 window.getSelection().setBaseAndExtent(targetElement, 0, targetElement, 1);
329 _handleKeyDown: function(context, styleProperty, event)
331 if (!/^(?:Page)?(?:Up|Down)$/.test(event.keyIdentifier))
333 var element = event.currentTarget;
335 var selection = window.getSelection();
336 if (!selection.rangeCount)
339 var selectionRange = selection.getRangeAt(0);
340 if (selectionRange.commonAncestorContainer !== element && !selectionRange.commonAncestorContainer.isDescendant(element))
343 var originalValue = element.textContent;
344 var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StylesSidebarPane.StyleValueDelimiters, element);
345 var wordString = wordRange.toString();
347 var matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
348 var replacementString;
349 if (matches && matches.length) {
352 number = WebInspector.StylesSidebarPane.alteredFloatNumber(parseFloat(matches[2]), event);
353 if (number === null) {
354 // Need to check for null explicitly.
358 if (styleProperty !== "margin" && number < 0)
361 replacementString = prefix + number + suffix;
363 if (!replacementString)
366 var replacementTextNode = document.createTextNode(replacementString);
368 wordRange.deleteContents();
369 wordRange.insertNode(replacementTextNode);
371 var finalSelectionRange = document.createRange();
372 finalSelectionRange.setStart(replacementTextNode, 0);
373 finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
375 selection.removeAllRanges();
376 selection.addRange(finalSelectionRange);
378 event.handled = true;
379 event.preventDefault();
380 this._applyUserInput(element, replacementString, originalValue, context, false);
383 editingEnded: function(element, context)
385 delete this.originalPropertyData;
386 delete this.previousPropertyDataCandidate;
387 element.removeEventListener("keydown", context.keyDownHandler, false);
388 delete this._isEditingMetrics;
391 editingCancelled: function(element, context)
393 if ("originalPropertyData" in this && this.inlineStyle) {
394 if (!this.originalPropertyData) {
395 // An added property, remove the last property in the style.
396 var pastLastSourcePropertyIndex = this.inlineStyle.pastLastSourcePropertyIndex();
397 if (pastLastSourcePropertyIndex)
398 this.inlineStyle.allProperties[pastLastSourcePropertyIndex - 1].setText("", false);
400 this.inlineStyle.allProperties[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText, false);
402 this.editingEnded(element, context);
406 _applyUserInput: function(element, userInput, previousContent, context, commitEditor)
408 if (!this.inlineStyle) {
409 // Element has no renderer.
410 delete this.originalPropertyValue;
411 return this.editingCancelled(element, context); // nothing changed, so cancel
414 if (commitEditor && userInput === previousContent)
415 return this.editingCancelled(element, context); // nothing changed, so cancel
417 if (context.box !== "position" && (!userInput || userInput === "\u2012"))
419 else if (context.box === "position" && (!userInput || userInput === "\u2012"))
422 userInput = userInput.toLowerCase();
423 // Append a "px" unit if the user input was just a number.
424 if (/^\d+$/.test(userInput))
427 var styleProperty = context.styleProperty;
428 var computedStyle = context.computedStyle;
430 if (computedStyle.getPropertyValue("box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
431 if (!userInput.match(/px$/)) {
432 WebInspector.log("For elements with box-sizing: border-box, only absolute content area dimensions can be applied", WebInspector.ConsoleMessage.MessageLevel.Error);
433 WebInspector.showConsole();
437 var borderBox = this._getBox(computedStyle, "border");
438 var paddingBox = this._getBox(computedStyle, "padding");
439 var userValuePx = Number(userInput.replace(/px$/, ""));
440 if (isNaN(userValuePx))
442 if (styleProperty === "width")
443 userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right;
445 userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom;
447 userInput = userValuePx + "px";
450 this.previousPropertyDataCandidate = null;
452 var callback = function(style) {
455 self.inlineStyle = style;
456 if (!("originalPropertyData" in self))
457 self.originalPropertyData = self.previousPropertyDataCandidate;
458 if ("_highlightMode" in self) {
459 WebInspector.highlightDOMNode(0, "");
460 WebInspector.highlightDOMNode(self.node.id, self._highlightMode);
463 self.dispatchEventToListeners("metrics edited");
468 var allProperties = this.inlineStyle.allProperties;
469 for (var i = 0; i < allProperties.length; ++i) {
470 var property = allProperties[i];
471 if (property.name !== context.styleProperty || property.inactive)
474 this.previousPropertyDataCandidate = property;
475 property.setValue(userInput, commitEditor, callback);
479 this.inlineStyle.appendProperty(context.styleProperty, userInput, callback);
482 editingCommitted: function(element, userInput, previousContent, context)
484 this.editingEnded(element, context);
485 this._applyUserInput(element, userInput, previousContent, context, true);
489 WebInspector.MetricsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;