Bug 1191093 - Add panelId for markup-view autocomplete popup, r=bgrins
authorJulian Descottes <julian.descottes@gmail.com>
Wed, 05 Aug 2015 23:36:05 +0200
changeset 256421 a8dbc50c600d4b66ee2930d871d2d9e59b0407e0
parent 256420 1c2dfa848d83c5b9521a9fcd3493718dd11ba187
child 256422 475ca0b8da1723f9e033e026622f3f45faf9cbb4
push id14458
push usergabriel.luong@gmail.com
push dateThu, 06 Aug 2015 00:34:12 +0000
treeherderfx-team@a8dbc50c600d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1191093
milestone42.0a1
Bug 1191093 - Add panelId for markup-view autocomplete popup, r=bgrins When creating the AutocompletePopup for the markup view, use a custom panelId. This forces the AutocompletePopup to use separate XUL elements. Otherwise, the markupview popup and the ruleview popup were sharing the same XUL elements. When the markup-view was destroyed (ie on each page navigation), the autocomplete popup in the rule view was no longer working. - added panelId option in markup-view.js - modified autocompletion tests in styleinspector/test to verify the autocomplete popup is still working after page navigation
browser/devtools/markupview/markup-view.js
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
browser/devtools/styleinspector/test/head.js
--- a/browser/devtools/markupview/markup-view.js
+++ b/browser/devtools/markupview/markup-view.js
@@ -13,16 +13,17 @@ const DEFAULT_MAX_CHILDREN = 100;
 const COLLAPSE_ATTRIBUTE_LENGTH = 120;
 const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
 const COLLAPSE_DATA_URL_LENGTH = 60;
 const NEW_SELECTION_HIGHLIGHTER_TIMER = 1000;
 const GRAB_DELAY = 400;
 const DRAG_DROP_AUTOSCROLL_EDGE_DISTANCE = 50;
 const DRAG_DROP_MIN_AUTOSCROLL_SPEED = 5;
 const DRAG_DROP_MAX_AUTOSCROLL_SPEED = 15;
+const AUTOCOMPLETE_POPUP_PANEL_ID = "markupview_autoCompletePopup";
 
 const {UndoStack} = require("devtools/shared/undo");
 const {editableField, InplaceEditor} = require("devtools/shared/inplace-editor");
 const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 const {HTMLEditor} = require("devtools/markupview/html-editor");
 const promise = require("resource://gre/modules/Promise.jsm").Promise;
 const {Tooltip} = require("devtools/shared/widgets/Tooltip");
 const EventEmitter = require("devtools/toolkit/event-emitter");
@@ -80,17 +81,20 @@ function MarkupView(aInspector, aFrame, 
     this.maxChildren = Services.prefs.getIntPref("devtools.markup.pagesize");
   } catch(ex) {
     this.maxChildren = DEFAULT_MAX_CHILDREN;
   }
 
   // Creating the popup to be used to show CSS suggestions.
   let options = {
     autoSelect: true,
-    theme: "auto"
+    theme: "auto",
+    // panelId option prevents the markupView autocomplete popup from
+    // sharing XUL elements with other views, such as ruleView (see Bug 1191093)
+    panelId: AUTOCOMPLETE_POPUP_PANEL_ID
   };
   this.popup = new AutocompletePopup(this.doc.defaultView.parent.document, options);
 
   this.undo = new UndoStack();
   this.undo.installController(aControllerWindow);
 
   this._containers = new Map();
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
@@ -56,28 +56,37 @@ let testData = [
 
 let TEST_URL = "data:text/html;charset=utf-8,<h1 style='font: 24px serif'>Filename" +
                ": browser_bug893965_css_property_completion_existing_property.js</h1>";
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
+  info("Test autocompletion after 1st page load");
+  yield runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  yield reloadPage(inspector);
+  yield runAutocompletionTest(toolbox, inspector, view);
+});
+
+function* runAutocompletionTest(toolbox, inspector, view) {
   info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   info("Focusing the css property editable field");
   let propertyName = view.styleDocument.querySelectorAll(".ruleview-propertyname")[0];
   let editor = yield focusEditableField(view, propertyName);
 
   info("Starting to test for css property completion");
-  for (let i = 0; i < testData.length; i ++) {
+  for (let i = 0; i < testData.length; i++) {
     yield testCompletion(testData[i], editor, view);
   }
-});
+}
 
 function* testCompletion([key, completion, index, total], editor, view) {
   info("Pressing key " + key);
   info("Expecting " + completion + ", " + index + ", " + total);
 
   let onSuggest;
 
   if (/(left|right|back_space|escape|home|end|page_up|page_down)/ig.test(key)) {
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
@@ -38,31 +38,40 @@ let testData = [
 
 let TEST_URL = "data:text/html;charset=utf-8,<h1 style='color: red'>Filename: " +
                "browser_bug894376_css_value_completion_existing_property_value_pair.js</h1>";
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
+  info("Test autocompletion after 1st page load");
+  yield runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  yield reloadPage(inspector);
+  yield runAutocompletionTest(toolbox, inspector, view);
+});
+
+function* runAutocompletionTest(toolbox, inspector, view) {
   info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   info("Focusing the css property editable value");
   let value = view.styleDocument.querySelectorAll(".ruleview-propertyvalue")[0];
   let editor = yield focusEditableField(view, value);
 
   info("Starting to test for css property completion");
-  for (let i = 0; i < testData.length; i ++) {
+  for (let i = 0; i < testData.length; i++) {
     // Re-define the editor at each iteration, because the focus may have moved
     // from property to value and back
     editor = inplaceEditor(view.styleDocument.activeElement);
     yield testCompletion(testData[i], editor, view);
   }
-});
+}
 
 function* testCompletion([key, modifiers, completion, index, total], editor, view) {
   info("Pressing key " + key);
   info("Expecting " + completion + ", " + index + ", " + total);
 
   let onKeyPress;
 
   if (/tab/ig.test(key)) {
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
@@ -39,28 +39,37 @@ let testData = [
 
 let TEST_URL = "data:text/html;charset=utf-8,<h1 style='border: 1px solid red'>Filename:" +
                "browser_bug893965_css_property_completion_new_property.js</h1>";
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
+  info("Test autocompletion after 1st page load");
+  yield runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  yield reloadPage(inspector);
+  yield runAutocompletionTest(toolbox, inspector, view);
+});
+
+function* runAutocompletionTest(toolbox, inspector, view) {
   info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   info("Focusing the css property editable field");
   let brace = view.styleDocument.querySelector(".ruleview-ruleclose");
   let editor = yield focusEditableField(view, brace);
 
   info("Starting to test for css property completion");
-  for (let i = 0; i < testData.length; i ++) {
+  for (let i = 0; i < testData.length; i++) {
     yield testCompletion(testData[i], editor, view);
   }
-});
+}
 
 function* testCompletion([key, completion, index, total], editor, view) {
   info("Pressing key " + key);
   info("Expecting " + completion + ", " + index + ", " + total);
 
   let onSuggest;
 
   if (/(right|back_space|escape)/ig.test(key)) {
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
@@ -41,31 +41,40 @@ let testData = [
 
 let TEST_URL = "data:text/html;charset=utf-8,<style>h1{border: 1px solid red}</style>" +
   "<h1>Test element</h1>";
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
+  info("Test autocompletion after 1st page load");
+  yield runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  yield reloadPage(inspector);
+  yield runAutocompletionTest(toolbox, inspector, view);
+});
+
+function* runAutocompletionTest(toolbox, inspector, view) {
   info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   info("Focusing a new css property editable property");
   let brace = view.styleDocument.querySelectorAll(".ruleview-ruleclose")[1];
   let editor = yield focusEditableField(view, brace);
 
   info("Starting to test for css property completion");
   for (let i = 0; i < testData.length; i ++) {
     // Re-define the editor at each iteration, because the focus may have moved
     // from property to value and back
     editor = inplaceEditor(view.styleDocument.activeElement);
     yield testCompletion(testData[i], editor, view);
   }
-});
+}
 
 function* testCompletion([key, modifiers, completion, index, total], editor, view) {
   info("Pressing key " + key);
   info("Expecting " + completion + ", " + index + ", " + total);
 
   let onKeyPress;
 
   if (/tab/ig.test(key)) {
--- a/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
@@ -77,14 +77,8 @@ function* getContainerStyleAttrValue(id,
 
 function* assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) {
   let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue");
   is(valueSpan.textContent, value, "Rule-view style width is " + value + " as expected");
 
   let attr = yield getContainerStyleAttrValue(id, inspector);
   is(attr.textContent.replace(/\s/g, ""), "width:" + value + ";", "Markup-view style attribute width is " + value);
 }
-
-function reloadPage(inspector) {
-  let onNewRoot = inspector.once("new-root");
-  content.location.reload();
-  return onNewRoot.then(inspector.markup._waitForChildren);
-}
--- a/browser/devtools/styleinspector/test/head.js
+++ b/browser/devtools/styleinspector/test/head.js
@@ -994,8 +994,21 @@ function waitForStyleEditor(toolbox, hre
     if (!gotEditor("styleeditor-selected", panel.UI.selectedEditor)) {
       // The expected editor is not selected (yet). Wait for it.
       panel.UI.on("editor-selected", gotEditor);
     }
   });
 
   return def.promise;
 }
+
+/**
+ * Reload the current page and wait for the inspector to be initialized after
+ * the navigation
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves after page reload and inspector initialization
+ */
+function reloadPage(inspector) {
+  let onNewRoot = inspector.once("new-root");
+  content.location.reload();
+  return onNewRoot.then(inspector.markup._waitForChildren);
+}