Bug 1077376 - Don't prettify original sources in the style editor. r=pbrosset, a=lmandel
authorHeather Arthur <fayearthur@gmail.com>
Fri, 03 Oct 2014 04:35:00 +0200
changeset 218322 8722b029f2a3340fb6c9ee6fd1f224bbbf3ddb12
parent 218321 1552485ad0db009e7fa90bce6679a8fd1a4b4d4a
child 218323 797651324cc0f9fed229a4d841587d6bae3c3d56
push id7086
push userryanvm@gmail.com
push dateSat, 11 Oct 2014 00:04:07 +0000
treeherdermozilla-aurora@9bedbe95e531 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset, lmandel
bugs1077376
milestone34.0a2
Bug 1077376 - Don't prettify original sources in the style editor. r=pbrosset, a=lmandel
browser/devtools/styleeditor/StyleSheetEditor.jsm
browser/devtools/styleeditor/test/browser.ini
browser/devtools/styleeditor/test/browser_styleeditor_sourcemap_watching.js
browser/devtools/styleeditor/test/browser_styleeditor_sourcemaps.js
browser/devtools/styleeditor/test/sourcemap-css/test-stylus.css
browser/devtools/styleeditor/test/sourcemap-styl/test-stylus.styl
browser/devtools/styleeditor/test/sourcemaps-watching.html
browser/devtools/styleeditor/test/sourcemaps.html
--- a/browser/devtools/styleeditor/StyleSheetEditor.jsm
+++ b/browser/devtools/styleeditor/StyleSheetEditor.jsm
@@ -236,17 +236,20 @@ StyleSheetEditor.prototype = {
 
   /**
    * Start fetching the full text source for this editor's sheet.
    */
   fetchSource: function(callback) {
     return this.styleSheet.getText().then((longStr) => {
       longStr.string().then((source) => {
         let ruleCount = this.styleSheet.ruleCount;
-        this._state.text = CssLogic.prettifyCSS(source, ruleCount);
+        if (!this.styleSheet.isOriginalSource) {
+          source = CssLogic.prettifyCSS(source, ruleCount);
+        }
+        this._state.text = source;
         this.sourceLoaded = true;
 
         if (callback) {
           callback(source);
         }
         return source;
       });
     }, e => {
--- a/browser/devtools/styleeditor/test/browser.ini
+++ b/browser/devtools/styleeditor/test/browser.ini
@@ -27,19 +27,22 @@ support-files =
   simple.css.gz^headers^
   simple.gz.html
   simple.html
   sourcemap-css/contained.css
   sourcemap-css/sourcemaps.css
   sourcemap-css/sourcemaps.css.map
   sourcemap-css/media-rules.css
   sourcemap-css/media-rules.css.map
+  sourcemap-css/test-stylus.css
   sourcemap-sass/sourcemaps.scss
   sourcemap-sass/media-rules.scss
+  sourcemap-styl/test-stylus.styl
   sourcemaps.html
+  sourcemaps-watching.html
   test_private.css
   test_private.html
   doc_uncached.css
   doc_uncached.html
 
 [browser_styleeditor_autocomplete.js]
 [browser_styleeditor_bug_740541_iframes.js]
 skip-if = os == "linux" || "mac" # bug 949355
--- a/browser/devtools/styleeditor/test/browser_styleeditor_sourcemap_watching.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_sourcemap_watching.js
@@ -1,19 +1,18 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 Components.utils.import("resource://gre/modules/Task.jsm");
 let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 let {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
 
-const TESTCASE_URI_HTML = TEST_BASE + "sourcemaps.html";
+const TESTCASE_URI_HTML = TEST_BASE + "sourcemaps-watching.html";
 const TESTCASE_URI_CSS = TEST_BASE + "sourcemap-css/sourcemaps.css";
-const TESTCASE_URI_CSS2 = TEST_BASE + "sourcemap-css/contained.css";
 const TESTCASE_URI_REG_CSS = TEST_BASE + "simple.css";
 const TESTCASE_URI_SCSS = TEST_BASE + "sourcemap-sass/sourcemaps.scss";
 const TESTCASE_URI_MAP = TEST_BASE + "sourcemap-css/sourcemaps.css.map";
 const TESTCASE_SCSS_NAME = "sourcemaps.scss";
 
 const SOURCE_MAP_PREF = "devtools.styleeditor.source-maps-enabled";
 const TRANSITIONS_PREF = "devtools.styleeditor.transitions";
 
@@ -34,17 +33,16 @@ function test()
 
   Services.prefs.setBoolPref(SOURCE_MAP_PREF, true);
   Services.prefs.setBoolPref(TRANSITIONS_PREF, false);
 
   Task.spawn(function() {
     // copy all our files over so we don't screw them up for other tests
     let HTMLFile = yield copy(TESTCASE_URI_HTML, ["sourcemaps.html"]);
     let CSSFile = yield copy(TESTCASE_URI_CSS, ["sourcemap-css", "sourcemaps.css"]);
-    let CSSFile2 = yield copy(TESTCASE_URI_CSS2, ["sourcemap-css", "contained.css"]);
     yield copy(TESTCASE_URI_SCSS, ["sourcemap-sass", "sourcemaps.scss"]);
     yield copy(TESTCASE_URI_MAP, ["sourcemap-css", "sourcemaps.css.map"]);
     yield copy(TESTCASE_URI_REG_CSS, ["simple.css"]);
 
     let uri = Services.io.newFileURI(HTMLFile);
     let testcaseURI = uri.resolve("");
 
     let editor = yield openEditor(testcaseURI);
@@ -71,17 +69,17 @@ function test()
 
     info("wrote to CSS file");
   })
 }
 
 function openEditor(testcaseURI) {
   let deferred = promise.defer();
 
-  addTabAndOpenStyleEditors(5, panel => {
+  addTabAndOpenStyleEditors(3, panel => {
     let UI = panel.UI;
 
     // wait for 5 editors - 1 for first style sheet, 2 for the
     // generated style sheets, and 2 for original source after it
     // loads and replaces the generated style sheets.
     let editor = UI.editors[1];
     if (getStylesheetNameFor(editor) != TESTCASE_SCSS_NAME) {
       editor = UI.editors[2];
--- a/browser/devtools/styleeditor/test/browser_styleeditor_sourcemaps.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_sourcemaps.js
@@ -36,47 +36,68 @@ const contents = {
     "",
     "/*# sourceMappingURL=sourcemaps.css.map */"
   ].join("\n"),
   "contained.css": [
     "#header {",
     "  color: #f06; }",
     "",
     "/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiAjZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/"
+  ].join("\n"),
+  "test-stylus.styl": [
+   "paulrougetpink = #f06;",
+   "",
+   "div",
+   "  color: paulrougetpink",
+   "",
+  "span",
+  "  background-color: #EEE",
+  ""
+  ].join("\n"),
+  "test-stylus.css": [
+    "div {",
+    "  color: #f06;",
+    "}",
+    "span {",
+    "  background-color: #eee;",
+    "}",
+    "/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3Qtc3R5bHVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxPQUFPLEtBQVA7O0FBRUY7RUFDRSxrQkFBa0IsS0FBbEIiLCJmaWxlIjoidGVzdC1zdHlsdXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicGF1bHJvdWdldHBpbmsgPSAjZjA2O1xuXG5kaXZcbiAgY29sb3I6IHBhdWxyb3VnZXRwaW5rXG5cbnNwYW5cbiAgYmFja2dyb3VuZC1jb2xvcjogI0VFRVxuIl19 */"
   ].join("\n")
 }
 
-const cssNames = ["sourcemaps.css", "contained.css"];
-const scssNames = ["sourcemaps.scss", "contained.scss"];
+const cssNames = ["sourcemaps.css", "contained.css", "test-stylus.css"];
+const origNames = ["sourcemaps.scss", "contained.scss", "test-stylus.styl"];
 
 waitForExplicitFinish();
 
 let test = asyncTest(function*() {
   Services.prefs.setBoolPref(PREF, true);
 
-  let {UI} = yield addTabAndOpenStyleEditors(5, null, TESTCASE_URI);
+  let {UI} = yield addTabAndOpenStyleEditors(7, null, TESTCASE_URI);
 
-  is(UI.editors.length, 3,
+  is(UI.editors.length, 4,
     "correct number of editors with source maps enabled");
 
   // Test first plain css editor
   testFirstEditor(UI.editors[0]);
 
   // Test Scss editors
-  yield testEditor(UI.editors[1], scssNames);
-  yield testEditor(UI.editors[2], scssNames);
+  yield testEditor(UI.editors[1], origNames);
+  yield testEditor(UI.editors[2], origNames);
+  yield testEditor(UI.editors[3], origNames);
 
   // Test disabling original sources
   yield togglePref(UI);
 
-  is(UI.editors.length, 3, "correct number of editors after pref toggled");
+  is(UI.editors.length, 4, "correct number of editors after pref toggled");
 
   // Test CSS editors
   yield testEditor(UI.editors[1], cssNames);
   yield testEditor(UI.editors[2], cssNames);
+  yield testEditor(UI.editors[3], cssNames);
 
   Services.prefs.clearUserPref(PREF);
 });
 
 function testFirstEditor(editor) {
   let name = getStylesheetNameFor(editor);
   is(name, "simple.css", "First style sheet display name is correct");
 }
@@ -84,16 +105,17 @@ function testFirstEditor(editor) {
 function testEditor(editor, possibleNames) {
   let name = getStylesheetNameFor(editor);
   ok(possibleNames.indexOf(name) >= 0, name + " editor name is correct");
 
   return openEditor(editor).then(() => {
     let expectedText = contents[name];
 
     let text = editor.sourceEditor.getText();
+
     is(text, expectedText, name + " editor contains expected text");
   });
 }
 
 /* Helpers */
 
 function togglePref(UI) {
   let deferred = promise.defer();
new file mode 100644
--- /dev/null
+++ b/browser/devtools/styleeditor/test/sourcemap-css/test-stylus.css
@@ -0,0 +1,7 @@
+div {
+  color: #f06;
+}
+span {
+  background-color: #eee;
+}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3Qtc3R5bHVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxPQUFPLEtBQVA7O0FBRUY7RUFDRSxrQkFBa0IsS0FBbEIiLCJmaWxlIjoidGVzdC1zdHlsdXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicGF1bHJvdWdldHBpbmsgPSAjZjA2O1xuXG5kaXZcbiAgY29sb3I6IHBhdWxyb3VnZXRwaW5rXG5cbnNwYW5cbiAgYmFja2dyb3VuZC1jb2xvcjogI0VFRVxuIl19 */
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/devtools/styleeditor/test/sourcemap-styl/test-stylus.styl
@@ -0,0 +1,7 @@
+paulrougetpink = #f06;
+
+div
+  color: paulrougetpink
+
+span
+  background-color: #EEE
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/devtools/styleeditor/test/sourcemaps-watching.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="sourcemap-css/sourcemaps.css?test=1"/>
+</head>
+<body>
+  <div>source maps <span>testcase</span></div>
+</body>
+</html>
--- a/browser/devtools/styleeditor/test/sourcemaps.html
+++ b/browser/devtools/styleeditor/test/sourcemaps.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html>
 <head>
   <title>testcase for testing CSS source maps</title>
   <link rel="stylesheet" type="text/css" href="simple.css"/>
   <link rel="stylesheet" type="text/css" href="sourcemap-css/sourcemaps.css?test=1"/>
-  <link rel="stylesheet" type="text/css" href="sourcemap-css/contained.css"
+  <link rel="stylesheet" type="text/css" href="sourcemap-css/contained.css"/>
+  <link rel="stylesheet" type="text/css" href="sourcemap-css/test-stylus.css"/>
 </head>
 <body>
-	<div>source maps <span>testcase</span></div>
+  <div>source maps <span>testcase</span></div>
 </body>
 </html>