diff --git a/browser/devtools/markupview/markup-view.js b/browser/devtools/markupview/markup-view.js index 24b67f251e3..5927c3fa711 100644 --- a/browser/devtools/markupview/markup-view.js +++ b/browser/devtools/markupview/markup-view.js @@ -18,6 +18,7 @@ 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"); @@ -85,7 +86,10 @@ function MarkupView(aInspector, aFrame, aControllerWindow) { // 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); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js index 42e4b698494..683c6776fe7 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js @@ -61,6 +61,15 @@ 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); @@ -69,10 +78,10 @@ add_task(function*() { 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); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js index fd65892f6fd..035be57dd33 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js @@ -43,6 +43,15 @@ 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); @@ -51,13 +60,13 @@ add_task(function*() { 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); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js index 546b8733b16..6be099827f9 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js @@ -44,6 +44,15 @@ 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); @@ -52,10 +61,10 @@ add_task(function*() { 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); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js index c70f6067bed..ff9df05b328 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js @@ -46,6 +46,15 @@ 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); @@ -60,7 +69,7 @@ add_task(function*() { editor = inplaceEditor(view.styleDocument.activeElement); yield testCompletion(testData[i], editor, view); } -}); +} function* testCompletion([key, modifiers, completion, index, total], editor, view) { info("Pressing key " + key); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js b/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js index 97dad01ba88..0bb5bc67018 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js @@ -82,9 +82,3 @@ function* assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) { 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); -} diff --git a/browser/devtools/styleinspector/test/head.js b/browser/devtools/styleinspector/test/head.js index 5721ada773d..3a96ac4b86e 100644 --- a/browser/devtools/styleinspector/test/head.js +++ b/browser/devtools/styleinspector/test/head.js @@ -999,3 +999,16 @@ function waitForStyleEditor(toolbox, href) { 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); +}