Reviewed by Eric.

        Adds inline style reporting and mapped attribute support to the Inspector Style pane.
        Cleans up the node attributes area with a more natural attr = "value" look.
        Slight optimization to only update visible scrollbars during a window resize.

        * WebInspector.subproj/webInspector/inspector.css:
        * WebInspector.subproj/webInspector/inspector.js:

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

diff --git a/WebKit/ChangeLog b/WebKit/ChangeLog
index b3b40708d41e5636d0e5e620bd792844dd75cca4..429e5958266f37be705a9b9b5f6e131dd3e6723b 100644 (file)
--- a/WebKit/ChangeLog
+++ b/WebKit/ChangeLog
@@ -1,3 +1,14 @@
+2006-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by Eric.
+
+        Adds inline style reporting and mapped attribute support to the Inspector Style pane.
+        Cleans up the node attributes area with a more natural attr = "value" look.
+        Slight optimization to only update visible scrollbars during a window resize.
+
+        * WebInspector.subproj/webInspector/inspector.css:
+        * WebInspector.subproj/webInspector/inspector.js:
+
 2006-01-19  Timothy Hatcher  <timothy@apple.com>
 
         Reviewed by Darin.

diff --git a/WebKit/WebInspector.subproj/webInspector/inspector.css b/WebKit/WebInspector.subproj/webInspector/inspector.css
index cd33ac99330f17ca75dfd9729a3a7bdd675ca732..7326b316bf9626460fbade2af2fb494364c4b51f 100644 (file)
--- a/WebKit/WebInspector.subproj/webInspector/inspector.css
+++ b/WebKit/WebInspector.subproj/webInspector/inspector.css
@@ -619,13 +619,23 @@ button.toggle.right {
 }
 
 .attributeList li .property::after {
-    content: ": ";
+    margin: 0.3em;
+    content: "=";
 }
 
 .attributeList li .value {
     color: rgb(255,255,180);
 }
-    
+
+.attributeList li .value::before, .attributeList li .value::after {
+    content: "\"";
+}
+
+.attributeList li .presentational {
+    margin-left: 0.5em;
+    color: rgba(255,255,255,0.6);
+}
+
 #nodeContents {
     display: -apple-box;
     -apple-box-flex: 12;

diff --git a/WebKit/WebInspector.subproj/webInspector/inspector.js b/WebKit/WebInspector.subproj/webInspector/inspector.js
index 3d37da62990f6cc60855178c33eb131bee833c30..697c0fcfe61c32b762e80f8981805d247d4a7a58 100644 (file)
--- a/WebKit/WebInspector.subproj/webInspector/inspector.js
+++ b/WebKit/WebInspector.subproj/webInspector/inspector.js
@@ -136,9 +136,13 @@ function loaded()
 }
 
 function refreshScrollbars() {
-    nodeContentsScrollArea.refresh();
-    styleRulesScrollArea.refresh();
-    stylePropertiesScrollArea.refresh();
+    if (currentPane == "node") {
+        nodeContentsScrollArea.refresh();
+        elementAttributesScrollArea.refresh();
+    } else if (currentPane == "style") {
+        styleRulesScrollArea.refresh();
+        stylePropertiesScrollArea.refresh();
+    }
 }
 
 var tabNames = ["node","metrics","style","javascript"];
@@ -193,30 +197,34 @@ function updateElementAttributes() {
     var attributesList = document.getElementById("elementAttributesList")
 
     attributesList.innerHTML = "";
-    
-    var namesArray = new Array();
-    for (i = 0; i < focusedNode.attributes.length; i++)
-        namesArray.push(focusedNode.attributes[i].name);
-    namesArray.sort();
-    
-    for (i = 0; i < namesArray.length; i++) {
-        var attr = focusedNode.getAttributeNode(namesArray[i]);
+
+    for (i = 0; i < focusedNode.attributes.length; i++) {
+        var attr = focusedNode.attributes[i];
         var li = document.createElement("li");
-        
+
         var span = document.createElement("span");
         span.className = "property";
-        span.title = attr.namespaceURI;
-        span.textContent = namesArray[i];
+        if (attr.namespaceURI != null)
+            span.title = attr.namespaceURI;
+        span.textContent = attr.name;
         li.appendChild(span);
-        
+
         span = document.createElement("span");
         span.className = "value";
         span.textContent = attr.value;
+        span.title = span.textContent;
         li.appendChild(span);
-        
+
+        if (attr.style != null) {
+            span = document.createElement("span");
+            span.className = "presentational";
+            span.textContent = "(presentational)";
+            li.appendChild(span);
+        }
+
         attributesList.appendChild(li);
     }
-    
+
     elementAttributesScrollArea.refresh();
 }
 
@@ -238,6 +246,7 @@ function updateNodePane() {
         
         if (focusedNode.namespaceURI.length > 0) {
             document.getElementById("nodeNamespace").textContent = focusedNode.namespaceURI;
+            document.getElementById("nodeNamespace").title = focusedNode.namespaceURI;
             document.getElementById("nodeNamespaceRow").style.display = null;
         } else {
             document.getElementById("nodeNamespaceRow").style.display = "none";
@@ -281,7 +290,32 @@ function updateStylePane() {
 
     var propertyCount = new Array();
 
-    styleRules = focusedNode.ownerDocument.defaultView.getMatchedCSSRules(focusedNode, "");
+    styleRules = new Array();
+    var matchedStyleRules = focusedNode.ownerDocument.defaultView.getMatchedCSSRules(focusedNode, "");
+    for (var i = 0; i < matchedStyleRules.length; i++) {
+        styleRules.push(matchedStyleRules[i]);
+    }
+
+    var focusedNodeName = focusedNode.nodeName.toLowerCase();
+    for (i = 0; i < focusedNode.attributes.length; i++) {
+        var attr = focusedNode.attributes[i];
+        if (attr.style) {
+            var attrStyle = new Object();
+            attrStyle.selectorText = focusedNodeName + "[" + attr.name + "=" + attr.value + "]";
+            attrStyle.style = attr.style;
+            attrStyle.subtitle = "element's \"" + attr.name + "\" attribute";
+            styleRules.push(attrStyle);
+        }
+    }
+
+    if (focusedNode.style.length) {
+        var inlineStyle = new Object();
+        inlineStyle.selectorText = "Inline Style";
+        inlineStyle.style = focusedNode.style;
+        inlineStyle.subtitle = "element's \"style\" attribute";
+        styleRules.push(inlineStyle);
+    }
+
     styleProperties = new Array();
 
     if (selectedStyleRuleIndex >= styleRules.length)
@@ -301,11 +335,16 @@ function updateStylePane() {
         cell.textContent = cell.title;
         row.appendChild(cell);
 
-        cell = document.createElement("div");
-        cell.className = "cell stylesheet";
-        cell.title = styleRules[i].parentStyleSheet.href;
-        cell.textContent = cell.title;
-        row.appendChild(cell);
+        if (styleRules[i].parentStyleSheet != null || styleRules[i].subtitle != null) {
+            cell = document.createElement("div");
+            cell.className = "cell stylesheet";
+            if (styleRules[i].subtitle != null)
+                cell.title = styleRules[i].subtitle;
+            else
+                cell.title = styleRules[i].parentStyleSheet.href;
+            cell.textContent = cell.title;
+            row.appendChild(cell);
+        }
 
         row.styleRuleIndex = i;
         row.addEventListener("click", styleRuleSelect, true);