gecko/browser/devtools/styleeditor/StyleSheetEditor.jsm
Heather Arthur ac3c1e3b02 Bug 973741 - Linked CSS file path is wrong when server directory is same as file directory; r=pbrosset
--HG--
rename : browser/devtools/styleeditor/test/sourcemaps.css => browser/devtools/styleeditor/test/sourcemap-css/sourcemaps.css
rename : browser/devtools/styleeditor/test/sourcemaps.css.map => browser/devtools/styleeditor/test/sourcemap-css/sourcemaps.css.map
rename : browser/devtools/styleeditor/test/sourcemaps.scss => browser/devtools/styleeditor/test/sourcemap-sass/sourcemaps.scss
2014-02-18 13:47:26 -08:00

700 lines
20 KiB
JavaScript

/* vim:set ts=2 sw=2 sts=2 et: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
this.EXPORTED_SYMBOLS = ["StyleSheetEditor"];
const Cc = Components.classes;
const Ci = Components.interfaces;
const Cu = Components.utils;
const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;
const Editor = require("devtools/sourceeditor/editor");
const promise = require("sdk/core/promise");
const {CssLogic} = require("devtools/styleinspector/css-logic");
const AutoCompleter = require("devtools/sourceeditor/autocomplete");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/FileUtils.jsm");
Cu.import("resource://gre/modules/NetUtil.jsm");
Cu.import("resource://gre/modules/osfile.jsm");
Cu.import("resource:///modules/devtools/shared/event-emitter.js");
Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
const LOAD_ERROR = "error-load";
const SAVE_ERROR = "error-save";
// max update frequency in ms (avoid potential typing lag and/or flicker)
// @see StyleEditor.updateStylesheet
const UPDATE_STYLESHEET_THROTTLE_DELAY = 500;
// Pref which decides if CSS autocompletion is enabled in Style Editor or not.
const AUTOCOMPLETION_PREF = "devtools.styleeditor.autocompletion-enabled";
// How long to wait to update linked CSS file after original source was saved
// to disk. Time in ms.
const CHECK_LINKED_SHEET_DELAY=500;
// How many times to check for linked file changes
const MAX_CHECK_COUNT=10;
/**
* StyleSheetEditor controls the editor linked to a particular StyleSheet
* object.
*
* Emits events:
* 'property-change': A property on the underlying stylesheet has changed
* 'source-editor-load': The source editor for this editor has been loaded
* 'error': An error has occured
*
* @param {StyleSheet|OriginalSource} styleSheet
* Stylesheet or original source to show
* @param {DOMWindow} win
* panel window for style editor
* @param {nsIFile} file
* Optional file that the sheet was imported from
* @param {boolean} isNew
* Optional whether the sheet was created by the user
* @param {Walker} walker
* Optional walker used for selectors autocompletion
*/
function StyleSheetEditor(styleSheet, win, file, isNew, walker) {
EventEmitter.decorate(this);
this.styleSheet = styleSheet;
this._inputElement = null;
this.sourceEditor = null;
this._window = win;
this._isNew = isNew;
this.walker = walker;
this._state = { // state to use when inputElement attaches
text: "",
selection: {
start: {line: 0, ch: 0},
end: {line: 0, ch: 0}
},
topIndex: 0 // the first visible line
};
this._styleSheetFilePath = null;
if (styleSheet.href &&
Services.io.extractScheme(this.styleSheet.href) == "file") {
this._styleSheetFilePath = this.styleSheet.href;
}
this._onPropertyChange = this._onPropertyChange.bind(this);
this._onError = this._onError.bind(this);
this.checkLinkedFileForChanges = this.checkLinkedFileForChanges.bind(this);
this.markLinkedFileBroken = this.markLinkedFileBroken.bind(this);
this._focusOnSourceEditorReady = false;
let relatedSheet = this.styleSheet.relatedStyleSheet;
if (relatedSheet) {
relatedSheet.on("property-change", this._onPropertyChange);
}
this.styleSheet.on("property-change", this._onPropertyChange);
this.styleSheet.on("error", this._onError);
this.savedFile = file;
this.linkCSSFile();
}
StyleSheetEditor.prototype = {
/**
* Whether there are unsaved changes in the editor
*/
get unsaved() {
return this.sourceEditor && !this.sourceEditor.isClean();
},
/**
* Whether the editor is for a stylesheet created by the user
* through the style editor UI.
*/
get isNew() {
return this._isNew;
},
get savedFile() {
return this._savedFile;
},
set savedFile(name) {
this._savedFile = name;
this.linkCSSFile();
},
/**
* Get a user-friendly name for the style sheet.
*
* @return string
*/
get friendlyName() {
if (this.savedFile) {
return this.savedFile.leafName;
}
if (this._isNew) {
let index = this.styleSheet.styleSheetIndex + 1;
return _("newStyleSheet", index);
}
if (!this.styleSheet.href) {
let index = this.styleSheet.styleSheetIndex + 1;
return _("inlineStyleSheet", index);
}
if (!this._friendlyName) {
let sheetURI = this.styleSheet.href;
this._friendlyName = CssLogic.shortSource({ href: sheetURI });
try {
this._friendlyName = decodeURI(this._friendlyName);
} catch (ex) {
}
}
return this._friendlyName;
},
/**
* If this is an original source, get the path of the CSS file it generated.
*/
linkCSSFile: function() {
if (!this.styleSheet.isOriginalSource) {
return;
}
let relatedSheet = this.styleSheet.relatedStyleSheet;
let path;
var uri = NetUtil.newURI(relatedSheet.href);
if (uri.scheme == "file") {
var file = uri.QueryInterface(Ci.nsIFileURL).file;
path = file.path;
}
else if (this.savedFile) {
let origUri = NetUtil.newURI(this.styleSheet.href);
path = findLinkedFilePath(uri, origUri, this.savedFile);
}
else {
// we can't determine path to generated file on disk
return;
}
if (this.linkedCSSFile == path) {
return;
}
this.linkedCSSFile = path;
this.linkedCSSFileError = null;
// save last file change time so we can compare when we check for changes.
OS.File.stat(path).then((info) => {
this._fileModDate = info.lastModificationDate.getTime();
}, this.markLinkedFileBroken);
this.emit("linked-css-file");
},
/**
* Start fetching the full text source for this editor's sheet.
*/
fetchSource: function(callback) {
this.styleSheet.getText().then((longStr) => {
longStr.string().then((source) => {
this._state.text = prettifyCSS(source);
this.sourceLoaded = true;
callback(source);
});
}, e => {
this.emit("error", LOAD_ERROR, this.styleSheet.href);
})
},
/**
* Forward property-change event from stylesheet.
*
* @param {string} event
* Event type
* @param {string} property
* Property that has changed on sheet
*/
_onPropertyChange: function(property, value) {
this.emit("property-change", property, value);
},
/**
* Forward error event from stylesheet.
*
* @param {string} event
* Event type
* @param {string} errorCode
*/
_onError: function(event, errorCode) {
this.emit("error", errorCode);
},
/**
* Create source editor and load state into it.
* @param {DOMElement} inputElement
* Element to load source editor in
*/
load: function(inputElement) {
this._inputElement = inputElement;
let config = {
value: this._state.text,
lineNumbers: true,
mode: Editor.modes.css,
readOnly: false,
autoCloseBrackets: "{}()[]",
extraKeys: this._getKeyBindings(),
contextMenu: "sourceEditorContextMenu"
};
let sourceEditor = new Editor(config);
sourceEditor.appendTo(inputElement).then(() => {
if (Services.prefs.getBoolPref(AUTOCOMPLETION_PREF)) {
sourceEditor.extend(AutoCompleter);
sourceEditor.setupAutoCompletion(this.walker);
}
sourceEditor.on("save", () => {
this.saveToFile();
});
if (this.styleSheet.update) {
sourceEditor.on("change", () => {
this.updateStyleSheet();
});
}
this.sourceEditor = sourceEditor;
if (this._focusOnSourceEditorReady) {
this._focusOnSourceEditorReady = false;
sourceEditor.focus();
}
sourceEditor.setFirstVisibleLine(this._state.topIndex);
sourceEditor.setSelection(this._state.selection.start,
this._state.selection.end);
this.emit("source-editor-load");
});
sourceEditor.on("dirty-change", this._onPropertyChange);
},
/**
* Get the source editor for this editor.
*
* @return {Promise}
* Promise that will resolve with the editor.
*/
getSourceEditor: function() {
let deferred = promise.defer();
if (this.sourceEditor) {
return promise.resolve(this);
}
this.on("source-editor-load", () => {
deferred.resolve(this);
});
return deferred.promise;
},
/**
* Focus the Style Editor input.
*/
focus: function() {
if (this.sourceEditor) {
this.sourceEditor.focus();
} else {
this._focusOnSourceEditorReady = true;
}
},
/**
* Event handler for when the editor is shown.
*/
onShow: function() {
if (this.sourceEditor) {
this.sourceEditor.setFirstVisibleLine(this._state.topIndex);
}
this.focus();
},
/**
* Toggled the disabled state of the underlying stylesheet.
*/
toggleDisabled: function() {
this.styleSheet.toggleDisabled();
},
/**
* Queue a throttled task to update the live style sheet.
*
* @param boolean immediate
* Optional. If true the update is performed immediately.
*/
updateStyleSheet: function(immediate) {
if (this._updateTask) {
// cancel previous queued task not executed within throttle delay
this._window.clearTimeout(this._updateTask);
}
if (immediate) {
this._updateStyleSheet();
} else {
this._updateTask = this._window.setTimeout(this._updateStyleSheet.bind(this),
UPDATE_STYLESHEET_THROTTLE_DELAY);
}
},
/**
* Update live style sheet according to modifications.
*/
_updateStyleSheet: function() {
if (this.styleSheet.disabled) {
return; // TODO: do we want to do this?
}
this._updateTask = null; // reset only if we actually perform an update
// (stylesheet is enabled) so that 'missed' updates
// while the stylesheet is disabled can be performed
// when it is enabled back. @see enableStylesheet
if (this.sourceEditor) {
this._state.text = this.sourceEditor.getText();
}
this.styleSheet.update(this._state.text, true);
},
/**
* Save the editor contents into a file and set savedFile property.
* A file picker UI will open if file is not set and editor is not headless.
*
* @param mixed file
* Optional nsIFile or string representing the filename to save in the
* background, no UI will be displayed.
* If not specified, the original style sheet URI is used.
* To implement 'Save' instead of 'Save as', you can pass savedFile here.
* @param function(nsIFile aFile) callback
* Optional callback called when the operation has finished.
* aFile has the nsIFile object for saved file or null if the operation
* has failed or has been canceled by the user.
* @see savedFile
*/
saveToFile: function(file, callback) {
let onFile = (returnFile) => {
if (!returnFile) {
if (callback) {
callback(null);
}
return;
}
if (this.sourceEditor) {
this._state.text = this.sourceEditor.getText();
}
let ostream = FileUtils.openSafeFileOutputStream(returnFile);
let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
.createInstance(Ci.nsIScriptableUnicodeConverter);
converter.charset = "UTF-8";
let istream = converter.convertToInputStream(this._state.text);
NetUtil.asyncCopy(istream, ostream, function onStreamCopied(status) {
if (!Components.isSuccessCode(status)) {
if (callback) {
callback(null);
}
this.emit("error", SAVE_ERROR);
return;
}
FileUtils.closeSafeFileOutputStream(ostream);
this.onFileSaved(returnFile);
if (callback) {
callback(returnFile);
}
}.bind(this));
};
let defaultName;
if (this._friendlyName) {
defaultName = OS.Path.basename(this._friendlyName);
}
showFilePicker(file || this._styleSheetFilePath, true, this._window,
onFile, defaultName);
},
/**
* Called when this source has been successfully saved to disk.
*/
onFileSaved: function(returnFile) {
this._friendlyName = null;
this.savedFile = returnFile;
this.sourceEditor.setClean();
this.emit("property-change");
// TODO: replace with file watching
this._modCheckCount = 0;
this._window.clearTimeout(this._timeout);
if (this.linkedCSSFile && !this.linkedCSSFileError) {
this._timeout = this._window.setTimeout(this.checkLinkedFileForChanges,
CHECK_LINKED_SHEET_DELAY);
}
},
/**
* Check to see if our linked CSS file has changed on disk, and
* if so, update the live style sheet.
*/
checkLinkedFileForChanges: function() {
OS.File.stat(this.linkedCSSFile).then((info) => {
let lastChange = info.lastModificationDate.getTime();
if (this._fileModDate && lastChange != this._fileModDate) {
this._fileModDate = lastChange;
this._modCheckCount = 0;
this.updateLinkedStyleSheet();
return;
}
if (++this._modCheckCount > MAX_CHECK_COUNT) {
this.updateLinkedStyleSheet();
return;
}
// try again in a bit
this._timeout = this._window.setTimeout(this.checkLinkedFileForChanges,
CHECK_LINKED_SHEET_DELAY);
}, this.markLinkedFileBroken);
},
/**
* Notify that the linked CSS file (if this is an original source)
* doesn't exist on disk in the place we think it does.
*
* @param string error
* The error we got when trying to access the file.
*/
markLinkedFileBroken: function(error) {
this.linkedCSSFileError = error || true;
this.emit("linked-css-file-error");
error += " querying " + this.linkedCSSFile +
" original source location: " + this.savedFile.path
Cu.reportError(error);
},
/**
* For original sources (e.g. Sass files). Fetch contents of linked CSS
* file from disk and live update the stylesheet object with the contents.
*/
updateLinkedStyleSheet: function() {
OS.File.read(this.linkedCSSFile).then((array) => {
let decoder = new TextDecoder();
let text = decoder.decode(array);
let relatedSheet = this.styleSheet.relatedStyleSheet;
relatedSheet.update(text, true);
}, this.markLinkedFileBroken);
},
/**
* Retrieve custom key bindings objects as expected by Editor.
* Editor action names are not displayed to the user.
*
* @return {array} key binding objects for the source editor
*/
_getKeyBindings: function() {
let bindings = {};
bindings[Editor.accel(_("saveStyleSheet.commandkey"))] = () => {
this.saveToFile(this.savedFile);
};
bindings["Shift-" + Editor.accel(_("saveStyleSheet.commandkey"))] = () => {
this.saveToFile();
};
return bindings;
},
/**
* Clean up for this editor.
*/
destroy: function() {
if (this.sourceEditor) {
this.sourceEditor.destroy();
}
this.styleSheet.off("property-change", this._onPropertyChange);
this.styleSheet.off("error", this._onError);
}
}
const TAB_CHARS = "\t";
const CURRENT_OS = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
const LINE_SEPARATOR = CURRENT_OS === "WINNT" ? "\r\n" : "\n";
/**
* Prettify minified CSS text.
* This prettifies CSS code where there is no indentation in usual places while
* keeping original indentation as-is elsewhere.
*
* @param string text
* The CSS source to prettify.
* @return string
* Prettified CSS source
*/
function prettifyCSS(text)
{
// remove initial and terminating HTML comments and surrounding whitespace
text = text.replace(/(?:^\s*<!--[\r\n]*)|(?:\s*-->\s*$)/g, "");
let parts = []; // indented parts
let partStart = 0; // start offset of currently parsed part
let indent = "";
let indentLevel = 0;
for (let i = 0; i < text.length; i++) {
let c = text[i];
let shouldIndent = false;
switch (c) {
case "}":
if (i - partStart > 1) {
// there's more than just } on the line, add line
parts.push(indent + text.substring(partStart, i));
partStart = i;
}
indent = TAB_CHARS.repeat(--indentLevel);
/* fallthrough */
case ";":
case "{":
shouldIndent = true;
break;
}
if (shouldIndent) {
let la = text[i+1]; // one-character lookahead
if (!/\s/.test(la)) {
// following character should be a new line (or whitespace) but it isn't
// force indentation then
parts.push(indent + text.substring(partStart, i + 1));
if (c == "}") {
parts.push(""); // for extra line separator
}
partStart = i + 1;
} else {
return text; // assume it is not minified, early exit
}
}
if (c == "{") {
indent = TAB_CHARS.repeat(++indentLevel);
}
}
return parts.join(LINE_SEPARATOR);
}
/**
* Find a path on disk for a file given it's hosted uri, the uri of the
* original resource that generated it (e.g. Sass file), and the location of the
* local file for that source.
*
* @param {nsIURI} uri
* The uri of the resource
* @param {nsIURI} origUri
* The uri of the original source for the resource
* @param {nsIFile} file
* The local file for the resource on disk
*
* @return {string}
* The path of original file on disk
*/
function findLinkedFilePath(uri, origUri, file) {
let { origBranch, branch } = findUnsharedBranches(origUri, uri);
let project = findProjectPath(file, origBranch);
let parts = project.concat(branch);
let path = OS.Path.join.apply(this, parts);
return path;
}
/**
* Find the path of a project given a file in the project and its branch
* off the root. e.g.:
* /Users/moz/proj/src/a.css" and "src/a.css"
* would yield ["Users", "moz", "proj"]
*
* @param {nsIFile} file
* file for that resource on disk
* @param {array} branch
* path parts for branch to chop off file path.
* @return {array}
* array of path parts
*/
function findProjectPath(file, branch) {
let path = OS.Path.split(file.path).components;
for (let i = 2; i <= branch.length; i++) {
// work backwards until we find a differing directory name
if (path[path.length - i] != branch[branch.length - i]) {
return path.slice(0, path.length - i + 1);
}
}
// if we don't find a differing directory, just chop off the branch
return path.slice(0, path.length - branch.length);
}
/**
* Find the parts of a uri past the root it shares with another uri. e.g:
* "http://localhost/built/a.scss" and "http://localhost/src/a.css"
* would yield ["built", "a.scss"] and ["src", "a.css"]
*
* @param {nsIURI} origUri
* uri to find unshared branch of. Usually is uri for original source.
* @param {nsIURI} uri
* uri to compare against to get a shared root
* @return {object}
* object with 'branch' and 'origBranch' array of path parts for branch
*/
function findUnsharedBranches(origUri, uri) {
origUri = OS.Path.split(origUri.path).components;
uri = OS.Path.split(uri.path).components;
for (let i = 0; i < uri.length - 1; i++) {
if (uri[i] != origUri[i]) {
return {
branch: uri.slice(i),
origBranch: origUri.slice(i)
};
}
}
return {
branch: uri,
origBranch: origUri
};
}