diff options
Diffstat (limited to 'chromium/third_party/WebKit/Source/devtools/front_end/MetricsSidebarPane.js')
| -rw-r--r-- | chromium/third_party/WebKit/Source/devtools/front_end/MetricsSidebarPane.js | 467 |
1 files changed, 0 insertions, 467 deletions
diff --git a/chromium/third_party/WebKit/Source/devtools/front_end/MetricsSidebarPane.js b/chromium/third_party/WebKit/Source/devtools/front_end/MetricsSidebarPane.js deleted file mode 100644 index 409c59fc5b0..00000000000 --- a/chromium/third_party/WebKit/Source/devtools/front_end/MetricsSidebarPane.js +++ /dev/null @@ -1,467 +0,0 @@ -/* - * Copyright (C) 2007 Apple Inc. All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions - * are met: - * - * 1. Redistributions of source code must retain the above copyright - * notice, this list of conditions and the following disclaimer. - * 2. Redistributions in binary form must reproduce the above copyright - * notice, this list of conditions and the following disclaimer in the - * documentation and/or other materials provided with the distribution. - * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of - * its contributors may be used to endorse or promote products derived - * from this software without specific prior written permission. - * - * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY - * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF - * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - */ - -/** - * @constructor - * @extends {WebInspector.SidebarPane} - */ -WebInspector.MetricsSidebarPane = function() -{ - WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics")); - - WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this); - WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this); - WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this); - WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._attributesUpdated, this); - WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this); -} - -WebInspector.MetricsSidebarPane.prototype = { - /** - * @param {?WebInspector.DOMNode=} node - */ - update: function(node) - { - if (node) - this.node = node; - this._innerUpdate(); - }, - - _innerUpdate: function() - { - // "style" attribute might have changed. Update metrics unless they are being edited - // (if a CSS property is added, a StyleSheetChanged event is dispatched). - if (this._isEditingMetrics) - return; - - // FIXME: avoid updates of a collapsed pane. - var node = this.node; - - if (!node || node.nodeType() !== Node.ELEMENT_NODE) { - this.bodyElement.removeChildren(); - return; - } - - /** - * @param {?WebInspector.CSSStyleDeclaration} style - * @this {WebInspector.MetricsSidebarPane} - */ - function callback(style) - { - if (!style || this.node !== node) - return; - this._updateMetrics(style); - } - WebInspector.cssModel.getComputedStyleAsync(node.id, callback.bind(this)); - - /** - * @param {?WebInspector.CSSStyleDeclaration} style - * @this {WebInspector.MetricsSidebarPane} - */ - function inlineStyleCallback(style) - { - if (!style || this.node !== node) - return; - this.inlineStyle = style; - } - WebInspector.cssModel.getInlineStylesAsync(node.id, inlineStyleCallback.bind(this)); - }, - - _styleSheetOrMediaQueryResultChanged: function() - { - this._innerUpdate(); - }, - - _frameResized: function() - { - /** - * @this {WebInspector.MetricsSidebarPane} - */ - function refreshContents() - { - this._innerUpdate(); - delete this._activeTimer; - } - - if (this._activeTimer) - clearTimeout(this._activeTimer); - - this._activeTimer = setTimeout(refreshContents.bind(this), 100); - }, - - _attributesUpdated: function(event) - { - if (this.node !== event.data.node) - return; - - this._innerUpdate(); - }, - - _getPropertyValueAsPx: function(style, propertyName) - { - return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0); - }, - - _getBox: function(computedStyle, componentName) - { - var suffix = componentName === "border" ? "-width" : ""; - var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix); - var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix); - var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix); - var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix); - return { left: left, top: top, right: right, bottom: bottom }; - }, - - _highlightDOMNode: function(showHighlight, mode, event) - { - event.consume(); - var nodeId = showHighlight && this.node ? this.node.id : 0; - if (nodeId) { - if (this._highlightMode === mode) - return; - this._highlightMode = mode; - WebInspector.domAgent.highlightDOMNode(nodeId, mode); - } else { - delete this._highlightMode; - WebInspector.domAgent.hideDOMNodeHighlight(); - } - - for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) { - var element = this._boxElements[i]; - if (!nodeId || mode === "all" || element._name === mode) - element.style.backgroundColor = element._backgroundColor; - else - element.style.backgroundColor = ""; - } - }, - - /** - * @param {!WebInspector.CSSStyleDeclaration} style - */ - _updateMetrics: function(style) - { - // Updating with computed style. - var metricsElement = document.createElement("div"); - metricsElement.className = "metrics"; - var self = this; - - /** - * @param {!WebInspector.CSSStyleDeclaration} style - * @param {string} name - * @param {string} side - * @param {string} suffix - * @this {WebInspector.MetricsSidebarPane} - */ - function createBoxPartElement(style, name, side, suffix) - { - var propertyName = (name !== "position" ? name + "-" : "") + side + suffix; - var value = style.getPropertyValue(propertyName); - if (value === "" || (name !== "position" && value === "0px")) - value = "\u2012"; - else if (name === "position" && value === "auto") - value = "\u2012"; - value = value.replace(/px$/, ""); - value = Number.toFixedIfFloating(value); - - var element = document.createElement("div"); - element.className = side; - element.textContent = value; - element.addEventListener("dblclick", this.startEditing.bind(this, element, name, propertyName, style), false); - return element; - } - - function getContentAreaWidthPx(style) - { - var width = style.getPropertyValue("width").replace(/px$/, ""); - if (!isNaN(width) && style.getPropertyValue("box-sizing") === "border-box") { - var borderBox = self._getBox(style, "border"); - var paddingBox = self._getBox(style, "padding"); - - width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right; - } - - return Number.toFixedIfFloating(width); - } - - function getContentAreaHeightPx(style) - { - var height = style.getPropertyValue("height").replace(/px$/, ""); - if (!isNaN(height) && style.getPropertyValue("box-sizing") === "border-box") { - var borderBox = self._getBox(style, "border"); - var paddingBox = self._getBox(style, "padding"); - - height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom; - } - - return Number.toFixedIfFloating(height); - } - - // Display types for which margin is ignored. - var noMarginDisplayType = { - "table-cell": true, - "table-column": true, - "table-column-group": true, - "table-footer-group": true, - "table-header-group": true, - "table-row": true, - "table-row-group": true - }; - - // Display types for which padding is ignored. - var noPaddingDisplayType = { - "table-column": true, - "table-column-group": true, - "table-footer-group": true, - "table-header-group": true, - "table-row": true, - "table-row-group": true - }; - - // Position types for which top, left, bottom and right are ignored. - var noPositionType = { - "static": true - }; - - var boxes = ["content", "padding", "border", "margin", "position"]; - var boxColors = [ - WebInspector.Color.PageHighlight.Content, - WebInspector.Color.PageHighlight.Padding, - WebInspector.Color.PageHighlight.Border, - WebInspector.Color.PageHighlight.Margin, - WebInspector.Color.fromRGBA([0, 0, 0, 0]) - ]; - var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), WebInspector.UIString("position")]; - var previousBox = null; - this._boxElements = []; - for (var i = 0; i < boxes.length; ++i) { - var name = boxes[i]; - - if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")]) - continue; - if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")]) - continue; - if (name === "position" && noPositionType[style.getPropertyValue("position")]) - continue; - - var boxElement = document.createElement("div"); - boxElement.className = name; - boxElement._backgroundColor = boxColors[i].toString(WebInspector.Color.Format.RGBA); - boxElement._name = name; - boxElement.style.backgroundColor = boxElement._backgroundColor; - boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false); - this._boxElements.push(boxElement); - - if (name === "content") { - var widthElement = document.createElement("span"); - widthElement.textContent = getContentAreaWidthPx(style); - widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width", style), false); - - var heightElement = document.createElement("span"); - heightElement.textContent = getContentAreaHeightPx(style); - heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height", style), false); - - boxElement.appendChild(widthElement); - boxElement.appendChild(document.createTextNode(" \u00D7 ")); - boxElement.appendChild(heightElement); - } else { - var suffix = (name === "border" ? "-width" : ""); - - var labelElement = document.createElement("div"); - labelElement.className = "label"; - labelElement.textContent = boxLabels[i]; - boxElement.appendChild(labelElement); - - boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix)); - boxElement.appendChild(document.createElement("br")); - boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix)); - - if (previousBox) - boxElement.appendChild(previousBox); - - boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix)); - boxElement.appendChild(document.createElement("br")); - boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix)); - } - - previousBox = boxElement; - } - - metricsElement.appendChild(previousBox); - metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, ""), false); - this.bodyElement.removeChildren(); - this.bodyElement.appendChild(metricsElement); - }, - - startEditing: function(targetElement, box, styleProperty, computedStyle) - { - if (WebInspector.isBeingEdited(targetElement)) - return; - - var context = { box: box, styleProperty: styleProperty, computedStyle: computedStyle }; - var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty); - context.keyDownHandler = boundKeyDown; - targetElement.addEventListener("keydown", boundKeyDown, false); - - this._isEditingMetrics = true; - - var config = new WebInspector.EditingConfig(this.editingCommitted.bind(this), this.editingCancelled.bind(this), context); - WebInspector.startEditing(targetElement, config); - - window.getSelection().setBaseAndExtent(targetElement, 0, targetElement, 1); - }, - - _handleKeyDown: function(context, styleProperty, event) - { - var element = event.currentTarget; - - /** - * @param {string} originalValue - * @param {string} replacementString - * @this {WebInspector.MetricsSidebarPane} - */ - function finishHandler(originalValue, replacementString) - { - this._applyUserInput(element, replacementString, originalValue, context, false); - } - - function customNumberHandler(number) - { - if (styleProperty !== "margin" && number < 0) - number = 0; - return number; - } - - WebInspector.handleElementValueModifications(event, element, finishHandler.bind(this), undefined, customNumberHandler); - }, - - editingEnded: function(element, context) - { - delete this.originalPropertyData; - delete this.previousPropertyDataCandidate; - element.removeEventListener("keydown", context.keyDownHandler, false); - delete this._isEditingMetrics; - }, - - editingCancelled: function(element, context) - { - if ("originalPropertyData" in this && this.inlineStyle) { - if (!this.originalPropertyData) { - // An added property, remove the last property in the style. - var pastLastSourcePropertyIndex = this.inlineStyle.pastLastSourcePropertyIndex(); - if (pastLastSourcePropertyIndex) - this.inlineStyle.allProperties[pastLastSourcePropertyIndex - 1].setText("", false); - } else - this.inlineStyle.allProperties[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText, false); - } - this.editingEnded(element, context); - this.update(); - }, - - _applyUserInput: function(element, userInput, previousContent, context, commitEditor) - { - if (!this.inlineStyle) { - // Element has no renderer. - return this.editingCancelled(element, context); // nothing changed, so cancel - } - - if (commitEditor && userInput === previousContent) - return this.editingCancelled(element, context); // nothing changed, so cancel - - if (context.box !== "position" && (!userInput || userInput === "\u2012")) - userInput = "0px"; - else if (context.box === "position" && (!userInput || userInput === "\u2012")) - userInput = "auto"; - - userInput = userInput.toLowerCase(); - // Append a "px" unit if the user input was just a number. - if (/^\d+$/.test(userInput)) - userInput += "px"; - - var styleProperty = context.styleProperty; - var computedStyle = context.computedStyle; - - if (computedStyle.getPropertyValue("box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) { - if (!userInput.match(/px$/)) { - WebInspector.log("For elements with box-sizing: border-box, only absolute content area dimensions can be applied", WebInspector.ConsoleMessage.MessageLevel.Error, true); - return; - } - - var borderBox = this._getBox(computedStyle, "border"); - var paddingBox = this._getBox(computedStyle, "padding"); - var userValuePx = Number(userInput.replace(/px$/, "")); - if (isNaN(userValuePx)) - return; - if (styleProperty === "width") - userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right; - else - userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom; - - userInput = userValuePx + "px"; - } - - this.previousPropertyDataCandidate = null; - var self = this; - var callback = function(style) { - if (!style) - return; - self.inlineStyle = style; - if (!("originalPropertyData" in self)) - self.originalPropertyData = self.previousPropertyDataCandidate; - - if (typeof self._highlightMode !== "undefined") { - WebInspector.domAgent.highlightDOMNode(self.node.id, self._highlightMode); - } - - if (commitEditor) { - self.dispatchEventToListeners("metrics edited"); - self.update(); - } - }; - - var allProperties = this.inlineStyle.allProperties; - for (var i = 0; i < allProperties.length; ++i) { - var property = allProperties[i]; - if (property.name !== context.styleProperty || property.inactive) - continue; - - this.previousPropertyDataCandidate = property; - property.setValue(userInput, commitEditor, true, callback); - return; - } - - this.inlineStyle.appendProperty(context.styleProperty, userInput, callback); - }, - - editingCommitted: function(element, userInput, previousContent, context) - { - this.editingEnded(element, context); - this._applyUserInput(element, userInput, previousContent, context, true); - }, - - __proto__: WebInspector.SidebarPane.prototype -} |