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 288080 a8dbc50c600d4b66ee2930d871d2d9e59b0407e0
parent 288079 1c2dfa848d83c5b9521a9fcd3493718dd11ba187
child 288081 475ca0b8da1723f9e033e026622f3f45faf9cbb4
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1191093
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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);
+}