Bug 1077376 - don't prettify original sources in the style editor. r=pbrosset
--- 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>