Changeset 56347 in webkit

Timestamp:

Mar 22, 2010 11:18:09 AM (14 years ago)

Author:

apavlov@chromium.org

Message:

2010-03-22 Alexander Pavlov <​apavlov@chromium.org>

Reviewed by Pavel Feldman.

Web Inspector: AuditRules still use getMatchedCSSRules as a part of the img-related audit.
​https://bugs.webkit.org/show_bug.cgi?id=36424

• inspector/front-end/AuditRules.js: (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun): (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun.receivedImages): (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun.pushImageNodes):
• inspector/front-end/InjectedScript.js: (injectedScriptConstructor):

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/AuditRules.js (modified) (1 diff)
• inspector/front-end/InjectedScript.js (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-03-22  Alexander Pavlov  <apavlov@chromium.org>
+
+        Reviewed by Pavel Feldman.
+
+        Web Inspector: AuditRules still use getMatchedCSSRules as a part of the img-related audit.
+        https://bugs.webkit.org/show_bug.cgi?id=36424
+
+        * inspector/front-end/AuditRules.js:
+        (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun):
+        (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun.receivedImages):
+        (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun.pushImageNodes):
+        * inspector/front-end/InjectedScript.js:
+        (injectedScriptConstructor):
+
 2010-03-22  Darin Adler  <darin@apple.com>
 

trunk/WebCore/inspector/front-end/AuditRules.js

@@ -624 +624 @@
     doRun: function(resources, result, callback)
     {
-        function evalCallback(evalResult, isException)
-        {
-            if (isException || !evalResult || !evalResult.totalImages)
-                return callback(null);
-
-            var entry = result.addChild("A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:", true);
-            var map = evalResult.map;
+        function doneCallback(context)
+        {
+            var map = context.urlToNoDimensionCount;
             for (var url in map) {
+                var entry = entry || result.addChild("A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:", true);
                 var value = WebInspector.linkifyURL(url);
                 if (map[url] > 1)
-                    value += " (" + map[url] + " uses)";
+                    value += String.sprintf(" (%d uses)", map[url]);
                 entry.addChild(value);
                 result.violationCount++;
             }
-            callback(result);
-        }
-
-        function routine()
-        {
-            var images = document.getElementsByTagName("img");
-            const widthRegExp = /width[^:;]*:/gim;
-            const heightRegExp = /height[^:;]*:/gim;
-
-            function hasDimension(element, cssText, rules, regexp, attributeName) {
-                if (element.attributes.getNamedItem(attributeName) != null || (cssText && cssText.match(regexp)))
-                    return true;
-
-                if (!rules)
-                    return false;
-                for (var i = 0; i < rules.length; ++i) {
-                    if (rules.item(i).style.cssText.match(regexp))
-                        return true;
+            callback(entry ? result : null);
+        }
+
+        function imageStylesReady(imageId, context, styles)
+        {
+            --context.imagesLeft;
+
+            const node = WebInspector.domAgent.nodeForId(imageId);
+            var src = node.getAttribute("src");
+            for (var frameOwnerCandidate = node; frameOwnerCandidate; frameOwnerCandidate = frameOwnerCandidate.parentNode) {
+                if (frameOwnerCandidate.documentURL) {
+                    var completeSrc = WebInspector.completeURL(frameOwnerCandidate.documentURL, src);
+                    break;
                 }
-                return false;
-            }
-
-            function hasWidth(element, cssText, rules) {
-                return hasDimension(element, cssText, rules, widthRegExp, "width");
-            }
-
-            function hasHeight(element, cssText, rules) {
-                return hasDimension(element, cssText, rules, heightRegExp, "height");
-            }
-
-            var urlToNoDimensionCount = {};
-            var found = false;
-            for (var i = 0; i < images.length; ++i) {
-                var image = images[i];
-                if (!image.src)
+            }
+            if (completeSrc)
+                src = completeSrc;
+
+            const computedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
+            if (computedStyle.getPropertyValue("position") === "absolute") {
+                if (!context.imagesLeft)
+                    doneCallback(context);
+                return;
+            }
+
+            var widthFound = "width" in styles.styleAttributes;
+            var heightFound = "height" in styles.styleAttributes;
+
+            for (var i = styles.matchedCSSRules.length - 1; i >= 0 && !(widthFound && heightFound); --i) {
+                var style = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]).style;
+                if (style.getPropertyValue("width") !== "")
+                    widthFound = true;
+                if (style.getPropertyValue("height") !== "")
+                    heightFound = true;
+            }
+            
+            if (!widthFound || !heightFound) {
+                if (src in context.urlToNoDimensionCount)
+                    ++context.urlToNoDimensionCount[src];
+                else
+                    context.urlToNoDimensionCount[src] = 1;
+            }
+
+            if (!context.imagesLeft)
+                doneCallback(context);
+        }
+
+        function receivedImages(imageIds)
+        {
+            if (!imageIds || !imageIds.length)
+                return callback(null);
+            var context = {imagesLeft: imageIds.length, urlToNoDimensionCount: {}};
+            for (var i = imageIds.length - 1; i >= 0; --i)
+                InspectorBackend.getStyles(WebInspector.Callback.wrap(imageStylesReady.bind(this, imageIds[i], context)), imageIds[i], true);
+        }
+
+        function pushImageNodes()
+        {
+            const nodeIds = [];
+            var nodes = document.getElementsByTagName("img");
+            for (var i = 0; i < nodes.length; ++i) {
+                if (!nodes[i].src)
                     continue;
-                var position = document.defaultView.getComputedStyle(image).getPropertyValue("position");
-                if (position === "absolute")
-                    continue;
-                var cssText = (image.style && image.style.cssText) ? image.style.cssText : "";
-                var rules = document.defaultView.getMatchedCSSRules(image, "", true);
-                if (!hasWidth(image, cssText, rules) || !hasHeight(image, cssText, rules)) {
-                    found = true;
-                    if (urlToNoDimensionCount.hasOwnProperty(image.src))
-                        ++urlToNoDimensionCount[image.src];
-                    else
-                        urlToNoDimensionCount[image.src] = 1;
-                }
-            }
-            return found ? {totalImages: images.length, map: urlToNoDimensionCount} : null;
-        }
-
-        WebInspector.AuditRules.evaluateInTargetWindow(routine, null, evalCallback.bind(this));
+                var nodeId = this.getNodeId(nodes[i]);
+                nodeIds.push(nodeId);
+            }
+            return nodeIds;
+        }
+
+        WebInspector.AuditRules.evaluateInTargetWindow(pushImageNodes, null, receivedImages);
     }
 }

trunk/WebCore/inspector/front-end/InjectedScript.js

@@ -304 +304 @@
         inspectedNodes.pop();
     return true;
+}
+
+InjectedScript.getNodeId = function(node)
+{
+    return InjectedScriptHost.pushNodePathToFrontend(node, false, false);
 }