Title: [108473] trunk
Revision
108473
Author
[email protected]
Date
2012-02-22 02:42:46 -0800 (Wed, 22 Feb 2012)

Log Message

Web Inspector: Audit rules to recommend unprefixing supported CSS properties
https://bugs.webkit.org/show_bug.cgi?id=78985

Reviewed by Pavel Feldman.

Source/WebCore:

* inspector/front-end/AuditCategories.js:
(WebInspector.AuditCategories.PagePerformance.prototype.initialize):
* inspector/front-end/AuditRules.js:
(WebInspector.AuditRules.CSSRuleBase):
(WebInspector.AuditRules.CSSRuleBase.prototype.doRun.sheetsCallback):
(WebInspector.AuditRules.CSSRuleBase.prototype.doRun):
(WebInspector.AuditRules.CSSRuleBase.prototype._visitStyleSheet.sheetCallback):
(WebInspector.AuditRules.CSSRuleBase.prototype._visitStyleSheet):
(WebInspector.AuditRules.CSSRuleBase.prototype._visitRule):
(WebInspector.AuditRules.CSSRuleBase.prototype.visitStyleSheet):
(WebInspector.AuditRules.CSSRuleBase.prototype.didVisitStyleSheet):
(WebInspector.AuditRules.CSSRuleBase.prototype.visitRule):
(WebInspector.AuditRules.CSSRuleBase.prototype.didVisitRule):
(WebInspector.AuditRules.CSSRuleBase.prototype.visitProperty):
(WebInspector.AuditRules.VendorPrefixedCSSProperties):
(WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.didVisitStyleSheet):
(WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.visitRule):
(WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.didVisitRule):
(WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.visitProperty):
* inspector/front-end/ResourceUtils.js:

LayoutTests:

* inspector/audits/audits-panel-functional-expected.txt:
* inspector/audits/audits-panel-functional.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (108472 => 108473)


--- trunk/LayoutTests/ChangeLog	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/LayoutTests/ChangeLog	2012-02-22 10:42:46 UTC (rev 108473)
@@ -1,3 +1,13 @@
+2012-02-21  Alexander Pavlov  <[email protected]>
+
+        Web Inspector: Audit rules to recommend unprefixing supported CSS properties
+        https://bugs.webkit.org/show_bug.cgi?id=78985
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/audits/audits-panel-functional-expected.txt:
+        * inspector/audits/audits-panel-functional.html:
+
 2012-02-22  Kenichi Ishibashi  <[email protected]>
 
         Adding WebSocket per-frame DEFLATE extension

Modified: trunk/LayoutTests/inspector/audits/audits-panel-functional-expected.txt (108472 => 108473)


--- trunk/LayoutTests/inspector/audits/audits-panel-functional-expected.txt	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/LayoutTests/inspector/audits/audits-panel-functional-expected.txt	2012-02-22 10:42:46 UTC (rev 108473)
@@ -23,15 +23,19 @@
       should be moved to the document head in 
       audits-panel-functional.html
     Remove unused CSS rules (4)
-     141B (100%) of CSS is not used by the current page.
-      Inline block #1: 29B (100%) is not used by the current page.
+     209B (100%) of CSS is not used by the current page.
+      Inline block #1: 69B (100%) is not used by the current page.
        .unused
        audits-style1.css
       : 43B (100%) is not used by the current page.
        .some-style
-      Inline block #2: 26B (100%) is not used by the current page.
+      Inline block #2: 54B (100%) is not used by the current page.
        .violation
        audits-style1.css
       : 43B (100%) is not used by the current page.
        .some-style
+    Use normal CSS property names instead of vendor-prefixed ones (1)
+      audits-panel-functional.html
+       .violation
+       "-webkit-border-radius" is used, but "border-radius" is supported.
 

Modified: trunk/LayoutTests/inspector/audits/audits-panel-functional.html (108472 => 108473)


--- trunk/LayoutTests/inspector/audits/audits-panel-functional.html	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/LayoutTests/inspector/audits/audits-panel-functional.html	2012-02-22 10:42:46 UTC (rev 108473)
@@ -4,6 +4,8 @@
 <style>
 .unused {
     color: green;
+    -webkit-opacity: 1;
+    opacity: 1;
 }
 </style>
 <script>
@@ -47,7 +49,7 @@
 <body _onload_="runTest()">
 Tests audit rules.
 <style>
-.violation { color: red; }
+.violation { color: red; -webkit-border-radius: 3px; }
 </style>
 <link rel="stylesheet" href="" type="text/css">
 <img src=""

Modified: trunk/Source/WebCore/ChangeLog (108472 => 108473)


--- trunk/Source/WebCore/ChangeLog	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/Source/WebCore/ChangeLog	2012-02-22 10:42:46 UTC (rev 108473)
@@ -1,3 +1,31 @@
+2012-02-21  Alexander Pavlov  <[email protected]>
+
+        Web Inspector: Audit rules to recommend unprefixing supported CSS properties
+        https://bugs.webkit.org/show_bug.cgi?id=78985
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/AuditCategories.js:
+        (WebInspector.AuditCategories.PagePerformance.prototype.initialize):
+        * inspector/front-end/AuditRules.js:
+        (WebInspector.AuditRules.CSSRuleBase):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.doRun.sheetsCallback):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.doRun):
+        (WebInspector.AuditRules.CSSRuleBase.prototype._visitStyleSheet.sheetCallback):
+        (WebInspector.AuditRules.CSSRuleBase.prototype._visitStyleSheet):
+        (WebInspector.AuditRules.CSSRuleBase.prototype._visitRule):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.visitStyleSheet):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.didVisitStyleSheet):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.visitRule):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.didVisitRule):
+        (WebInspector.AuditRules.CSSRuleBase.prototype.visitProperty):
+        (WebInspector.AuditRules.VendorPrefixedCSSProperties):
+        (WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.didVisitStyleSheet):
+        (WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.visitRule):
+        (WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.didVisitRule):
+        (WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.visitProperty):
+        * inspector/front-end/ResourceUtils.js:
+
 2012-02-22  Shinya Kawanaka  <[email protected]>
 
         Node::attach() should be after attaching children in Element::attach().

Modified: trunk/Source/WebCore/inspector/front-end/AuditCategories.js (108472 => 108473)


--- trunk/Source/WebCore/inspector/front-end/AuditCategories.js	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/Source/WebCore/inspector/front-end/AuditCategories.js	2012-02-22 10:42:46 UTC (rev 108473)
@@ -44,6 +44,7 @@
         this.addRule(new WebInspector.AuditRules.UnusedCssRule(), WebInspector.AuditRule.Severity.Warning);
         this.addRule(new WebInspector.AuditRules.CssInHeadRule(), WebInspector.AuditRule.Severity.Severe);
         this.addRule(new WebInspector.AuditRules.StylesScriptsOrderRule(), WebInspector.AuditRule.Severity.Severe);
+        this.addRule(new WebInspector.AuditRules.VendorPrefixedCSSProperties(), WebInspector.AuditRule.Severity.Warning);
     }
 }
 

Modified: trunk/Source/WebCore/inspector/front-end/AuditRules.js (108472 => 108473)


--- trunk/Source/WebCore/inspector/front-end/AuditRules.js	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/Source/WebCore/inspector/front-end/AuditRules.js	2012-02-22 10:42:46 UTC (rev 108473)
@@ -974,6 +974,167 @@
  * @constructor
  * @extends {WebInspector.AuditRule}
  */
+WebInspector.AuditRules.CSSRuleBase = function(id, name)
+{
+    WebInspector.AuditRule.call(this, id, name);
+}
+
+WebInspector.AuditRules.CSSRuleBase.prototype = {
+    doRun: function(resources, result, callback, progressMonitor)
+    {
+        CSSAgent.getAllStyleSheets(sheetsCallback.bind(this));
+
+        function sheetsCallback(error, headers)
+        {
+            if (error)
+                return callback(null);
+
+            for (var i = 0; i < headers.length; ++i) {
+                var header = headers[i];
+                if (header.disabled)
+                    continue; // Do not check disabled stylesheets.
+
+                this._visitStyleSheet(header.styleSheetId, i === headers.length - 1 ? finishedCallback : null, result, progressMonitor);
+            }
+        }
+
+        function finishedCallback()
+        {
+            callback(result);
+        }
+    },
+
+    _visitStyleSheet: function(styleSheetId, callback, result, progressMonitor)
+    {
+        WebInspector.CSSStyleSheet.createForId(styleSheetId, sheetCallback.bind(this));
+
+        function sheetCallback(styleSheet)
+        {
+            if (progressMonitor.canceled)
+                return;
+
+            if (!styleSheet) {
+                if (callback)
+                    callback();
+                return;
+            }
+
+            this.visitStyleSheet(styleSheet, result);
+
+            for (var i = 0; i < styleSheet.rules.length; ++i)
+                this._visitRule(styleSheet, styleSheet.rules[i], result);
+
+            this.didVisitStyleSheet(styleSheet, result);
+
+            if (callback)
+                callback();
+        }
+    },
+
+    _visitRule: function(styleSheet, rule, result)
+    {
+        this.visitRule(styleSheet, rule, result);
+        var allProperties = rule.style.allProperties;
+        for (var i = 0; i < allProperties.length; ++i)
+            this.visitProperty(styleSheet, allProperties[i], result);
+        this.didVisitRule(styleSheet, rule, result);
+    },
+
+    visitStyleSheet: function(styleSheet, result)
+    {
+        // Subclasses can implement.
+    },
+
+    didVisitStyleSheet: function(styleSheet, result)
+    {
+        // Subclasses can implement.
+    },
+    
+    visitRule: function(styleSheet, rule, result)
+    {
+        // Subclasses can implement.
+    },
+
+    didVisitRule: function(styleSheet, rule, result)
+    {
+        // Subclasses can implement.
+    },
+    
+    visitProperty: function(styleSheet, property, result)
+    {
+        // Subclasses can implement.
+    }
+}
+
+WebInspector.AuditRules.CSSRuleBase.prototype.__proto__ = WebInspector.AuditRule.prototype;
+
+/**
+ * @constructor
+ * @extends {WebInspector.AuditRules.CSSRuleBase}
+ */
+WebInspector.AuditRules.VendorPrefixedCSSProperties = function()
+{
+    WebInspector.AuditRules.CSSRuleBase.call(this, "page-vendorprefixedcss", "Use normal CSS property names instead of vendor-prefixed ones");
+    this._webkitPrefix = "-webkit-";
+}
+
+WebInspector.AuditRules.VendorPrefixedCSSProperties.supportedProperties = [
+    "background-clip", "background-origin", "background-size",
+    "border-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border-top-left-radius", "border-top-right-radius",
+    "box-shadow", "box-sizing", "opacity", "text-shadow"
+].keySet();
+
+WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype = {
+    didVisitStyleSheet: function(styleSheet)
+    {
+        delete this._styleSheetResult;
+    },
+
+    visitRule: function(rule)
+    {
+        this._mentionedProperties = {};
+    },
+
+    didVisitRule: function()
+    {
+        delete this._ruleResult;
+        delete this._mentionedProperties;
+    },
+
+    visitProperty: function(styleSheet, property, result)
+    {
+        if (property.name.indexOf(this._webkitPrefix) !== 0)
+            return;
+
+        var normalPropertyName = property.name.substring(this._webkitPrefix.length).toLowerCase(); // Start just after the "-webkit-" prefix.
+        if (WebInspector.AuditRules.VendorPrefixedCSSProperties.supportedProperties[normalPropertyName] && !this._mentionedProperties[normalPropertyName]) {
+            var style = property.ownerStyle;
+            var liveProperty = style.getLiveProperty(normalPropertyName);
+            if (liveProperty && !liveProperty.styleBased)
+                return; // WebCore can provide normal versions of prefixed properties automatically, so be careful to skip only normal source-based properties.
+
+            var rule = style.parentRule;
+            this._mentionedProperties[normalPropertyName] = true;
+            if (!this._styleSheetResult)
+                this._styleSheetResult = result.addChild(rule.sourceURL ? WebInspector.linkifyResourceAsNode(rule.sourceURL) : "<unknown>");
+            if (!this._ruleResult) {
+                var anchor = WebInspector.linkifyURLAsNode(rule.sourceURL, rule.selectorText);
+                anchor.preferredPanel = "resources";
+                anchor.lineNumber = rule.sourceLine;
+                this._ruleResult = this._styleSheetResult.addChild(anchor);
+            }
+            ++result.violationCount;
+            this._ruleResult.addSnippet(String.sprintf("\"" + this._webkitPrefix + "%s\" is used, but \"%s\" is supported.", normalPropertyName, normalPropertyName));
+        }
+    }
+}
+
+WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype.__proto__ = WebInspector.AuditRules.CSSRuleBase.prototype;
+
+/**
+ * @constructor
+ * @extends {WebInspector.AuditRule}
+ */
 WebInspector.AuditRules.CookieRuleBase = function(id, name)
 {
     WebInspector.AuditRule.call(this, id, name);

Modified: trunk/Source/WebCore/inspector/front-end/ResourceUtils.js (108472 => 108473)


--- trunk/Source/WebCore/inspector/front-end/ResourceUtils.js	2012-02-22 10:20:21 UTC (rev 108472)
+++ trunk/Source/WebCore/inspector/front-end/ResourceUtils.js	2012-02-22 10:42:46 UTC (rev 108473)
@@ -190,7 +190,7 @@
 
 /**
  * @param {string} url
- * @param {number} lineNumber
+ * @param {number=} lineNumber
  * @param {string=} classes
  * @param {string=} tooltipText
  * @return {Element}
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to