Reviewed by Adam.
[WebKit-https.git] / WebCore / page / inspector / 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 WebInspector.MetricsSidebarPane = function()
30 {
31     WebInspector.SidebarPane.call(this, "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             return;
43
44         var style;
45         if (node.nodeType === Node.ELEMENT_NODE)
46             style = node.ownerDocument.defaultView.getComputedStyle(node);
47         if (!style)
48             return;
49
50         var metricsElement = document.createElement("div");
51         metricsElement.className = "metrics";
52
53         function boxPartValue(style, name, suffix)
54         {
55             var value = style.getPropertyValue(name + suffix);
56             if (value === "" || value === "0px")
57                 value = "\u2012";
58             return value.replace(/px$/, "");
59         }
60
61         // Display types for which margin is ignored.
62         var noMarginDisplayType = {
63             "table-cell": true,
64             "table-column": true,
65             "table-column-group": true,
66             "table-footer-group": true,
67             "table-header-group": true,
68             "table-row": true,
69             "table-row-group": true
70         };
71
72         // Display types for which padding is ignored.
73         var noPaddingDisplayType = {
74             "table-column": true,
75             "table-column-group": true,
76             "table-footer-group": true,
77             "table-header-group": true,
78             "table-row": true,
79             "table-row-group": true
80         };
81
82         var boxes = ["content", "padding", "border", "margin"];
83         var previousBox;
84         for (var i = 0; i < boxes.length; ++i) {
85             var name = boxes[i];
86
87             if (name === "margin" && noMarginDisplayType[style.display])
88                 continue;
89             if (name === "padding" && noPaddingDisplayType[style.display])
90                 continue;
91
92             var boxElement = document.createElement("div");
93             boxElement.className = name;
94
95             if (name === "content") {
96                 var width = style.width.replace(/px$/, "");
97                 var height = style.height.replace(/px$/, "");
98                 boxElement.textContent = width + " \u00D7 " + height;
99             } else {
100                 var suffix = (name === "border" ? "-width" : "");
101
102                 var labelElement = document.createElement("div");
103                 labelElement.className = "label";
104                 labelElement.textContent = name;
105                 boxElement.appendChild(labelElement);
106
107                 var topElement = document.createElement("div");
108                 topElement.className = "top";
109                 topElement.textContent = boxPartValue(style, name + "-top", suffix);
110                 boxElement.appendChild(topElement);
111
112                 var leftElement = document.createElement("div");
113                 leftElement.className = "left";
114                 leftElement.textContent = boxPartValue(style, name + "-left", suffix);
115                 boxElement.appendChild(leftElement);
116
117                 if (previousBox)
118                     boxElement.appendChild(previousBox);
119
120                 var rightElement = document.createElement("div");
121                 rightElement.className = "right";
122                 rightElement.textContent = boxPartValue(style, name + "-right", suffix);
123                 boxElement.appendChild(rightElement);
124
125                 var bottomElement = document.createElement("div");
126                 bottomElement.className = "bottom";
127                 bottomElement.textContent = boxPartValue(style, name + "-bottom", suffix);
128                 boxElement.appendChild(bottomElement);
129             }
130
131             previousBox = boxElement;
132         }
133
134         metricsElement.appendChild(previousBox);
135         body.appendChild(metricsElement);
136     }
137 }
138
139 WebInspector.MetricsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;