Bug 78985 – Web Inspector: Audit rules to recommend unprefixing supported CSS properties

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Joseph Pecoraro]

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;
  }

[Alexander Pavlov (apavlov)]

Created attachment 127823 [details]
Patch

[Alexander Pavlov (apavlov)]

Created attachment 127824 [details]
[PATCH] A better test that covers both prefixed and unprefixed versions present in the same rule

[Alexander Pavlov (apavlov)]

Created attachment 127949 [details]
Patch

[Pavel Feldman]

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.

[Alexander Pavlov (apavlov)]

Created attachment 127956 [details]
[PATCH] Implement a visitor

[Peter Beverloo]

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.

[WebKit Review Bot]

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

[Alexander Pavlov (apavlov)]

Created attachment 127966 [details]
[PATCH] Fixed patch

[Pavel Feldman]

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.

[Alexander Pavlov (apavlov)]

Created attachment 127985 [details]
Patch

[Alexander Pavlov (apavlov)]

Committed r108473: <http://trac.webkit.org/changeset/108473>