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 this._inlineStyleId = null; |
| 33 } |
| 34 |
| 35 WebInspector.MetricsSidebarPane.prototype = { |
| 36 update: function(node) |
| 37 { |
| 38 var body = this.bodyElement; |
| 39 |
| 40 body.removeChildren(); |
| 41 |
| 42 if (node) |
| 43 this.node = node; |
| 44 else |
| 45 node = this.node; |
| 46 |
| 47 if (!node || !node.ownerDocument.defaultView) |
| 48 return; |
| 49 |
| 50 if (node.nodeType !== Node.ELEMENT_NODE) |
| 51 return; |
| 52 |
| 53 var self = this; |
| 54 var callback = function(stylePayload) { |
| 55 if (!stylePayload) |
| 56 return; |
| 57 var style = WebInspector.CSSStyleDeclaration.parseStyle(stylePayload
); |
| 58 self._update(node, body, style); |
| 59 }; |
| 60 InjectedScriptAccess.getComputedStyle(node.id, callback); |
| 61 |
| 62 var inlineStyleCallback = function(stylePayload) { |
| 63 if (!stylePayload) |
| 64 return; |
| 65 self._inlineStyleId = stylePayload.id; |
| 66 }; |
| 67 InjectedScriptAccess.getInlineStyle(node.id, inlineStyleCallback); |
| 68 }, |
| 69 |
| 70 _update: function(node, body, style) |
| 71 { |
| 72 var metricsElement = document.createElement("div"); |
| 73 metricsElement.className = "metrics"; |
| 74 |
| 75 function createBoxPartElement(style, name, side, suffix) |
| 76 { |
| 77 var propertyName = (name !== "position" ? name + "-" : "") + side +
suffix; |
| 78 var value = style.getPropertyValue(propertyName); |
| 79 if (value === "" || (name !== "position" && value === "0px")) |
| 80 value = "\u2012"; |
| 81 else if (name === "position" && value === "auto") |
| 82 value = "\u2012"; |
| 83 value = value.replace(/px$/, ""); |
| 84 |
| 85 var element = document.createElement("div"); |
| 86 element.className = side; |
| 87 element.textContent = value; |
| 88 element.addEventListener("dblclick", this.startEditing.bind(this, el
ement, name, propertyName), false); |
| 89 return element; |
| 90 } |
| 91 |
| 92 // Display types for which margin is ignored. |
| 93 var noMarginDisplayType = { |
| 94 "table-cell": true, |
| 95 "table-column": true, |
| 96 "table-column-group": true, |
| 97 "table-footer-group": true, |
| 98 "table-header-group": true, |
| 99 "table-row": true, |
| 100 "table-row-group": true |
| 101 }; |
| 102 |
| 103 // Display types for which padding is ignored. |
| 104 var noPaddingDisplayType = { |
| 105 "table-column": true, |
| 106 "table-column-group": true, |
| 107 "table-footer-group": true, |
| 108 "table-header-group": true, |
| 109 "table-row": true, |
| 110 "table-row-group": true |
| 111 }; |
| 112 |
| 113 // Position types for which top, left, bottom and right are ignored. |
| 114 var noPositionType = { |
| 115 "static": true |
| 116 }; |
| 117 |
| 118 var boxes = ["content", "padding", "border", "margin", "position"]; |
| 119 var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString
("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), W
ebInspector.UIString("position")]; |
| 120 var previousBox; |
| 121 for (var i = 0; i < boxes.length; ++i) { |
| 122 var name = boxes[i]; |
| 123 |
| 124 if (name === "margin" && noMarginDisplayType[style.display]) |
| 125 continue; |
| 126 if (name === "padding" && noPaddingDisplayType[style.display]) |
| 127 continue; |
| 128 if (name === "position" && noPositionType[style.position]) |
| 129 continue; |
| 130 |
| 131 var boxElement = document.createElement("div"); |
| 132 boxElement.className = name; |
| 133 |
| 134 if (name === "content") { |
| 135 var width = style.width.replace(/px$/, ""); |
| 136 var widthElement = document.createElement("span"); |
| 137 widthElement.textContent = width; |
| 138 widthElement.addEventListener("dblclick", this.startEditing.bind
(this, widthElement, "width", "width"), false); |
| 139 |
| 140 var height = style.height.replace(/px$/, ""); |
| 141 var heightElement = document.createElement("span"); |
| 142 heightElement.textContent = height; |
| 143 heightElement.addEventListener("dblclick", this.startEditing.bin
d(this, heightElement, "height", "height"), false); |
| 144 |
| 145 boxElement.appendChild(widthElement); |
| 146 boxElement.appendChild(document.createTextNode(" \u00D7 ")); |
| 147 boxElement.appendChild(heightElement); |
| 148 } else { |
| 149 var suffix = (name === "border" ? "-width" : ""); |
| 150 |
| 151 var labelElement = document.createElement("div"); |
| 152 labelElement.className = "label"; |
| 153 labelElement.textContent = boxLabels[i]; |
| 154 boxElement.appendChild(labelElement); |
| 155 |
| 156 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "top", suffix)); |
| 157 boxElement.appendChild(document.createElement("br")); |
| 158 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "left", suffix)); |
| 159 |
| 160 if (previousBox) |
| 161 boxElement.appendChild(previousBox); |
| 162 |
| 163 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "right", suffix)); |
| 164 boxElement.appendChild(document.createElement("br")); |
| 165 boxElement.appendChild(createBoxPartElement.call(this, style, na
me, "bottom", suffix)); |
| 166 } |
| 167 |
| 168 previousBox = boxElement; |
| 169 } |
| 170 |
| 171 metricsElement.appendChild(previousBox); |
| 172 body.appendChild(metricsElement); |
| 173 }, |
| 174 |
| 175 startEditing: function(targetElement, box, styleProperty) |
| 176 { |
| 177 if (WebInspector.isBeingEdited(targetElement)) |
| 178 return; |
| 179 |
| 180 var context = { box: box, styleProperty: styleProperty }; |
| 181 |
| 182 WebInspector.startEditing(targetElement, this.editingCommitted.bind(this
), this.editingCancelled.bind(this), context); |
| 183 }, |
| 184 |
| 185 editingCancelled: function(element, context) |
| 186 { |
| 187 this.update(); |
| 188 }, |
| 189 |
| 190 editingCommitted: function(element, userInput, previousContent, context) |
| 191 { |
| 192 if (userInput === previousContent) |
| 193 return this.editingCancelled(element, context); // nothing changed,
so cancel |
| 194 |
| 195 if (context.box !== "position" && (!userInput || userInput === "\u2012")
) |
| 196 userInput = "0px"; |
| 197 else if (context.box === "position" && (!userInput || userInput === "\u2
012")) |
| 198 userInput = "auto"; |
| 199 |
| 200 // Append a "px" unit if the user input was just a number. |
| 201 if (/^\d+$/.test(userInput)) |
| 202 userInput += "px"; |
| 203 |
| 204 var self = this; |
| 205 var callback = function(success) { |
| 206 if (!success) |
| 207 return; |
| 208 self.dispatchEventToListeners("metrics edited"); |
| 209 self.update(); |
| 210 }; |
| 211 InjectedScriptAccess.setStyleProperty(this._inlineStyleId, context.style
Property, userInput, callback); |
| 212 } |
| 213 } |
| 214 |
| 215 WebInspector.MetricsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.p
rototype; |
OLD | NEW |