Bug 1289425 - Allow sourceeditor to fallback to client-side css properties; r=tromey

MozReview-Commit-ID: Khak8Av1v67

--HG--
extra : rebase_source : 6d117087a34320fd7bbb7ea540b218ac78018566

devtools/client/shared/inplace-editor.js

@@ -23,7 +23,6 @@
 
 "use strict";
 
-const {Ci} = require("chrome");
 const Services = require("Services");
 const focusManager = Services.focus;
 const {KeyCodes} = require("devtools/client/shared/keycodes");

devtools/client/sourceeditor/css-autocompleter.js

@@ -6,6 +6,7 @@
 
 /* eslint-disable complexity */
 const {cssTokenizer, cssTokenizerWithLineColumn} = require("devtools/shared/css-parsing-utils");
+const {getClientCssProperties} = require("devtools/shared/fronts/css-properties");
 
 /**
  * Here is what this file (+ css-parsing-utils.js) do.
@@ -86,7 +87,8 @@ const SELECTOR_STATES = {
 function CSSCompleter(options = {}) {
   this.walker = options.walker;
   this.maxEntries = options.maxEntries || 15;
-  this.cssProperties = options.cssProperties;
+  // If no css properties database is passed in, default to the client list.
+  this.cssProperties = options.cssProperties || getClientCssProperties();
 
   this.propertyNames = this.cssProperties.getNames().sort();
 

devtools/client/sourceeditor/editor.js

@@ -33,6 +33,7 @@ const Services = require("Services");
 const promise = require("promise");
 const events = require("devtools/shared/event-emitter");
 const { PrefObserver } = require("devtools/client/styleeditor/utils");
+const { getClientCssProperties } = require("devtools/shared/fronts/css-properties");
 
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const L10N = new LocalizationHelper("devtools/locale/sourceeditor.properties");
@@ -234,9 +235,12 @@ function Editor(config) {
     this.config.externalScripts = [];
   }
 
-  // Ensure that autocompletion has cssProperties if it's passed in via the options.
   if (this.config.cssProperties) {
+    // Ensure that autocompletion has cssProperties if it's passed in via the options.
     this.config.autocompleteOpts.cssProperties = this.config.cssProperties;
+  } else {
+    // Use a static client-side database of CSS values if none is provided.
+    this.config.cssProperties = getClientCssProperties();
   }
 
   events.decorate(this);
@@ -287,35 +291,29 @@ Editor.prototype = {
           Services.scriptloader.loadSubScript(url, win, "utf8");
         }
       });
-      if (this.config.cssProperties) {
-        // Replace the propertyKeywords, colorKeywords and valueKeywords
-        // properties of the CSS MIME type with the values provided by the CSS properties
-        // database.
+      // Replace the propertyKeywords, colorKeywords and valueKeywords
+      // properties of the CSS MIME type with the values provided by the CSS properties
+      // database.
 
-        const {
-          propertyKeywords,
-          colorKeywords,
-          valueKeywords
-        } = getCSSKeywords(this.config.cssProperties);
+      const {
+        propertyKeywords,
+        colorKeywords,
+        valueKeywords
+      } = getCSSKeywords(this.config.cssProperties);
 
-        let cssSpec = win.CodeMirror.resolveMode("text/css");
-        cssSpec.propertyKeywords = propertyKeywords;
-        cssSpec.colorKeywords = colorKeywords;
-        cssSpec.valueKeywords = valueKeywords;
-        win.CodeMirror.defineMIME("text/css", cssSpec);
+      let cssSpec = win.CodeMirror.resolveMode("text/css");
+      cssSpec.propertyKeywords = propertyKeywords;
+      cssSpec.colorKeywords = colorKeywords;
+      cssSpec.valueKeywords = valueKeywords;
+      win.CodeMirror.defineMIME("text/css", cssSpec);
 
-        let scssSpec = win.CodeMirror.resolveMode("text/x-scss");
-        scssSpec.propertyKeywords = propertyKeywords;
-        scssSpec.colorKeywords = colorKeywords;
-        scssSpec.valueKeywords = valueKeywords;
-        win.CodeMirror.defineMIME("text/x-scss", scssSpec);
+      let scssSpec = win.CodeMirror.resolveMode("text/x-scss");
+      scssSpec.propertyKeywords = propertyKeywords;
+      scssSpec.colorKeywords = colorKeywords;
+      scssSpec.valueKeywords = valueKeywords;
+      win.CodeMirror.defineMIME("text/x-scss", scssSpec);
 
-        win.CodeMirror.commands.save = () => this.emit("saveRequested");
-      } else if (this.config.mode === Editor.modes.css) {
-        console.warn("The CSS properties are defaulting to the those provided by " +
-                     "CodeMirror as no CSS database was provided for CSS values " +
-                     "specific to the target platform.");
-      }
+      win.CodeMirror.commands.save = () => this.emit("saveRequested");
 
       // Create a CodeMirror instance add support for context menus,
       // overwrite the default controller (otherwise items in the top and
@@ -530,12 +528,6 @@ Editor.prototype = {
    * See Editor.modes for the list of all supported modes.
    */
   setMode: function (value) {
-    if (value === Editor.modes.css && !this.config.cssProperties) {
-      console.warn("Switching to CSS mode in the editor, but no CSS properties " +
-                   "database was provided to CodeMirror. CodeMirror will default" +
-                   "to its built-in values, and not use the values specific to the " +
-                   "target platform.");
-    }
     this.setOption("mode", value);
 
     // If autocomplete was set up and the mode is changing, then

devtools/client/sourceeditor/test/browser_css_autocompletion.js

@@ -96,7 +96,7 @@ function runTests() {
     inspector = InspectorFront(target.client, target.form);
     inspector.getWalker().then(walker => {
       completer = new CSSCompleter({walker: walker,
-                                    cssProperties: getClientCssPropertiesForTests()});
+                                    cssProperties: getClientCssProperties()});
       checkStateAndMoveOn();
     });
   });

devtools/client/sourceeditor/test/browser_css_getInfo.js

@@ -132,7 +132,7 @@ function test() {
 }
 
 function runTests() {
-  let completer = new CSSCompleter({cssProperties: getClientCssPropertiesForTests()});
+  let completer = new CSSCompleter({cssProperties: getClientCssProperties()});
   let matches = (arr, toCheck) => !arr.some((x, i) => x != toCheck[i]);
   let checkState = (expected, actual) => {
     if (expected[0] == "null" && actual == null) {

devtools/client/sourceeditor/test/browser_css_statemachine.js

@@ -65,7 +65,7 @@ function test() {
 }
 
 function runTests() {
-  let completer = new CSSCompleter({cssProperties: getClientCssPropertiesForTests()});
+  let completer = new CSSCompleter({cssProperties: getClientCssProperties()});
   let checkState = state => {
     if (state[0] == "null" && (!completer.state || completer.state == "null")) {
       return true;

devtools/client/sourceeditor/test/browser_editor_autocomplete_events.js

@@ -25,7 +25,7 @@ function* runTests() {
   let {ed, win, edWin} = yield setup(null, {
     autocomplete: true,
     mode: Editor.modes.css,
-    autocompleteOpts: {walker: walker, cssProperties: getClientCssPropertiesForTests()}
+    autocompleteOpts: {walker: walker, cssProperties: getClientCssProperties()}
   });
   yield testMouse(ed, edWin);
   yield testKeyboard(ed, edWin);

devtools/client/sourceeditor/test/head.js

@@ -9,7 +9,7 @@ const { NetUtil } = require("resource://gre/modules/NetUtil.jsm");
 const Editor = require("devtools/client/sourceeditor/editor");
 const promise = require("promise");
 const flags = require("devtools/shared/flags");
-const {getClientCssPropertiesForTests} = require("devtools/shared/fronts/css-properties");
+const {getClientCssProperties} = require("devtools/shared/fronts/css-properties");
 
 flags.testing = true;
 SimpleTest.registerCleanupFunction(() => {
@@ -63,7 +63,7 @@ function setup(cb, additionalOpts = {}) {
     lineNumbers: true,
     foldGutter: true,
     gutters: ["CodeMirror-linenumbers", "breakpoints", "CodeMirror-foldgutter"],
-    cssProperties: getClientCssPropertiesForTests()
+    cssProperties: getClientCssProperties()
   };
 
   for (let o in additionalOpts) {

devtools/client/styleeditor/test/browser_styleeditor_autocomplete.js

@@ -8,7 +8,7 @@
 const TESTCASE_URI = TEST_BASE_HTTP + "autocomplete.html";
 const MAX_SUGGESTIONS = 15;
 
-const {getClientCssPropertiesForTests} = require("devtools/shared/fronts/css-properties");
+const {getClientCssProperties} = require("devtools/shared/fronts/css-properties");
 const {CSSProperties, CSSValues} = getCSSKeywords();
 
 // Test cases to test that autocompletion works correctly when enabled.
@@ -196,7 +196,7 @@ function checkState(index, sourceEditor, popup) {
  *                     CSS values the property can have.
  */
 function getCSSKeywords() {
-  let cssProperties = getClientCssPropertiesForTests();
+  let cssProperties = getClientCssProperties();
   let props = {};
   let propNames = cssProperties.getNames();
   propNames.forEach(prop => {

devtools/shared/fronts/css-properties.js

@@ -178,10 +178,12 @@ function getCssProperties(toolbox) {
 }
 
 /**
- * Get a client-side CssProperties. This is useful for dependencies in tests.
+ * Get a client-side CssProperties. This is useful for dependencies in tests, or parts
+ * of the codebase that don't particularly need to match every known CSS property on
+ * the target.
  * @return {CssProperties}
  */
-function getClientCssPropertiesForTests() {
+function getClientCssProperties() {
   return new CssProperties(normalizeCssData(CSS_PROPERTIES_DB));
 }
 
@@ -262,6 +264,6 @@ module.exports = {
   CssPropertiesFront,
   CssProperties,
   getCssProperties,
-  getClientCssPropertiesForTests,
+  getClientCssProperties,
   initCssProperties
 };