summaryrefslogtreecommitdiffstats
path: root/layout/style/CSSUnprefixingService.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/style/CSSUnprefixingService.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/CSSUnprefixingService.js')
-rw-r--r--layout/style/CSSUnprefixingService.js342
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]);