The Tor Browser / file revision

 /* 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: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});

 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://gre/modules/devtools/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;

     let href = removeQuery(relatedSheet.href);

     let uri = NetUtil.newURI(href);

     if (uri.scheme == "file") {

       let file = uri.QueryInterface(Ci.nsIFileURL).file;

       path = file.path;

     }

     else if (this.savedFile) {

       let origHref = removeQuery(this.styleSheet.href);

       let origUri = NetUtil.newURI(origHref);

       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) => {

         let ruleCount = this.styleSheet.ruleCount;

         this._state.text = prettifyCSS(source, ruleCount);

         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

    *

    * @return {Promise}

    *         Promise that will resolve when the style editor is loaded.

    */

   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.on("dirty-change", this._onPropertyChange);

     return 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");

     });

   },

   /**

    * 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, ruleCount)

 {

   // remove initial and terminating HTML comments and surrounding whitespace

   text = text.replace(/(?:^\s*<!--[\r\n]*)|(?:\s*-->\s*$)/g, "");

   // don't attempt to prettify if there's more than one line per rule.

   let lineCount = text.split("\n").length - 1;

   if (ruleCount !== null && lineCount >= ruleCount) {

     return text;

   }

   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 (!/\n/.test(la) || /^\s+$/.test(text.substring(i+1, text.length))) {

         // following character should be a new line, but isn't,

         // or it's whitespace at the end of the file

         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

   };

 }

 /**

  * Remove the query string from a url.

  *

  * @param  {string} href

  *         Url to remove query string from

  * @return {string}

  *         Url without query string

  */

 function removeQuery(href) {

   return href.replace(/\?.*/, "");

 }