Bug 934695 - Autocomplete "!important" and multiple css values. r=scrapmachines, r=paul

browser/devtools/markupview/test/browser_bug896181_css_mixed_completion_new_attribute.js

@@ -1,15 +1,13 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
-
 // Test CSS state is correctly determined and the corresponding suggestions are
 // displayed. i.e. CSS property suggestions are shown when cursor is like:
-// ```style="di|"``` where | is teh cursor; And CSS value suggestion is
+// ```style="di|"``` where | is the cursor; And CSS value suggestion is
 // displayed when the cursor is like: ```style="display:n|"``` properly. No
 // suggestions should ever appear when the attribute is not a style attribute.
 // The correctness and cycling of the suggestions is covered in the ruleview
 // tests.
-
 function test() {
   let inspector;
   let {
@@ -68,9 +66,12 @@ function test() {
     [':', 'style="display:  inherit; color : ', 33, 33, false],
     ['c', 'style="display:  inherit; color :cadetblue ', 34, 42, true],
     ['VK_DOWN', 'style="display:  inherit; color :chartreuse ', 34, 43, true],
-    ['VK_RETURN', 'style="display:  inherit; color :chartreuse"', -1, -1, false]
+    ['VK_RIGHT', 'style="display:  inherit; color :chartreuse ', 43, 43, false],
+    [' ', 'style="display:  inherit; color :chartreuse  ', 44, 44, false],
+    ['!', 'style="display:  inherit; color :chartreuse !important; ', 45, 55, false],
+    ['VK_RIGHT', 'style="display:  inherit; color :chartreuse !important; ', 55, 55, false],
+    ['VK_RETURN', 'style="display:  inherit; color :chartreuse !important;"', -1, -1, false]
   ];
-
   function startTests() {
     markup = inspector.markup;
     markup.expandAll().then(() => {
@@ -102,7 +103,7 @@ function test() {
         }
         info("inside event listener");
         checkState();
-      }) 
+      })
     }
     else if (/click_[0-9]/.test(key)) {
       editor.once("after-suggest", checkState);

browser/devtools/shared/inplace-editor.js

@@ -1016,22 +1016,36 @@ InplaceEditor.prototype = {
       if (!query) {
         return;
       }
-
       let list = [];
       if (this.contentType == CONTENT_TYPES.CSS_PROPERTY) {
         list = CSSPropertyList;
       } else if (this.contentType == CONTENT_TYPES.CSS_VALUE) {
-        list = domUtils.getCSSValuesForProperty(this.property.name);
+        // Get the last query to be completed before the caret.
+        let match = /([^\s,.\/]+$)/.exec(query);
+        if (match) {
+          startCheckQuery = match[0];
+        } else {
+          startCheckQuery = "";
+        }
+
+        list =
+          ["!important", ...domUtils.getCSSValuesForProperty(this.property.name)];
       } else if (this.contentType == CONTENT_TYPES.CSS_MIXED &&
                  /^\s*style\s*=/.test(query)) {
         // Detecting if cursor is at property or value;
-        let match = query.match(/([:;"'=]?)\s*([^"';:= ]+)$/);
+        let match = query.match(/([:;"'=]?)\s*([^"';:=]+)$/);
         if (match && match.length == 3) {
           if (match[1] == ":") { // We are in CSS value completion
             let propertyName =
-              query.match(/[;"'=]\s*([^"';:= ]+)\s*:\s*[^"';:= ]+$/)[1];
-            list = domUtils.getCSSValuesForProperty(propertyName);
-            startCheckQuery = match[2];
+              query.match(/[;"'=]\s*([^"';:= ]+)\s*:\s*[^"';:=]+$/)[1];
+            list =
+              ["!important;", ...domUtils.getCSSValuesForProperty(propertyName)];
+            let matchLastQuery = /([^\s,.\/]+$)/.exec(match[2]);
+            if (matchLastQuery) {
+              startCheckQuery = matchLastQuery[0];
+            } else {
+              startCheckQuery = "";
+            }
           } else if (match[1]) { // We are in CSS property name completion
             list = CSSPropertyList;
             startCheckQuery = match[2];
@@ -1043,9 +1057,8 @@ InplaceEditor.prototype = {
           }
         }
       }
-
       list.some(item => {
-        if (item.startsWith(startCheckQuery)) {
+        if (startCheckQuery && item.startsWith(startCheckQuery)) {
           input.value = query + item.slice(startCheckQuery.length) +
                         input.value.slice(query.length);
           input.setSelectionRange(query.length, query.length + item.length -
@@ -1063,7 +1076,7 @@ InplaceEditor.prototype = {
       let finalList = [];
       let length = list.length;
       for (let i = 0, count = 0; i < length && count < MAX_POPUP_ENTRIES; i++) {
-        if (list[i].startsWith(startCheckQuery)) {
+        if (startCheckQuery && list[i].startsWith(startCheckQuery)) {
           count++;
           finalList.push({
             preLabel: startCheckQuery,

browser/devtools/styleinspector/test/browser_bug894376_css_value_completion_existing_property_value_pair.js

@@ -26,6 +26,11 @@ let testData = [
   ["VK_DOWN", {}, "blanchedalmond", 1, 4],
   ["VK_DOWN", {}, "blue", 2, 4],
   ["VK_RIGHT", {}, "blue", -1, 0],
+  [" ", {}, "blue ", -1, 0],
+  ["!", {}, "blue !important", 0, 0],
+  ["VK_BACK_SPACE", {}, "blue !", -1, 0],
+  ["VK_BACK_SPACE", {}, "blue ", -1, 0],
+  ["VK_BACK_SPACE", {}, "blue", -1, 0],
   ["VK_TAB", {shiftKey: true}, "color", -1, 0],
   ["VK_BACK_SPACE", {}, "", -1, 0],
   ["d", {}, "direction", 0, 3],

browser/devtools/styleinspector/test/browser_bug894376_css_value_completion_new_property_value_pair.js

@@ -35,9 +35,11 @@ let testData = [
   ["VK_DOWN", {}, "rgba", 2, 5],
   ["VK_DOWN", {}, "rosybrown", 3, 5],
   ["VK_DOWN", {}, "royalblue", 4, 5],
+  ["VK_RIGHT", {}, "royalblue", -1, 0],
+  [" ", {}, "royalblue ", -1, 0],
+  ["!", {}, "royalblue !important", 0, 0],
   ["VK_ESCAPE", {}, null, -1, 0]
 ];
-
 function openRuleView() {
   var target = TargetFactory.forTab(gBrowser.selectedTab);
   gDevTools.showToolbox(target, "inspector").then(function(toolbox) {
@@ -83,8 +85,8 @@ function checkStateAndMoveOn(index) {
       checkState();
     });
   }
-  else if (/(back_space|escape)/ig.test(key)) {
-    info("added event listener for escape|back_space keys");
+  else if (/(right|back_space|escape|return)/ig.test(key)) {
+    info("added event listener for right|escape|back_space|return keys");
     editor.input.addEventListener("keypress", function onKeypress() {
       if (editor.input) {
         editor.input.removeEventListener("keypress", onKeypress);