Bug 896181 - Autocomplete CSS properties and values in markup view, r=mratcliffe

browser/devtools/markupview/markup-view.js

@@ -20,6 +20,10 @@ let promise = require("sdk/core/promise");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource://gre/modules/devtools/Templater.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+XPCOMUtils.defineLazyGetter(this, "AutocompletePopup", function() {
+  return Cu.import("resource:///modules/devtools/AutocompletePopup.jsm", {}).AutocompletePopup;
+});
 
 /**
  * Vocabulary for the purposes of this file:
@@ -53,6 +57,14 @@ function MarkupView(aInspector, aFrame, aControllerWindow)
     this.maxChildren = DEFAULT_MAX_CHILDREN;
   }
 
+  // Creating the popup to be used to show CSS suggestions.
+  let options = {
+    fixedWidth: true,
+    autoSelect: true,
+    theme: "auto"
+  };
+  this.popup = new AutocompletePopup(this.doc.defaultView.parent.document, options);
+
   this.undo = new UndoStack();
   this.undo.installController(aControllerWindow);
 
@@ -676,6 +688,9 @@ MarkupView.prototype = {
     this.undo.destroy();
     delete this.undo;
 
+    this.popup.destroy();
+    delete this.popup;
+
     this._frame.removeEventListener("focus", this._boundFocus, false);
     delete this._boundFocus;
 
@@ -1130,6 +1145,8 @@ function ElementEditor(aContainer, aNode)
     element: this.newAttr,
     trigger: "dblclick",
     stopOnReturn: true,
+    contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
+    popup: this.markup.popup,
     done: (aVal, aCommit) => {
       if (!aCommit) {
         return;
@@ -1222,6 +1239,8 @@ ElementEditor.prototype = {
         trigger: "dblclick",
         stopOnReturn: true,
         selectAll: false,
+        contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
+        popup: this.markup.popup,
         start: (aEditor, aEvent) => {
           // If the editing was started inside the name or value areas,
           // select accordingly.