| 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 |