Reviewed by Anders.
authorthatcher <thatcher@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jun 2007 14:51:02 +0000 (14:51 +0000)
committerthatcher <thatcher@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jun 2007 14:51:02 +0000 (14:51 +0000)
        Bug 14385: Web Inspector's computed style doesn't show implicitly set properties
        http://bugs.webkit.org/show_bug.cgi?id=14385

        Add a toggle to show implict computed properties.

        * page/inspector/ResourcePanel.js:
        * page/inspector/inspector.css:
        * page/inspector/inspector.js:

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

WebCore/ChangeLog
WebCore/WebCore.xcodeproj/project.pbxproj
WebCore/page/inspector/ResourcePanel.js
WebCore/page/inspector/inspector.css
WebCore/page/inspector/inspector.js

index 30da551..6519e24 100644 (file)
@@ -1,3 +1,16 @@
+2007-06-25  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by Anders.
+
+        Bug 14385: Web Inspector's computed style doesn't show implicitly set properties
+        http://bugs.webkit.org/show_bug.cgi?id=14385
+
+        Add a toggle to show implict computed properties.
+
+        * page/inspector/ResourcePanel.js:
+        * page/inspector/inspector.css:
+        * page/inspector/inspector.js:
+
 2007-06-25  Alp Toker  <alp.toker@collabora.co.uk>
 
         Reviewed by Mark.
index 4a405d1..6eacf8f 100644 (file)
                0867D690FE84028FC02AAC07 /* Project object */ = {
                        isa = PBXProject;
                        buildConfigurationList = 149C284308902B11008A9EFC /* Build configuration list for PBXProject "WebCore" */;
+                       compatibilityVersion = "Xcode 2.4";
                        hasScannedForEncodings = 1;
                        knownRegions = (
                                English,
                        mainGroup = 0867D691FE84028FC02AAC07 /* WebKit */;
                        productRefGroup = 034768DFFF38A50411DB9C8B /* Products */;
                        projectDirPath = "";
+                       projectRoot = "";
                        targets = (
                                93F198A508245E59001E9ABC /* WebCore */,
                                DD041FBE09D9DDBE0010AF2A /* Derived Sources */,
index c5bf7c0..b88fe3c 100644 (file)
@@ -703,7 +703,28 @@ WebInspector.ResourcePanel.prototype = {
                 var section = new WebInspector.PropertiesSection(selectorText);
                 section.expanded = true;
 
-                if (!styleRules[i].isComputedStyle) {
+                if (styleRules[i].isComputedStyle) {
+                    var showInheritedLabel = document.createElement("label");
+                    var showInheritedInput = document.createElement("input");
+                    showInheritedInput.type = "checkbox";
+                    showInheritedInput.checked = Preferences.showInheritedComputedStyleProperties;
+
+                    var computedStyleSection = section;
+                    var showInheritedToggleFunction = function(event) {
+                        Preferences.showInheritedComputedStyleProperties = showInheritedInput.checked;
+                        if (Preferences.showInheritedComputedStyleProperties)
+                            computedStyleSection.element.addStyleClass("show-inherited");
+                        else
+                            computedStyleSection.element.removeStyleClass("show-inherited");
+                        event.stopPropagation();
+                    };
+
+                    showInheritedLabel.addEventListener("click", showInheritedToggleFunction, false);
+
+                    showInheritedLabel.appendChild(showInheritedInput);
+                    showInheritedLabel.appendChild(document.createTextNode("Show implicit properties"));
+                    section.subtitleElement.appendChild(showInheritedLabel);
+                } else {
                     var sheet;
                     var file = false;
                     if (styleRules[i].subtitle)
@@ -728,15 +749,11 @@ WebInspector.ResourcePanel.prototype = {
 
                 var properties = styleProperties[i];
                 var isComputedStyle = styleRules[i].isComputedStyle;
-                var alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
 
                 for (var j = 0; j < properties.length; ++j) {
                     var prop = properties[j];
 
-                    if (isComputedStyle && !alwaysShowComputedProperties[prop.name] && !usedProperties[prop.name])
-                        continue;
-
-                    var propTreeElement = new WebInspector.StylePropertyTreeElement(prop, isComputedStyle);
+                    var propTreeElement = new WebInspector.StylePropertyTreeElement(prop, isComputedStyle, usedProperties);
                     section.propertiesTreeOutline.appendChild(propTreeElement);
                 }
             }
@@ -1211,7 +1228,7 @@ WebInspector.DOMNodeTreeElement.doubleClicked = function(element)
     panel.focusedDOMNode = element.representedObject;
 }
 
-WebInspector.StylePropertyTreeElement = function(prop, computedStyle)
+WebInspector.StylePropertyTreeElement = function(prop, computedStyle, usedProperties)
 {
     var overloadCount = 0;
     var priority;
@@ -1229,7 +1246,7 @@ WebInspector.StylePropertyTreeElement = function(prop, computedStyle)
         priority = prop.style.getPropertyPriority(prop.name);
 
     var overloaded = (prop.unusedProperties[prop.name] || overloadCount === prop.subProperties.length);
-    var title = WebInspector.StylePropertyTreeElement.createTitle(prop.name, prop.style, overloaded, priority, computedStyle);
+    var title = WebInspector.StylePropertyTreeElement.createTitle(prop.name, prop.style, overloaded, priority, computedStyle, usedProperties);
 
     var item = new TreeElement(title, prop, (prop.subProperties && prop.subProperties.length > 1));
     item.computedStyle = computedStyle;
@@ -1237,7 +1254,7 @@ WebInspector.StylePropertyTreeElement = function(prop, computedStyle)
     return item;
 }
 
-WebInspector.StylePropertyTreeElement.createTitle = function(name, style, overloaded, priority, computed)
+WebInspector.StylePropertyTreeElement.createTitle = function(name, style, overloaded, priority, computed, usedProperties)
 {
     // "Nicknames" for some common values that are easier to read.
     var valueNickname = {
@@ -1246,6 +1263,8 @@ WebInspector.StylePropertyTreeElement.createTitle = function(name, style, overlo
         "rgba(0, 0, 0, 0)": "transparent"
     };
 
+    var alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
+
     var value = style.getPropertyValue(name);
 
     var textValue = value;
@@ -1266,6 +1285,8 @@ WebInspector.StylePropertyTreeElement.createTitle = function(name, style, overlo
     var classes = [];
     if (!computed && (style.isPropertyImplicit(name) || value == "initial"))
         classes.push("implicit");
+    if (computed && !usedProperties[name] && !alwaysShowComputedProperties[name])
+        classes.push("inherited");
     if (overloaded)
         classes.push("overloaded");
 
index cbf8cfa..13702f0 100644 (file)
@@ -971,6 +971,23 @@ body.inactive #sidebar li.selected {
     word-wrap: break-word;
 }
 
+.section .header label {
+    display: none;
+}
+
+.section.expanded .header label {
+    display: inline;
+}
+
+.section .header input[type=checkbox] {
+    height: 1em;
+    width: 1em;
+    margin-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    vertical-align: top;
+}
+
 .section .header .subtitle {
     margin-top: 2px;
     font-size: 10px;
@@ -1041,6 +1058,15 @@ body.inactive #sidebar li.selected {
     opacity: 0.5;
 }
 
+.section .properties .inherited {
+    display: none;
+    opacity: 0.5;
+}
+
+.section.show-inherited .properties .inherited {
+    display: inline;
+}
+
 .section .properties .name {
     color: rgb(136, 19, 145);
 }
@@ -1262,17 +1288,17 @@ body.inactive #sidebar li.selected {
 }
 
 .console-error-level::before {
-       content: url(Images/errorMediumIcon.png);
-       position: absolute;
-       left: 4px;
-       top: 3px;
+    content: url(Images/errorMediumIcon.png);
+    position: absolute;
+    left: 4px;
+    top: 3px;
 }
 
 .console-warning-level::before {
-       content: url(Images/warningMediumIcon.png);
-       position: absolute;
-       left: 4px;
-       top: 3px;
+    content: url(Images/warningMediumIcon.png);
+    position: absolute;
+    left: 4px;
+    top: 3px;
 }
 
 .console-command-input, .console-command-output {
@@ -1286,9 +1312,9 @@ body.inactive #sidebar li.selected {
     font-weight: bold;
     font-size: 15px;
     color: blue;
-       position: absolute;
-       left: 7px;
-       top: 1px;
+    position: absolute;
+    left: 7px;
+    top: 1px;
 }
 
 .network-timeline {
index 684b7c3..41dafe3 100644 (file)
@@ -31,7 +31,8 @@ var Preferences = {
     ignoreWhitespace: true,
     showUserAgentStyles: true,
     maxInlineTextChildLength: 80,
-    maxTextSearchResultLength: 80
+    maxTextSearchResultLength: 80,
+    showInheritedComputedStyleProperties: false
 }
 
 var WebInspector = {