The Tor Browser / file revision

 /* 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";

 const {Cc, Ci, Cu} = require("chrome");

 const {colorUtils} = require("devtools/css-color");

 const {Services} = Cu.import("resource://gre/modules/Services.jsm", {});

 const HTML_NS = "http://www.w3.org/1999/xhtml";

 const MAX_ITERATIONS = 100;

 const REGEX_QUOTES = /^".*?"|^".*|^'.*?'|^'.*/;

 const REGEX_WHITESPACE = /^\s+/;

 const REGEX_FIRST_WORD_OR_CHAR = /^\w+|^./;

 const REGEX_CSS_PROPERTY_VALUE = /(^[^;]+)/;

 /**

  * This regex matches:

  *  - #F00

  *  - #FF0000

  *  - hsl()

  *  - hsla()

  *  - rgb()

  *  - rgba()

  *  - color names

  */

 const REGEX_ALL_COLORS = /^#[0-9a-fA-F]{3}\b|^#[0-9a-fA-F]{6}\b|^hsl\(.*?\)|^hsla\(.*?\)|^rgba?\(.*?\)|^[a-zA-Z-]+/;

 loader.lazyGetter(this, "DOMUtils", function () {

   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);

 });

 /**

  * This regular expression catches all css property names with their trailing

  * spaces and semicolon. This is used to ensure a value is valid for a property

  * name within style="" attributes.

  */

 loader.lazyGetter(this, "REGEX_ALL_CSS_PROPERTIES", function () {

   let names = DOMUtils.getCSSPropertyNames();

     let pattern = "^(";

     for (let i = 0; i < names.length; i++) {

       if (i > 0) {

         pattern += "|";

       }

       pattern += names[i];

     }

     pattern += ")\\s*:\\s*";

     return new RegExp(pattern);

 });

 /**

  * This module is used to process text for output by developer tools. This means

  * linking JS files with the debugger, CSS files with the style editor, JS

  * functions with the debugger, placing color swatches next to colors and

  * adding doorhanger previews where possible (images, angles, lengths,

  * border radius, cubic-bezier etc.).

  *

  * Usage:

  *   const {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});

  *   const {OutputParser} = devtools.require("devtools/output-parser");

  *

  *   let parser = new OutputParser();

  *

  *   parser.parseCssProperty("color", "red"); // Returns document fragment.

  *   parser.parseHTMLAttribute("color:red; font-size: 12px;"); // Returns document

  *                                                             // fragment.

  */

 function OutputParser() {

   this.parsed = [];

 }

 exports.OutputParser = OutputParser;

 OutputParser.prototype = {

   /**

    * Parse a CSS property value given a property name.

    *

    * @param  {String} name

    *         CSS Property Name

    * @param  {String} value

    *         CSS Property value

    * @param  {Object} [options]

    *         Options object. For valid options and default values see

    *         _mergeOptions().

    * @return {DocumentFragment}

    *         A document fragment containing color swatches etc.

    */

   parseCssProperty: function(name, value, options={}) {

     options = this._mergeOptions(options);

     if (this._cssPropertySupportsValue(name, value)) {

       return this._parse(value, options);

     }

     this._appendTextNode(value);

     return this._toDOM();

   },

   /**

    * Parse a string.

    *

    * @param  {String} value

    *         Text to parse.

    * @param  {Object} [options]

    *         Options object. For valid options and default values see

    *         _mergeOptions().

    * @return {DocumentFragment}

    *         A document fragment. Colors will not be parsed.

    */

   parseHTMLAttribute: function(value, options={}) {

     options.isHTMLAttribute = true;

     options = this._mergeOptions(options);

     return this._parse(value, options);

   },

   /**

    * Matches the beginning of the provided string to a css background-image url

    * and return both the whole url(...) match and the url itself.

    * This isn't handled via a regular expression to make sure we can match urls

    * that contain parenthesis easily

    */

   _matchBackgroundUrl: function(text) {

     let startToken = "url(";

     if (text.indexOf(startToken) !== 0) {

       return null;

     }

     let uri = text.substring(startToken.length).trim();

     let quote = uri.substring(0, 1);

     if (quote === "'" || quote === '"') {

       uri = uri.substring(1, uri.search(new RegExp(quote + "\\s*\\)")));

     } else {

       uri = uri.substring(0, uri.indexOf(")"));

       quote = "";

     }

     let end = startToken + quote + uri;

     text = text.substring(0, text.indexOf(")", end.length) + 1);

     return [text, uri.trim()];

   },

   /**

    * Parse a string.

    *

    * @param  {String} text

    *         Text to parse.

    * @param  {Object} [options]

    *         Options object. For valid options and default values see

    *         _mergeOptions().

    * @return {DocumentFragment}

    *         A document fragment.

    */

   _parse: function(text, options={}) {

     text = text.trim();

     this.parsed.length = 0;

     let i = 0;

     while (text.length > 0) {

       let matched = null;

       // Prevent this loop from slowing down the browser with too

       // many nodes being appended into output. In practice it is very unlikely

       // that this will ever happen.

       i++;

       if (i > MAX_ITERATIONS) {

         this._appendTextNode(text);

         text = "";

         break;

       }

       matched = text.match(REGEX_QUOTES);

       if (matched) {

         let match = matched[0];

         text = this._trimMatchFromStart(text, match);

         this._appendTextNode(match);

         continue;

       }

       matched = text.match(REGEX_WHITESPACE);

       if (matched) {

         let match = matched[0];

         text = this._trimMatchFromStart(text, match);

         this._appendTextNode(match);

         continue;

       }

       matched = this._matchBackgroundUrl(text);

       if (matched) {

         let [match, url] = matched;

         text = this._trimMatchFromStart(text, match);

         this._appendURL(match, url, options);

         continue;

       }

       matched = text.match(REGEX_ALL_CSS_PROPERTIES);

       if (matched) {

         let [match] = matched;

         text = this._trimMatchFromStart(text, match);

         this._appendTextNode(match);

         if (options.isHTMLAttribute) {

           [text] = this._appendColorOnMatch(text, options);

         }

         continue;

       }

       if (!options.isHTMLAttribute) {

         let dirty;

         [text, dirty] = this._appendColorOnMatch(text, options);

         if (dirty) {

           continue;

         }

       }

       // This test must always be last as it indicates use of an unknown

       // character that needs to be removed to prevent infinite loops.

       matched = text.match(REGEX_FIRST_WORD_OR_CHAR);

       if (matched) {

         let match = matched[0];

         text = this._trimMatchFromStart(text, match);

         this._appendTextNode(match);

       }

     }

     return this._toDOM();

   },

   /**

    * Convenience function to make the parser a little more readable.

    *

    * @param  {String} text

    *         Main text

    * @param  {String} match

    *         Text to remove from the beginning

    *

    * @return {String}

    *         The string passed as 'text' with 'match' stripped from the start.

    */

   _trimMatchFromStart: function(text, match) {

     return text.substr(match.length);

   },

   /**

    * Check if there is a color match and append it if it is valid.

    *

    * @param  {String} text

    *         Main text

    * @param  {Object} options

    *         Options object. For valid options and default values see

    *         _mergeOptions().

    *

    * @return {Array}

    *         An array containing the remaining text and a dirty flag. This array

    *         is designed for deconstruction using [text, dirty].

    */

   _appendColorOnMatch: function(text, options) {

     let dirty;

     let matched = text.match(REGEX_ALL_COLORS);

     if (matched) {

       let match = matched[0];

       if (this._appendColor(match, options)) {

         text = this._trimMatchFromStart(text, match);

         dirty = true;

       }

     } else {

       dirty = false;

     }

     return [text, dirty];

   },

   /**

    * Check if a CSS property supports a specific value.

    *

    * @param  {String} name

    *         CSS Property name to check

    * @param  {String} value

    *         CSS Property value to check

    */

   _cssPropertySupportsValue: function(name, value) {

     let win = Services.appShell.hiddenDOMWindow;

     let doc = win.document;

     name = name.replace(/-\w{1}/g, function(match) {

       return match.charAt(1).toUpperCase();

     });

     value = value.replace("!important", "");

     let div = doc.createElement("div");

     div.style[name] = value;

     return !!div.style[name];

   },

   /**

    * Tests if a given colorObject output by CssColor is valid for parsing.

    * Valid means it's really a color, not any of the CssColor SPECIAL_VALUES

    * except transparent

    */

   _isValidColor: function(colorObj) {

     return colorObj.valid &&

       (!colorObj.specialValue || colorObj.specialValue === "transparent");

   },

   /**

    * Append a color to the output.

    *

    * @param  {String} color

    *         Color to append

    * @param  {Object} [options]

    *         Options object. For valid options and default values see

    *         _mergeOptions().

    * @returns {Boolean}

    *          true if the color passed in was valid, false otherwise. Special

    *          values such as transparent also return false.

    */

   _appendColor: function(color, options={}) {

     let colorObj = new colorUtils.CssColor(color);

     if (this._isValidColor(colorObj)) {

       if (options.colorSwatchClass) {

         this._appendNode("span", {

           class: options.colorSwatchClass,

           style: "background-color:" + color

         });

       }

       if (options.defaultColorType) {

         color = colorObj.toString();

       }

       this._appendNode("span", {

         class: options.colorClass

       }, color);

       return true;

     }

     return false;

   },

    /**

     * Append a URL to the output.

     *

     * @param  {String} match

     *         Complete match that may include "url(xxx)"

     * @param  {String} url

     *         Actual URL

     * @param  {Object} [options]

     *         Options object. For valid options and default values see

     *         _mergeOptions().

     */

   _appendURL: function(match, url, options={}) {

     if (options.urlClass) {

       // We use single quotes as this works inside html attributes (e.g. the

       // markup view).

       this._appendTextNode("url('");

       let href = url;

       if (options.baseURI) {

         href = options.baseURI.resolve(url);

       }

       this._appendNode("a",  {

         target: "_blank",

         class: options.urlClass,

         href: href

       }, url);

       this._appendTextNode("')");

     } else {

       this._appendTextNode("url('" + url + "')");

     }

   },

   /**

    * Append a node to the output.

    *

    * @param  {String} tagName

    *         Tag type e.g. "div"

    * @param  {Object} attributes

    *         e.g. {class: "someClass", style: "cursor:pointer"};

    * @param  {String} [value]

    *         If a value is included it will be appended as a text node inside

    *         the tag. This is useful e.g. for span tags.

    */

   _appendNode: function(tagName, attributes, value="") {

     let win = Services.appShell.hiddenDOMWindow;

     let doc = win.document;

     let node = doc.createElementNS(HTML_NS, tagName);

     let attrs = Object.getOwnPropertyNames(attributes);

     for (let attr of attrs) {

       if (attributes[attr]) {

         node.setAttribute(attr, attributes[attr]);

       }

     }

     if (value) {

       let textNode = doc.createTextNode(value);

       node.appendChild(textNode);

     }

     this.parsed.push(node);

   },

   /**

    * Append a text node to the output. If the previously output item was a text

    * node then we append the text to that node.

    *

    * @param  {String} text

    *         Text to append

    */

   _appendTextNode: function(text) {

     let lastItem = this.parsed[this.parsed.length - 1];

     if (typeof lastItem === "string") {

       this.parsed[this.parsed.length - 1] = lastItem + text;

     } else {

       this.parsed.push(text);

     }

   },

   /**

    * Take all output and append it into a single DocumentFragment.

    *

    * @return {DocumentFragment}

    *         Document Fragment

    */

   _toDOM: function() {

     let win = Services.appShell.hiddenDOMWindow;

     let doc = win.document;

     let frag = doc.createDocumentFragment();

     for (let item of this.parsed) {

       if (typeof item === "string") {

         frag.appendChild(doc.createTextNode(item));

       } else {

         frag.appendChild(item);

       }

     }

     this.parsed.length = 0;

     return frag;

   },

   /**

    * Merges options objects. Default values are set here.

    *

    * @param  {Object} overrides

    *         The option values to override e.g. _mergeOptions({colors: false})

    *

    *         Valid options are:

    *           - defaultColorType: true // Convert colors to the default type

    *                                    // selected in the options panel.

    *           - colorSwatchClass: ""   // The class to use for color swatches.

    *           - colorClass: ""         // The class to use for the color value

    *                                    // that follows the swatch.

    *           - isHTMLAttribute: false // This property indicates whether we

    *                                    // are parsing an HTML attribute value.

    *                                    // When the value is passed in from an

    *                                    // HTML attribute we need to check that

    *                                    // any CSS property values are supported

    *                                    // by the property name before

    *                                    // processing the property value.

    *           - urlClass: ""           // The class to be used for url() links.

    *           - baseURI: ""            // A string or nsIURI used to resolve

    *                                    // relative links.

    * @return {Object}

    *         Overridden options object

    */

   _mergeOptions: function(overrides) {

     let defaults = {

       defaultColorType: true,

       colorSwatchClass: "",

       colorClass: "",

       isHTMLAttribute: false,

       urlClass: "",

       baseURI: ""

     };

     if (typeof overrides.baseURI === "string") {

       overrides.baseURI = Services.io.newURI(overrides.baseURI, null, null);

     }

     for (let item in overrides) {

       defaults[item] = overrides[item];

     }

     return defaults;

   }

 };