Reviewed by Tim Hatcher.

        - http://bugzilla.opendarwin.org/show_bug.cgi?id=10168
          add a first cut at a Metrics pane to the inspector

        * WebInspector/webInspector/inspector.css: Add styles for the new metrics pane.
        * WebInspector/webInspector/inspector.html: Add the new metrics pane, starting with
        the table to show the box model.
        * WebInspector/webInspector/inspector.js: Add the new metrics pane. Add back some
        "title" attributes so we have more tooltips. Removed the optional parameter to
        getComputedStyle.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@15713 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/WebKit/ChangeLog b/WebKit/ChangeLog
index 1d1b0dc1fe9a0f74f9d0fe12773318b8fb82f616..a7ada6eb1b6a94a551b8dad73f9efaccb61a83c6 100644 (file)
--- a/WebKit/ChangeLog
+++ b/WebKit/ChangeLog
@@ -1,3 +1,17 @@
+2006-07-31  Darin Adler  <darin@apple.com>
+
+        Reviewed by Tim Hatcher.
+
+        - http://bugzilla.opendarwin.org/show_bug.cgi?id=10168
+          add a first cut at a Metrics pane to the inspector
+
+        * WebInspector/webInspector/inspector.css: Add styles for the new metrics pane.
+        * WebInspector/webInspector/inspector.html: Add the new metrics pane, starting with
+        the table to show the box model.
+        * WebInspector/webInspector/inspector.js: Add the new metrics pane. Add back some
+        "title" attributes so we have more tooltips. Removed the optional parameter to
+        getComputedStyle.
+
 2006-07-31  Anders Carlsson  <acarlsson@apple.com>
 
         Reviewed by John.
@@ -17,8 +31,8 @@
 
         Reviewed by Tim Hatcher.
 
-        Bug 10163: some improvements for the inspector
-        http://bugzilla.opendarwin.org/show_bug.cgi?id=10163
+        - http://bugzilla.opendarwin.org/show_bug.cgi?id=10163
+          some improvements for the inspector
 
         * WebInspector/WebInspector.m:
         (+[WebInspector sharedWebInspector:]): Fixed bug that could cause the inspector

diff --git a/WebKit/WebInspector/webInspector/inspector.css b/WebKit/WebInspector/webInspector/inspector.css
index 06830d6362207f070b8e191273bf770d03e8de4f..87e4ac37f403711e807babff99bbbe938939f906 100644 (file)
--- a/WebKit/WebInspector/webInspector/inspector.css
+++ b/WebKit/WebInspector/webInspector/inspector.css
@@ -875,3 +875,49 @@ button.toggle.right {
 .propertyList li .value {
     color: rgb(255,255,180);
 }
+
+.boxModelTable td {
+    text-align: center;
+    min-width: 10px;
+}
+
+.boxModelTable .horizontalCell {
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+#marginBoxTable {
+    border: 1px dashed;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 50px;
+}
+
+#borderBoxTable {
+    border: 1px solid
+}
+
+#paddingBoxTable {
+    border: 1px grey dashed
+}
+
+#content {
+    border: 1px grey solid;
+    padding: 10px
+}
+
+.boxModelLabel {
+    position: absolute;
+    color: grey;
+    text-shadow: none;
+    left: 2px;
+    font-size: 9px;
+}
+
+#noMetrics {
+    font-size: 16px;
+    font-weight: bold;
+    color: rgba(255,255,255,0.4);
+    text-align: center;
+    margin-top: 40%;
+}

diff --git a/WebKit/WebInspector/webInspector/inspector.html b/WebKit/WebInspector/webInspector/inspector.html
index 77de9a0286dfe4e23088171b3482711c393ac25a..e995960008274082661d54fed5d7b58b5367ac69 100644 (file)
--- a/WebKit/WebInspector/webInspector/inspector.html
+++ b/WebKit/WebInspector/webInspector/inspector.html
@@ -107,7 +107,28 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
             <div id="stylePropertiesScrollbar" class="scrollbar"></div>
         </div>
     </div>
-    <div id="metricsPane" class="pane" style="display: none; text-align: center"><br /><br /><br />(not finished)</div>
+    <div id="metricsPane" class="pane" style="display: none">
+        <div id="noMetrics" style="display: none">No metrics</div>
+        <table class="boxModelTable" id="marginBoxTable" cellpadding=0 cellspacing=0>
+            <tr><td valign="top"><div style="position:relative"><div class="boxModelLabel">margin</div></div></td><td id="margin-top"></td><td></td></tr>
+            <tr><td class="horizontalCell" id="margin-left"></td><td>
+                <table class="boxModelTable" id="borderBoxTable" cellpadding=0 cellspacing=0>
+                    <tr><td valign="top"><div style="position:relative"><div class="boxModelLabel">border</div></div></td><td id="border-top"></td><td></td></tr>
+                    <tr><td class="horizontalCell" id="border-left"></td><td>
+                        <table class="boxModelTable" id="paddingBoxTable" cellpadding=0 cellspacing=0>
+                            <tr><td valign="top"><div style="position:relative"><div class="boxModelLabel">padding</div></div></td><td id="padding-top"></td><td></td></tr>
+                            <tr><td class="horizontalCell" id="padding-left"></td><td>
+                                <div id="content"></div></div>
+                            </td><td class="horizontalCell" id="padding-right"></td></tr>
+                            <tr><td></td><td id="padding-bottom"></td><td></td></tr>
+                        </table>
+                    </td><td class="horizontalCell" id="border-right"></td></tr>
+                    <tr><td></td><td id="border-bottom"></td><td></td></tr>
+                </table>
+            </td><td class="horizontalCell" id="margin-right"></td></tr>
+            <tr><td></td><td id="margin-bottom"></td><td></td></tr>
+        </table>
+    </div>
     <div id="propertiesPane" class="pane" style="display: none">
         <div id="jsProperties" class="scrollArea">
             <div class="view"><div id="jsPropertiesScrollview"><ul class="propertyList" id="jsPropertiesList"></ul></div></div>

diff --git a/WebKit/WebInspector/webInspector/inspector.js b/WebKit/WebInspector/webInspector/inspector.js
index f4154fe51a1653bf4478f14f0da4b48c2154e9ce..7f5328c16145af5e083a6a08123c8b9992d5cc86 100644 (file)
--- a/WebKit/WebInspector/webInspector/inspector.js
+++ b/WebKit/WebInspector/webInspector/inspector.js
@@ -373,7 +373,7 @@ function updateElementAttributes()
         span = document.createElement("span");
         span.className = "value";
         span.textContent = attr.value;
-        span.title = span.textContent;
+        span.title = attr.value;
         li.appendChild(span);
 
         if (attr.style) {
@@ -450,7 +450,7 @@ function updateStylePane()
 
         var propertyCount = [];
 
-        var computedStyle = focusedNode.ownerDocument.defaultView.getComputedStyle(focusedNode, "");
+        var computedStyle = focusedNode.ownerDocument.defaultView.getComputedStyle(focusedNode);
         if (computedStyle && computedStyle.length) {
             var computedObj = {
                 isComputedStyle: true,
@@ -510,19 +510,22 @@ function updateStylePane()
 
             var cell = document.createElement("div");
             cell.className = "cell selector";
-            cell.title = styleRules[i].selectorText;
-            cell.textContent = cell.title;
+            var text = styleRules[i].selectorText;
+            cell.textContent = text;
+            cell.title = text;
             row.appendChild(cell);
 
             cell = document.createElement("div");
             cell.className = "cell stylesheet";
+            var sheet;
             if (styleRules[i].subtitle != null)
-                cell.title = styleRules[i].subtitle;
+                sheet = styleRules[i].subtitle;
             else if (styleRules[i].parentStyleSheet && styleRules[i].parentStyleSheet.href)
-                cell.title = styleRules[i].parentStyleSheet.href;
+                sheet = styleRules[i].parentStyleSheet.href;
             else
-                cell.title = "inline stylesheet";
-            cell.textContent = cell.title;
+                sheet = "inline stylesheet";
+            cell.textContent = sheet;
+            cell.title = sheet;
             row.appendChild(cell);
 
             row.styleRuleIndex = i;
@@ -657,6 +660,7 @@ function populateStyleListItem(li, prop, name)
     if (priority.length)
         textValue += " !" + priority;
     span.textContent = textValue;
+    span.title = textValue;
     li.appendChild(span);
 
     var colors = value.match(/(rgb\([0-9]+, [0-9]+, [0-9]+\))|(rgba\([0-9]+, [0-9]+, [0-9]+, [0-9]+\))/g);
@@ -778,8 +782,47 @@ function selectMappedStyleRule(attrName)
     switchPane("style");
 }
 
+function setMetric(style, name, suffix)
+{
+    var value = style.getPropertyValue(name + suffix);
+    if (value == "" || value == "0px")
+        value = "\u2012";
+    else
+        value = value.replace(/px$/, "");
+    document.getElementById(name).textContent = value;
+}
+
+function setBoxMetrics(style, box, suffix)
+{
+    setMetric(style, box + "-left", suffix);
+    setMetric(style, box + "-right", suffix);
+    setMetric(style, box + "-top", suffix);
+    setMetric(style, box + "-bottom", suffix);
+}
+
 function updateMetricsPane()
 {
+    var style;
+    var focusedNode = Inspector.focusedDOMNode();
+    if (focusedNode.nodeType == Node.ELEMENT_NODE)
+        style = focusedNode.ownerDocument.defaultView.getComputedStyle(focusedNode);
+    if (!style || style.length == 0) {
+        document.getElementById("noMetrics").style.display = null;
+        document.getElementById("marginBoxTable").style.display = "none";
+        return;
+    }
+
+    document.getElementById("noMetrics").style.display = "none";
+    document.getElementById("marginBoxTable").style.display = null;
+
+    setBoxMetrics(style, "margin", "");
+    setBoxMetrics(style, "border", "-width");
+    setBoxMetrics(style, "padding", "");
+
+    var size = style.getPropertyValue("width").replace(/px$/, "")
+        + " \u00D7 "
+        + style.getPropertyValue("height").replace(/px$/, "");
+    document.getElementById("content").textContent = size;
 }
 
 function updatePropertiesPane()
@@ -805,6 +848,7 @@ function updatePropertiesPane()
         span = document.createElement("span");
         span.className = "value";
         span.textContent = value;
+        span.title = value;
         li.appendChild(span);
 
         list.appendChild(li);