third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js

   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 /**
  30  * @constructor
  31  * @extends {WebInspector.ElementsSidebarPane}
  32  */
  33 WebInspector.MetricsSidebarPane = function()
  34 {
  35     WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Metrics"));
  36 }
  37
  38 WebInspector.MetricsSidebarPane.prototype = {
  39     /**
  40      * @override
  41      * @param {!WebInspector.Throttler.FinishCallback} finishedCallback
  42      * @protected
  43      */
  44     doUpdate: function(finishedCallback)
  45     {
  46         // "style" attribute might have changed. Update metrics unless they are being edited
  47         // (if a CSS property is added, a StyleSheetChanged event is dispatched).
  48         if (this._isEditingMetrics) {
  49             finishedCallback();
  50             return;
  51         }
  52
  53         // FIXME: avoid updates of a collapsed pane.
  54         var node = this.node();
  55         var cssModel = this.cssModel();
  56         if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) {
  57             this.element.removeChildren();
  58             finishedCallback();
  59             return;
  60         }
  61
  62         /**
  63          * @param {?WebInspector.CSSStyleDeclaration} style
  64          * @this {WebInspector.MetricsSidebarPane}
  65          */
  66         function callback(style)
  67         {
  68             if (!style || this.node() !== node)
  69                 return;
  70             this._updateMetrics(style);
  71         }
  72         /**
  73          * @param {?WebInspector.CSSStyleModel.InlineStyleResult} inlineStyleResult
  74          * @this {WebInspector.MetricsSidebarPane}
  75          */
  76         function inlineStyleCallback(inlineStyleResult)
  77         {
  78             if (inlineStyleResult && this.node() === node)
  79                 this.inlineStyle = inlineStyleResult.inlineStyle;
  80         }
  81
  82         var promises = [
  83             cssModel.computedStylePromise(node.id).then(callback.bind(this)),
  84             cssModel.inlineStylesPromise(node.id).then(inlineStyleCallback.bind(this))
  85         ];
  86         Promise.all(promises)
  87             .then(finishedCallback.bind(null, undefined))
  88             .catch(/** @type {function()} */(finishedCallback));
  89     },
  90
  91     /**
  92      * @override
  93      */
  94     onDOMModelChanged: function()
  95     {
  96         this.update();
  97     },
  98
  99     /**
 100      * @override
 101      */
 102     onCSSModelChanged: function()
 103     {
 104         this.update();
 105     },
 106
 107     /**
 108      * @override
 109      */
 110     onFrameResizedThrottled: function()
 111     {
 112         this.update();
 113     },
 114
 115     _getPropertyValueAsPx: function(style, propertyName)
 116     {
 117         return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0);
 118     },
 119
 120     _getBox: function(computedStyle, componentName)
 121     {
 122         var suffix = componentName === "border" ? "-width" : "";
 123         var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
 124         var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
 125         var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
 126         var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
 127         return { left: left, top: top, right: right, bottom: bottom };
 128     },
 129
 130     /**
 131      * @param {boolean} showHighlight
 132      * @param {string} mode
 133      * @param {!Event} event
 134      */
 135     _highlightDOMNode: function(showHighlight, mode, event)
 136     {
 137         event.consume();
 138         if (showHighlight && this.node()) {
 139             if (this._highlightMode === mode)
 140                 return;
 141             this._highlightMode = mode;
 142             this.node().highlight(mode);
 143         } else {
 144             delete this._highlightMode;
 145             WebInspector.DOMModel.hideDOMNodeHighlight();
 146         }
 147
 148         for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
 149             var element = this._boxElements[i];
 150             if (!this.node() || mode === "all" || element._name === mode)
 151                 element.style.backgroundColor = element._backgroundColor;
 152             else
 153                 element.style.backgroundColor = "";
 154         }
 155     },
 156
 157     /**
 158      * @param {!WebInspector.CSSStyleDeclaration} style
 159      */
 160     _updateMetrics: function(style)
 161     {
 162         // Updating with computed style.
 163         var metricsElement = createElement("div");
 164         metricsElement.className = "metrics";
 165         var self = this;
 166
 167         /**
 168          * @param {!WebInspector.CSSStyleDeclaration} style
 169          * @param {string} name
 170          * @param {string} side
 171          * @param {string} suffix
 172          * @this {WebInspector.MetricsSidebarPane}
 173          */
 174         function createBoxPartElement(style, name, side, suffix)
 175         {
 176             var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
 177             var value = style.getPropertyValue(propertyName);
 178             if (value === "" || (name !== "position" && value === "0px"))
 179                 value = "\u2012";
 180             else if (name === "position" && value === "auto")
 181                 value = "\u2012";
 182             value = value.replace(/px$/, "");
 183             value = Number.toFixedIfFloating(value);
 184
 185             var element = createElement("div");
 186             element.className = side;
 187             element.textContent = value;
 188             element.addEventListener("dblclick", this.startEditing.bind(this, element, name, propertyName, style), false);
 189             return element;
 190         }
 191
 192         function getContentAreaWidthPx(style)
 193         {
 194             var width = style.getPropertyValue("width").replace(/px$/, "");
 195             if (!isNaN(width) && style.getPropertyValue("box-sizing") === "border-box") {
 196                 var borderBox = self._getBox(style, "border");
 197                 var paddingBox = self._getBox(style, "padding");
 198
 199                 width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
 200             }
 201
 202             return Number.toFixedIfFloating(width);
 203         }
 204
 205         function getContentAreaHeightPx(style)
 206         {
 207             var height = style.getPropertyValue("height").replace(/px$/, "");
 208             if (!isNaN(height) && style.getPropertyValue("box-sizing") === "border-box") {
 209                 var borderBox = self._getBox(style, "border");
 210                 var paddingBox = self._getBox(style, "padding");
 211
 212                 height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
 213             }
 214
 215             return Number.toFixedIfFloating(height);
 216         }
 217
 218         // Display types for which margin is ignored.
 219         var noMarginDisplayType = {
 220             "table-cell": true,
 221             "table-column": true,
 222             "table-column-group": true,
 223             "table-footer-group": true,
 224             "table-header-group": true,
 225             "table-row": true,
 226             "table-row-group": true
 227         };
 228
 229         // Display types for which padding is ignored.
 230         var noPaddingDisplayType = {
 231             "table-column": true,
 232             "table-column-group": true,
 233             "table-footer-group": true,
 234             "table-header-group": true,
 235             "table-row": true,
 236             "table-row-group": true
 237         };
 238
 239         // Position types for which top, left, bottom and right are ignored.
 240         var noPositionType = {
 241             "static": true
 242         };
 243
 244         var boxes = ["content", "padding", "border", "margin", "position"];
 245         var boxColors = [
 246             WebInspector.Color.PageHighlight.Content,
 247             WebInspector.Color.PageHighlight.Padding,
 248             WebInspector.Color.PageHighlight.Border,
 249             WebInspector.Color.PageHighlight.Margin,
 250             WebInspector.Color.fromRGBA([0, 0, 0, 0])
 251         ];
 252         var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), WebInspector.UIString("position")];
 253         var previousBox = null;
 254         this._boxElements = [];
 255         for (var i = 0; i < boxes.length; ++i) {
 256             var name = boxes[i];
 257
 258             if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")])
 259                 continue;
 260             if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")])
 261                 continue;
 262             if (name === "position" && noPositionType[style.getPropertyValue("position")])
 263                 continue;
 264
 265             var boxElement = createElement("div");
 266             boxElement.className = name;
 267             boxElement._backgroundColor = boxColors[i].asString(WebInspector.Color.Format.RGBA);
 268             boxElement._name = name;
 269             boxElement.style.backgroundColor = boxElement._backgroundColor;
 270             boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
 271             this._boxElements.push(boxElement);
 272
 273             if (name === "content") {
 274                 var widthElement = createElement("span");
 275                 widthElement.textContent = getContentAreaWidthPx(style);
 276                 widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width", style), false);
 277
 278                 var heightElement = createElement("span");
 279                 heightElement.textContent = getContentAreaHeightPx(style);
 280                 heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height", style), false);
 281
 282                 boxElement.appendChild(widthElement);
 283                 boxElement.createTextChild(" \u00D7 ");
 284                 boxElement.appendChild(heightElement);
 285             } else {
 286                 var suffix = (name === "border" ? "-width" : "");
 287
 288                 var labelElement = createElement("div");
 289                 labelElement.className = "label";
 290                 labelElement.textContent = boxLabels[i];
 291                 boxElement.appendChild(labelElement);
 292
 293                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
 294                 boxElement.appendChild(createElement("br"));
 295                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
 296
 297                 if (previousBox)
 298                     boxElement.appendChild(previousBox);
 299
 300                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
 301                 boxElement.appendChild(createElement("br"));
 302                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
 303             }
 304
 305             previousBox = boxElement;
 306         }
 307
 308         metricsElement.appendChild(previousBox);
 309         metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, "all"), false);
 310         this.element.removeChildren();
 311         this.element.appendChild(metricsElement);
 312     },
 313
 314     startEditing: function(targetElement, box, styleProperty, computedStyle)
 315     {
 316         if (WebInspector.isBeingEdited(targetElement))
 317             return;
 318
 319         var context = { box: box, styleProperty: styleProperty, computedStyle: computedStyle };
 320         var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty);
 321         context.keyDownHandler = boundKeyDown;
 322         targetElement.addEventListener("keydown", boundKeyDown, false);
 323
 324         this._isEditingMetrics = true;
 325
 326         var config = new WebInspector.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
 327         WebInspector.InplaceEditor.startEditing(targetElement, config);
 328
 329         targetElement.getComponentSelection().setBaseAndExtent(targetElement, 0, targetElement, 1);
 330     },
 331
 332     _handleKeyDown: function(context, styleProperty, event)
 333     {
 334         var element = event.currentTarget;
 335
 336         /**
 337          * @param {string} originalValue
 338          * @param {string} replacementString
 339          * @this {WebInspector.MetricsSidebarPane}
 340          */
 341         function finishHandler(originalValue, replacementString)
 342         {
 343             this._applyUserInput(element, replacementString, originalValue, context, false);
 344         }
 345
 346         /**
 347          * @param {string} prefix
 348          * @param {number} number
 349          * @param {string} suffix
 350          * @return {string}
 351          */
 352         function customNumberHandler(prefix, number, suffix)
 353         {
 354             if (styleProperty !== "margin" && number < 0)
 355                 number = 0;
 356             return prefix + number + suffix;
 357         }
 358
 359         WebInspector.handleElementValueModifications(event, element, finishHandler.bind(this), undefined, customNumberHandler);
 360     },
 361
 362     editingEnded: function(element, context)
 363     {
 364         delete this.originalPropertyData;
 365         delete this.previousPropertyDataCandidate;
 366         element.removeEventListener("keydown", context.keyDownHandler, false);
 367         delete this._isEditingMetrics;
 368     },
 369
 370     editingCancelled: function(element, context)
 371     {
 372         if ("originalPropertyData" in this && this.inlineStyle) {
 373             if (!this.originalPropertyData) {
 374                 // An added property, remove the last property in the style.
 375                 var pastLastSourcePropertyIndex = this.inlineStyle.pastLastSourcePropertyIndex();
 376                 if (pastLastSourcePropertyIndex)
 377                     this.inlineStyle.allProperties[pastLastSourcePropertyIndex - 1].setText("", false);
 378             } else
 379                 this.inlineStyle.allProperties[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText, false);
 380         }
 381         this.editingEnded(element, context);
 382         this.update();
 383     },
 384
 385     _applyUserInput: function(element, userInput, previousContent, context, commitEditor)
 386     {
 387         if (!this.inlineStyle) {
 388             // Element has no renderer.
 389             return this.editingCancelled(element, context); // nothing changed, so cancel
 390         }
 391
 392         if (commitEditor && userInput === previousContent)
 393             return this.editingCancelled(element, context); // nothing changed, so cancel
 394
 395         if (context.box !== "position" && (!userInput || userInput === "\u2012"))
 396             userInput = "0px";
 397         else if (context.box === "position" && (!userInput || userInput === "\u2012"))
 398             userInput = "auto";
 399
 400         userInput = userInput.toLowerCase();
 401         // Append a "px" unit if the user input was just a number.
 402         if (/^\d+$/.test(userInput))
 403             userInput += "px";
 404
 405         var styleProperty = context.styleProperty;
 406         var computedStyle = context.computedStyle;
 407
 408         if (computedStyle.getPropertyValue("box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
 409             if (!userInput.match(/px$/)) {
 410                 WebInspector.console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");
 411                 return;
 412             }
 413
 414             var borderBox = this._getBox(computedStyle, "border");
 415             var paddingBox = this._getBox(computedStyle, "padding");
 416             var userValuePx = Number(userInput.replace(/px$/, ""));
 417             if (isNaN(userValuePx))
 418                 return;
 419             if (styleProperty === "width")
 420                 userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right;
 421             else
 422                 userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom;
 423
 424             userInput = userValuePx + "px";
 425         }
 426
 427         this.previousPropertyDataCandidate = null;
 428
 429         var allProperties = this.inlineStyle.allProperties;
 430         for (var i = 0; i < allProperties.length; ++i) {
 431             var property = allProperties[i];
 432             if (property.name !== context.styleProperty || property.inactive)
 433                 continue;
 434
 435             this.previousPropertyDataCandidate = property;
 436             property.setValue(userInput, commitEditor, true, callback.bind(this));
 437             return;
 438         }
 439
 440         this.inlineStyle.appendProperty(context.styleProperty, userInput, callback.bind(this));
 441
 442         /**
 443          * @param {?WebInspector.CSSStyleDeclaration} style
 444          * @this {WebInspector.MetricsSidebarPane}
 445          */
 446         function callback(style)
 447         {
 448             if (!style)
 449                 return;
 450             this.inlineStyle = style;
 451             if (!("originalPropertyData" in this))
 452                 this.originalPropertyData = this.previousPropertyDataCandidate;
 453
 454             if (typeof this._highlightMode !== "undefined")
 455                 this._node.highlight(this._highlightMode);
 456
 457             if (commitEditor)
 458                 this.update();
 459         }
 460     },
 461
 462     editingCommitted: function(element, userInput, previousContent, context)
 463     {
 464         this.editingEnded(element, context);
 465         this._applyUserInput(element, userInput, previousContent, context, true);
 466     },
 467
 468     __proto__: WebInspector.ElementsSidebarPane.prototype
 469 }