Bug 78985 - Web Inspector: Audit rules to recommend unprefixing supported CSS properties
Summary: Web Inspector: Audit rules to recommend unprefixing supported CSS properties
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Alexander Pavlov (apavlov)
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-02-18 17:52 PST by Joseph Pecoraro
Modified: 2012-02-22 02:42 PST (History)
14 users (show)

See Also:


Attachments
Patch (11.71 KB, patch)
2012-02-20 08:58 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
[PATCH] A better test that covers both prefixed and unprefixed versions present in the same rule (11.65 KB, patch)
2012-02-20 09:04 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (11.50 KB, patch)
2012-02-21 03:16 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
[PATCH] Implement a visitor (12.75 KB, patch)
2012-02-21 05:36 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
[PATCH] Fixed patch (12.77 KB, patch)
2012-02-21 07:07 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (12.29 KB, patch)
2012-02-21 09:30 PST, Alexander Pavlov (apavlov)
pfeldman: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2012-02-18 17:52:11 PST
I think it would be useful to have an audit rule that suggests unprefixing CSS properties if
the standard, unprefixed version, is now supported. I could see:

    .rounded { 
        -webkit-border-radius: 5px;
    }

producing a warning like: (wording could use some work)

  CSS: <a>foo.css:85</a> "-webkit-border-radius" is used, but "border-radius" is supported.

I would expect this to be smart enough to check the entire scope. Since having the prefix'd versions
might still exist in order to support legacy browsers. For example I would not expect a warning for:

  .rounded-with-legacy-support {
      -vender-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
  }
Comment 1 Alexander Pavlov (apavlov) 2012-02-20 08:58:06 PST
Created attachment 127823 [details]
Patch
Comment 2 Alexander Pavlov (apavlov) 2012-02-20 09:04:51 PST
Created attachment 127824 [details]
[PATCH] A better test that covers both prefixed and unprefixed versions present in the same rule
Comment 3 Alexander Pavlov (apavlov) 2012-02-21 03:16:52 PST
Created attachment 127949 [details]
Patch
Comment 4 Pavel Feldman 2012-02-21 03:42:01 PST
Comment on attachment 127949 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=127949&action=review

> Source/WebCore/inspector/front-end/AuditRules.js:988
> +WebInspector.AuditRules.VendorPrefixedCSSProperties.prototype = {

Although this implementation looks Ok, I think it would make sense to generalize it. I.e. create a base CSS rule that would traverse through all the CSSRules / CSSProperties and collect violations. That way it would be easier to add new CSS rules.
Comment 5 Alexander Pavlov (apavlov) 2012-02-21 05:36:43 PST
Created attachment 127956 [details]
[PATCH] Implement a visitor
Comment 6 Peter Beverloo 2012-02-21 05:46:04 PST
Comment on attachment 127956 [details]
[PATCH] Implement a visitor

View in context: https://bugs.webkit.org/attachment.cgi?id=127956&action=review

> Source/WebCore/inspector/front-end/AuditRules.js:1077
> +    this._webkitPrefix = "-webkit-";

WebKit aliases "-apple-" and "-khtml-" to "-webkit-" as well, i.e. "-apple-box-sizing" would effectively yield the same effect. Should we warn about these cases as well? Maybe this could be used to discourage usage of -apple- and -khtml- prefixed properties altogether, given that they got removed in -the reverted- r63854.
Comment 7 WebKit Review Bot 2012-02-21 06:20:06 PST
Comment on attachment 127956 [details]
[PATCH] Implement a visitor

Attachment 127956 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/11556129

New failing tests:
inspector/audits/audits-panel-functional.html
inspector/audits/audits-panel-noimages-functional.html
Comment 8 Alexander Pavlov (apavlov) 2012-02-21 07:07:15 PST
Created attachment 127966 [details]
[PATCH] Fixed patch
Comment 9 Pavel Feldman 2012-02-21 08:53:36 PST
Comment on attachment 127966 [details]
[PATCH] Fixed patch

View in context: https://bugs.webkit.org/attachment.cgi?id=127966&action=review

> Source/WebCore/inspector/front-end/AuditRules.js:1109
> +    visitProperty: function(property, result)

You should pass styleSheet and rule here instead of making ancestors cache data.
Comment 10 Alexander Pavlov (apavlov) 2012-02-21 09:30:52 PST
Created attachment 127985 [details]
Patch
Comment 11 Alexander Pavlov (apavlov) 2012-02-22 02:42:35 PST
Committed r108473: <http://trac.webkit.org/changeset/108473>