Bug 900430 - Tab complete and cycle through the completion suggestions in the markup view, r=mratcliffe

browser/devtools/markupview/test/browser_bug896181_css_mixed_completion_new_attribute.js

@@ -43,7 +43,10 @@ function test() {
     ['"', 'style="', 7, 7, false],
     ['d', 'style="direction', 8, 16, true],
     ['VK_DOWN', 'style="display', 8, 14, true],
-    ['VK_RIGHT', 'style="display', 14, 14, false],
+    ['VK_TAB', 'style="display', 14, 14, true],
+    ['VK_TAB', 'style="dominant-baseline', 24, 24, true],
+    ['VK_TAB', 'style="direction', 16, 16, true],
+    ['VK_TAB', 'style="display', 14, 14, true],
     [':', 'style="display:', 15, 15, false],
     ['n', 'style="display:none', 16, 19, false],
     ['VK_BACK_SPACE', 'style="display:n', 16, 16, false],

browser/devtools/shared/inplace-editor.js

@@ -685,6 +685,49 @@ InplaceEditor.prototype = {
     };
   },
 
+  /**
+   * Cycle through the autocompletion suggestions in the popup.
+   *
+   * @param {boolean} aReverse
+   *        true to select previous item from the popup.
+   * @param {boolean} aNoSelect
+   *        true to not select the text after selecting the newly selectedItem
+   *        from the popup.
+   */
+  _cycleCSSSuggestion:
+  function InplaceEditor_cycleCSSSuggestion(aReverse, aNoSelect)
+  {
+    let {label, preLabel} = this.popup.selectedItem;
+    if (aReverse) {
+      this.popup.selectPreviousItem();
+    } else {
+      this.popup.selectNextItem();
+    }
+    let input = this.input;
+    let pre = "";
+    if (input.selectionStart < input.selectionEnd) {
+      pre = input.value.slice(0, input.selectionStart);
+    }
+    else {
+      pre = input.value.slice(0, input.selectionStart - label.length +
+                                 preLabel.length);
+    }
+    let post = input.value.slice(input.selectionEnd, input.value.length);
+    let item = this.popup.selectedItem;
+    let toComplete = item.label.slice(item.preLabel.length);
+    input.value = pre + toComplete + post;
+    if (!aNoSelect) {
+      input.setSelectionRange(pre.length, pre.length + toComplete.length);
+    }
+    else {
+      input.setSelectionRange(pre.length + toComplete.length,
+                              pre.length + toComplete.length);
+    }
+    this._updateSize();
+    // This emit is mainly for the purpose of making the test flow simpler.
+    this.emit("after-suggest");
+  },
+
   /**
    * Call the client's done handler and clear out.
    */
@@ -754,22 +797,7 @@ InplaceEditor.prototype = {
     } else if (increment && this.popup && this.popup.isOpen) {
       cycling = true;
       prevent = true;
-      if (increment > 0) {
-        this.popup.selectPreviousItem();
-      } else {
-        this.popup.selectNextItem();
-      }
-      let input = this.input;
-      let pre = input.value.slice(0, input.selectionStart);
-      let post = input.value.slice(input.selectionEnd, input.value.length);
-      let item = this.popup.selectedItem;
-      let toComplete = item.label.slice(item.preLabel.length);
-      input.value = pre + toComplete + post;
-      input.setSelectionRange(pre.length, pre.length + toComplete.length);
-      this._updateSize();
-
-      // This emit is mainly for the purpose of making the test flow simpler.
-      this.emit("after-suggest");
+      this._cycleCSSSuggestion(increment > 0);
       this._doValidation();
     }
 
@@ -807,6 +835,21 @@ InplaceEditor.prototype = {
 
       let input = this.input;
 
+      if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_TAB &&
+          this.contentType == CONTENT_TYPES.CSS_MIXED) {
+        if (this.popup && input.selectionStart < input.selectionEnd) {
+          aEvent.preventDefault();
+          input.setSelectionRange(input.selectionEnd, input.selectionEnd);
+          this.emit("after-suggest");
+          return;
+        }
+        else if (this.popup && this.popup.isOpen) {
+          aEvent.preventDefault();
+          this._cycleCSSSuggestion(aEvent.shiftKey, true);
+          return;
+        }
+      }
+
       this._apply();
 
       // Close the popup if open