Add m-esr52 at 52.6.0

1 files changed, 342 insertions, 0 deletions

diff --git a/layout/style/CSSUnprefixingService.js b/layout/style/CSSUnprefixingService.js
new file mode 100644
index 000000000..801ea198c
--- /dev/null
+++ b/layout/style/CSSUnprefixingService.js
@@ -0,0 +1,342 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=8 autoindent cindent expandtab: */
+/* 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/. */
+
+/* Implementation of a service that converts certain vendor-prefixed CSS
+   properties to their unprefixed equivalents, for sites on a whitelist. */
+
+"use strict";
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+function CSSUnprefixingService() {
+}
+
+CSSUnprefixingService.prototype = {
+  // Boilerplate:
+  classID:        Components.ID("{f0729490-e15c-4a2f-a3fb-99e1cc946b42}"),
+  _xpcom_factory: XPCOMUtils.generateSingletonFactory(CSSUnprefixingService),
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsICSSUnprefixingService]),
+
+  // See documentation in nsICSSUnprefixingService.idl
+  generateUnprefixedDeclaration: function(aPropName, aRightHalfOfDecl,
+                                          aUnprefixedDecl /*out*/) {
+
+    // Convert our input strings to lower-case, for easier string-matching.
+    // (NOTE: If we ever need to add support for unprefixing properties that
+    // have case-sensitive parts, then we should do these toLowerCase()
+    // conversions in a more targeted way, to avoid breaking those properties.)
+    aPropName = aPropName.toLowerCase();
+    aRightHalfOfDecl = aRightHalfOfDecl.toLowerCase();
+
+    // We have several groups of supported properties:
+    // FIRST GROUP: Properties that can just be handled as aliases:
+    // ============================================================
+    const propertiesThatAreJustAliases = {
+      "-webkit-background-size":   "background-size",
+      "-webkit-box-flex":          "flex-grow",
+      "-webkit-box-ordinal-group": "order",
+      "-webkit-box-sizing":        "box-sizing",
+      "-webkit-transform":         "transform",
+      "-webkit-transform-origin":  "transform-origin",
+    };
+
+    let unprefixedPropName = propertiesThatAreJustAliases[aPropName];
+    if (unprefixedPropName !== undefined) {
+      aUnprefixedDecl.value = unprefixedPropName + ":" + aRightHalfOfDecl;
+      return true;
+    }
+
+    // SECOND GROUP: Properties that take a single keyword, where the
+    // unprefixed version takes a different (but analogous) set of keywords:
+    // =====================================================================
+    const propertiesThatNeedKeywordMapping = {
+      "-webkit-box-align" : {
+        unprefixedPropName : "align-items",
+        valueMap : {
+          "start"    : "flex-start",
+          "center"   : "center",
+          "end"      : "flex-end",
+          "baseline" : "baseline",
+          "stretch"  : "stretch"
+        }
+      },
+      "-webkit-box-orient" : {
+        unprefixedPropName : "flex-direction",
+        valueMap : {
+          "horizontal"  : "row",
+          "inline-axis" : "row",
+          "vertical"    : "column",
+          "block-axis"  : "column"
+        }
+      },
+      "-webkit-box-pack" : {
+        unprefixedPropName : "justify-content",
+        valueMap : {
+          "start"    : "flex-start",
+          "center"   : "center",
+          "end"      : "flex-end",
+          "justify"  : "space-between"
+        }
+      },
+    };
+
+    let propInfo = propertiesThatNeedKeywordMapping[aPropName];
+    if (typeof(propInfo) != "undefined") {
+      // Regexp for parsing the right half of a declaration, for keyword-valued
+      // properties. Divides the right half of the declaration into:
+      //  1) any leading whitespace
+      //  2) the property value (one or more alphabetical character or hyphen)
+      //  3) anything after that (e.g. "!important", ";")
+      // Then we can look up the appropriate unprefixed-property value for the
+      // value (part 2), and splice that together with the other parts and with
+      // the unprefixed property-name to make the final declaration.
+      const keywordValuedPropertyRegexp = /^(\s*)([a-z\-]+)(.*)/;
+      let parts = keywordValuedPropertyRegexp.exec(aRightHalfOfDecl);
+      if (!parts) {
+        // Failed to parse a keyword out of aRightHalfOfDecl. (It probably has
+        // no alphabetical characters.)
+        return false;
+      }
+
+      let mappedKeyword = propInfo.valueMap[parts[2]];
+      if (mappedKeyword === undefined) {
+        // We found a keyword in aRightHalfOfDecl, but we don't have a mapping
+        // to an equivalent keyword for the unprefixed version of the property.
+        return false;
+      }
+
+      aUnprefixedDecl.value = propInfo.unprefixedPropName + ":" +
+        parts[1] + // any leading whitespace
+        mappedKeyword +
+        parts[3]; // any trailing text (e.g. !important, semicolon, etc)
+
+      return true;
+    }
+
+    // THIRD GROUP: Properties that may need arbitrary string-replacement:
+    // ===================================================================
+    const propertiesThatNeedStringReplacement = {
+      // "-webkit-transition" takes a multi-part value. If "-webkit-transform"
+      // appears as part of that value, replace it w/ "transform".
+      // And regardless, we unprefix the "-webkit-transition" property-name.
+      // (We could handle other prefixed properties in addition to 'transform'
+      // here, but in practice "-webkit-transform" is the main one that's
+      // likely to be transitioned & that we're concerned about supporting.)
+      "-webkit-transition": {
+        unprefixedPropName : "transition",
+        stringMap : {
+          "-webkit-transform" : "transform",
+        }
+      },
+    };
+
+    propInfo = propertiesThatNeedStringReplacement[aPropName];
+    if (typeof(propInfo) != "undefined") {
+      let newRightHalf = aRightHalfOfDecl;
+      for (let strToReplace in propInfo.stringMap) {
+        let replacement = propInfo.stringMap[strToReplace];
+        newRightHalf = newRightHalf.split(strToReplace).join(replacement);
+      }
+      aUnprefixedDecl.value = propInfo.unprefixedPropName + ":" + newRightHalf;
+
+      return true;
+    }
+
+    // No known mapping for property aPropName.
+    return false;
+  },
+
+  // See documentation in nsICSSUnprefixingService.idl
+  generateUnprefixedGradientValue: function(aPrefixedFuncName,
+                                            aPrefixedFuncBody,
+                                            aUnprefixedFuncName, /*[out]*/
+                                            aUnprefixedFuncBody /*[out]*/) {
+    var unprefixedFuncName, newValue;
+    if (aPrefixedFuncName == "-webkit-gradient") {
+      // Create expression for oldGradientParser:
+      var parts = this.oldGradientParser(aPrefixedFuncBody);
+      var type = parts[0].name;
+      newValue = this.standardizeOldGradientArgs(type, parts.slice(1));
+      unprefixedFuncName = type + "-gradient";
+    }else{ // we're dealing with more modern syntax - should be somewhat easier, at least for linear gradients.
+        // Fix three things: remove -webkit-, add 'to ' before reversed top/bottom keywords (linear) or 'at ' before position keywords (radial), recalculate deg-values
+        // -webkit-linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+        if (aPrefixedFuncName != "-webkit-linear-gradient" &&
+            aPrefixedFuncName != "-webkit-radial-gradient") {
+          // Unrecognized prefixed gradient type
+          return false;
+        }
+        unprefixedFuncName = aPrefixedFuncName.replace(/-webkit-/, '');
+
+        // Keywords top, bottom, left, right: can be stand-alone or combined pairwise but in any order ('top left' or 'left top')
+        // These give the starting edge or corner in the -webkit syntax. The standardised equivalent is 'to ' plus opposite values for linear gradients, 'at ' plus same values for radial gradients
+        if(unprefixedFuncName.indexOf('linear') > -1){
+            newValue = aPrefixedFuncBody.replace(/(top|bottom|left|right)+\s*(top|bottom|left|right)*/, function(str){
+                var words = str.split(/\s+/);
+                for(var i=0; i<words.length; i++){
+                    switch(words[i].toLowerCase()){
+                        case 'top':
+                            words[i] = 'bottom';
+                            break;
+                        case 'bottom':
+                            words[i] = 'top';
+                            break;
+                        case 'left':
+                            words[i] = 'right';
+                            break;
+                        case 'right':
+                            words[i] = 'left';
+                    }
+                }
+                str = words.join(' ');
+                return ( 'to ' + str);
+            });
+        }else{
+            newValue = aPrefixedFuncBody.replace(/(top|bottom|left|right)+\s/, 'at $1 ');
+        }
+
+        newValue = newValue.replace(/\d+deg/, function (val) {
+             return (360 - (parseInt(val)-90))+'deg';
+         });
+
+    }
+    aUnprefixedFuncName.value = unprefixedFuncName;
+    aUnprefixedFuncBody.value = newValue;
+    return true;
+  },
+
+  // Helpers for generateUnprefixedGradientValue():
+  // ----------------------------------------------
+  oldGradientParser : function(str){
+    /** This method takes a legacy -webkit-gradient() method call and parses it
+        to pull out the values, function names and their arguments.
+        It returns something like [{name:'-webkit-gradient',args:[{name:'linear'}, {name:'top left'} ... ]}]
+    */
+    var objs = [{}], path=[], current, word='', separator_chars = [',', '(', ')'];
+    current = objs[0], path[0] = objs;
+    //str = str.replace(/\s*\(/g, '('); // sorry, ws in front of ( would make parsing a lot harder
+    for(var i = 0; i < str.length; i++){
+        if(separator_chars.indexOf(str[i]) === -1){
+            word += str[i];
+        }else{ // now we have a "separator" - presumably we've also got a "word" or value
+            current.name = word.trim();
+            //GM_log(word+' '+path.length+' '+str[i])
+            word = '';
+            if(str[i] === '('){ // we assume the 'word' is a function, for example -webkit-gradient() or rgb(), so we create a place to record the arguments
+                if(!('args' in current)){
+                   current.args = [];
+                }
+                current.args.push({});
+                path.push(current.args);
+                current = current.args[current.args.length - 1];
+                path.push(current);
+            }else if(str[i] === ')'){ // function is ended, no more arguments - go back to appending details to the previous branch of the tree
+                current = path.pop(); // drop 'current'
+                current = path.pop(); // drop 'args' reference
+            }else{
+                path.pop(); // remove 'current' object from path, we have no arguments to add
+                var current_parent = path[path.length - 1] || objs; // last object on current path refers to array that contained the previous "current"
+                current_parent.push({}); // we need a new object to hold this "word" or value
+                current = current_parent[current_parent.length - 1]; // that object is now the 'current'
+                path.push(current);
+//GM_log(path.length)
+            }
+        }
+    }
+
+    return objs;
+  },
+
+  /* Given an array of args for "-webkit-gradient(...)" returned by
+   * oldGradientParser(), this function constructs a string representing the
+   * equivalent arguments for a standard "linear-gradient(...)" or
+   * "radial-gradient(...)" expression.
+   *
+   * @param type  Either 'linear' or 'radial'.
+   * @param args  An array of args for a "-webkit-gradient(...)" expression,
+   *              provided by oldGradientParser() (not including gradient type).
+   */
+  standardizeOldGradientArgs : function(type, args){
+    var stdArgStr = "";
+    var stops = [];
+    if(/^linear/.test(type)){
+        // linear gradient, args 1 and 2 tend to be start/end keywords
+        var points = [].concat(args[0].name.split(/\s+/), args[1].name.split(/\s+/)); // example: [left, top, right, top]
+        // Old webkit syntax "uses a two-point syntax that lets you explicitly state where a linear gradient starts and ends"
+        // if start/end keywords are percentages, let's massage the values a little more..
+        var rxPercTest = /\d+\%/;
+        if(rxPercTest.test(points[0]) || points[0] == 0){
+            var startX = parseInt(points[0]), startY = parseInt(points[1]), endX = parseInt(points[2]), endY = parseInt(points[3]);
+            stdArgStr +=  ((Math.atan2(endY- startY, endX - startX)) * (180 / Math.PI)+90) + 'deg';
+        }else{
+            if(points[1] === points[3]){ // both 'top' or 'bottom, this linear gradient goes left-right
+                stdArgStr += 'to ' + points[2];
+            }else if(points[0] === points[2]){ // both 'left' or 'right', this linear gradient goes top-bottom
+                stdArgStr += 'to ' + points[3];
+            }else if(points[1] === 'top'){ // diagonal gradient - from top left to opposite corner is 135deg
+                stdArgStr += '135deg';
+            }else{
+                stdArgStr += '45deg';
+            }
+        }
+
+    }else if(/^radial/i.test(type)){ // oooh, radial gradients..
+        stdArgStr += 'circle ' + args[3].name.replace(/(\d+)$/, '$1px') + ' at ' + args[0].name.replace(/(\d+) /, '$1px ').replace(/(\d+)$/, '$1px');
+    }
+
+    var toColor;
+    for(var j = type === 'linear' ? 2 : 4; j < args.length; j++){
+        var position, color, colorIndex;
+        if(args[j].name === 'color-stop'){
+            position = args[j].args[0].name;
+            colorIndex = 1;
+        }else if (args[j].name === 'to') {
+            position = '100%';
+            colorIndex = 0;
+        }else if (args[j].name === 'from') {
+            position = '0%';
+            colorIndex = 0;
+        };
+        if (position.indexOf('%') === -1) { // original Safari syntax had 0.5 equivalent to 50%
+            position = (parseFloat(position) * 100) +'%';
+        };
+        color = args[j].args[colorIndex].name;
+        if (args[j].args[colorIndex].args) { // the color is itself a function call, like rgb()
+            color += '(' + this.colorValue(args[j].args[colorIndex].args) + ')';
+        };
+        if (args[j].name === 'from'){
+            stops.unshift(color + ' ' + position);
+        }else if(args[j].name === 'to'){
+            toColor = color;
+        }else{
+            stops.push(color + ' ' + position);
+        }
+    }
+
+    // translating values to right syntax
+    for(var j = 0; j < stops.length; j++){
+        stdArgStr += ', ' + stops[j];
+    }
+    if(toColor){
+        stdArgStr += ', ' + toColor + ' 100%';
+    }
+    return stdArgStr;
+  },
+
+  colorValue: function(obj){
+    var ar = [];
+    for (var i = 0; i < obj.length; i++) {
+        ar.push(obj[i].name);
+    };
+    return ar.join(', ');
+  },
+};
+
+this.NSGetFactory = XPCOMUtils.generateNSGetFactory([CSSUnprefixingService]);