Merge pull request adobe#1376 from adobe/nj/issue-1373

In Live Development, strip off query/hash strings from stylesheet URLs when comparing them
ryanstewart · Aug 16, 2012 · f8d113a · f8d113a
2 parents 00e1574 + 721e37e
commit f8d113a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 55 deletions.
diff --git a/src/LiveDevelopment/Agents/CSSAgent.js b/src/LiveDevelopment/Agents/CSSAgent.js
@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
-/*global define, $ */
+/*global define, $, PathUtils */
 
 /**
  * CSSAgent keeps track of loaded style sheets and allows reloading them
@@ -33,10 +33,21 @@
 define(function CSSAgent(require, exports, module) {
     "use strict";
 
+    require("thirdparty/path-utils/path-utils.min");
+
     var Inspector = require("LiveDevelopment/Inspector/Inspector");
 
     var _load; // {$.Deferred} load promise
     var _urlToStyle; // {url -> loaded} style definition
+
+    /** 
+     * Create a canonicalized version of the given URL, stripping off query strings and hashes.
+     * @param {string} url the URL to canonicalize
+     * @return the canonicalized URL
+     */
+    function _canonicalize(url) {
+        return PathUtils.parseUrl(url).hrefNoSearch;
+    }
 
     // WebInspector Event: Page.loadEventFired
     function _onLoadEventFired(res) {
@@ -46,7 +57,7 @@ define(function CSSAgent(require, exports, module) {
             var i, header;
             for (i in res.headers) {
                 header = res.headers[i];
-                _urlToStyle[header.sourceURL] = header;
+                _urlToStyle[_canonicalize(header.sourceURL)] = header;
             }
             _load.resolve();
         });
@@ -56,7 +67,7 @@ define(function CSSAgent(require, exports, module) {
      * @param {string} url
      */
     function styleForURL(url) {
-        return _urlToStyle[url];
+        return _urlToStyle[_canonicalize(url)];
     }
 
     /** Get a list of all loaded stylesheet files by URL */

diff --git a/src/LiveDevelopment/Agents/ScriptAgent.js b/src/LiveDevelopment/Agents/ScriptAgent.js
@@ -49,13 +49,15 @@ define(function ScriptAgent(require, exports, module) {
         node.trace = trace;
     }
 
+    // TODO: should the parameter to this be an ID rather than a URL?
     /** Get the script information for a given url
      * @param {string} url
      */
     function scriptWithId(url) {
         return _idToScript[url];
     }
 
+    // TODO: Strip off query/hash strings from URL (see CSSAgent._canonicalize())
     /** Get the script information for a given url
      * @param {string} url
      */
@@ -79,6 +81,7 @@ define(function ScriptAgent(require, exports, module) {
         }
     }
 
+    // TODO: Strip off query/hash strings from URL (see CSSAgent._canonicalize())
     // WebInspector Event: Debugger.scriptParsed
     function _onScriptParsed(res) {
         // res = {scriptId, url, startLine, startColumn, endLine, endColumn, isContentScript, sourceMapURL}

diff --git a/test/spec/LiveDevelopment-test-files/simple1Query.html b/test/spec/LiveDevelopment-test-files/simple1Query.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Simple Test</title>
+<link rel="stylesheet" href="simpleShared.css">
+<link rel="stylesheet" href="simple1.css?1384938572406">
+</head>
+
+<body>
+<p id="testId" class="testClass">Brackets is awesome!</p>
+</body>
+</html>
diff --git a/test/spec/LiveDevelopment-test.js b/test/spec/LiveDevelopment-test.js
@@ -45,6 +45,61 @@ define(function (require, exports, module) {
     function isOpenInBrowser(doc, agents) {
         return (doc && doc.url && agents && agents.network && agents.network.wasURLRequested(doc.url));
     }
+
+    function doOneTest(htmlFile, cssFile) {
+        var localText,
+            browserText;
+
+        //verify we aren't currently connected
+        expect(Inspector.connected()).toBeFalsy();
+
+        runs(function () {
+            waitsForDone(SpecRunnerUtils.openProjectFiles([htmlFile]), "SpecRunnerUtils.openProjectFiles");
+        });
+
+        //start the connection
+        runs(function () {
+            LiveDevelopment.open();
+        });
+        waitsFor(function () { return Inspector.connected(); }, "Waiting for browser", 10000);
+
+        // Wait for the file and its stylesheets to fully load (and be communicated back).
+        waits(1000);
+
+        runs(function () {
+            waitsForDone(SpecRunnerUtils.openProjectFiles([cssFile]), "SpecRunnerUtils.openProjectFiles");
+        });
+
+        runs(function () {
+            var curDoc =  DocumentManager.getCurrentDocument();
+            localText = curDoc.getText();
+            localText += "\n .testClass { color:#090; }\n";
+            curDoc.setText(localText);
+        });
+
+        var liveDoc;
+        waitsFor(function () {
+            liveDoc = LiveDevelopment.getLiveDocForPath(testPath + "/" + cssFile);
+            return !!liveDoc;
+        }, "Waiting for LiveDevelopment document", 10000);
+
+        var doneSyncing = false;
+        runs(function () {
+            liveDoc.getSourceFromBrowser().done(function (text) {
+                browserText = text;
+            }).always(function () {
+                doneSyncing = true;
+            });
+        });
+        waitsFor(function () { return doneSyncing; }, "Browser to sync changes", 10000);
+
+        runs(function () {
+            expect(fixSpaces(browserText)).toBe(fixSpaces(localText));
+
+            var doc = DocumentManager.getOpenDocumentForPath(testPath + "/" + htmlFile);
+            //expect(isOpenInBrowser(doc, LiveDevelopment.agents)).toBeTruthy();
+        });
+    }
 
     describe("Live Development", function () {
 
@@ -142,58 +197,11 @@ define(function (require, exports, module) {
             });
 
             it("should push changes through the browser connection", function () {
-                var localText,
-                    browserText;
-
-                //verify we aren't currently connected
-                expect(Inspector.connected()).toBeFalsy();
-
-                runs(function () {
-                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles");
-                });
-
-                //start the connection
-                runs(function () {
-                    LiveDevelopment.open();
-                });
-                waitsFor(function () { return Inspector.connected(); }, "Waiting for browser", 10000);
-
-                // Wait for the file and its stylesheets to fully load (and be communicated back).
-                waits(1000);
-
-                runs(function () {
-                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.css"]), "SpecRunnerUtils.openProjectFiles");
-                });
-
-                runs(function () {
-                    var curDoc =  DocumentManager.getCurrentDocument();
-                    localText = curDoc.getText();
-                    localText += "\n .testClass { color:#090; }\n";
-                    curDoc.setText(localText);
-                });
-
-                var liveDoc;
-                waitsFor(function () {
-                    liveDoc = LiveDevelopment.getLiveDocForPath(testPath + "/simple1.css");
-                    return !!liveDoc;
-                }, "Waiting for LiveDevelopment document", 10000);
-
-                var doneSyncing = false;
-                runs(function () {
-                    liveDoc.getSourceFromBrowser().done(function (text) {
-                        browserText = text;
-                    }).always(function () {
-                        doneSyncing = true;
-                    });
-                });
-                waitsFor(function () { return doneSyncing; }, "Browser to sync changes", 10000);
-
-                runs(function () {
-                    expect(fixSpaces(browserText)).toBe(fixSpaces(localText));
-
-                    var doc = DocumentManager.getOpenDocumentForPath(testPath + "/simple1.html");
-                    //expect(isOpenInBrowser(doc, LiveDevelopment.agents)).toBeTruthy();
-                });
+                doOneTest("simple1.html", "simple1.css");
+            });
+
+            it("should ignore query strings in linked CSS file hrefs", function () {
+                doOneTest("simple1Query.html", "simple1.css");
             });
 
             it("should push in memory css changes made before the session starts", function () {