Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: devtools/client/shared/test/browser.toml
/* Any copyright is dedicated to the Public Domain.
/* import-globals-from helper_inplace_editor.js */
"use strict";
loadHelperScript("helper_inplace_editor.js");
// Test the inplace-editor behavior with focusEditableFieldAfterApply
// and focusEditableFieldContainerSelector options
add_task(async function () {
await addTab(
"data:text/html;charset=utf-8,inline editor focusEditableFieldAfterApply"
);
const { host, doc } = await createHost();
testFocusNavigationWithMultipleEditor(doc);
testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(doc);
testMissingFocusEditableFieldContainerSelector(doc);
host.destroy();
gBrowser.removeCurrentTab();
});
function testFocusNavigationWithMultipleEditor(doc) {
// For some reason <button> or <input> are not rendered, so let's use divs with
// tabindex attribute to make them focusable.
doc.body.innerHTML = `
<main>
<header>
<div role=button tabindex=0 id="header-button">HEADER</div>
</header>
<section>
<span id="span-1" tabindex=0>SPAN 1</span>
<div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
<p>
<span id="span-2" tabindex=0>SPAN 2</span>
<div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
</p>
<span id="span-3" tabindex=0>SPAN 3</span>
<div role=button tabindex=0 id="section-button-3">BUTTON 3</div>
</section>
<sidebar>
<div role=button tabindex=0 id="sidebar-button">SIDEBAR</div>
</sidebar>
<main>`;
const span1 = doc.getElementById("span-1");
const span2 = doc.getElementById("span-2");
const span3 = doc.getElementById("span-3");
info("Create 3 editable fields for the 3 spans inside the main element");
const options = {
focusEditableFieldAfterApply: true,
focusEditableFieldContainerSelector: "main",
};
editableField({
element: span1,
...options,
});
editableField({
element: span2,
...options,
});
editableField({
element: span3,
...options,
});
span1.click();
is(
doc.activeElement.inplaceEditor.elt.id,
"span-1",
"Visible editable field is the one associated with span-1"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.inplaceEditor.elt.id,
"span-2",
"Using Tab moved focus to span-2 editable field"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.inplaceEditor.elt.id,
"span-3",
"Using Tab moved focus to span-3 editable field"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.id,
"sidebar-button",
"Using Tab moved focus outside of <main>"
);
}
function testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(
doc
) {
// For some reason <button> or <input> are not rendered, so let's use divs with
// tabindex attribute to make them focusable.
doc.body.innerHTML = `
<main>
<span id="span-1" tabindex=0>SPAN 1</span>
<div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
<span id="span-2" tabindex=0>SPAN 2</span>
<div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
<main>`;
const span1 = doc.getElementById("span-1");
const span2 = doc.getElementById("span-2");
info(
"Create editable fields for the 2 spans, but pass a focusEditableFieldContainerSelector that does not match any element"
);
const options = {
focusEditableFieldAfterApply: true,
focusEditableFieldContainerSelector: ".does-not-exist",
};
editableField({
element: span1,
...options,
});
editableField({
element: span2,
...options,
});
span1.click();
is(
doc.activeElement.inplaceEditor.elt.id,
"span-1",
"Visible editable field is the one associated with span-1"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.id,
"section-button-1",
"Using Tab moved focus to section-button-1, non-editable field"
);
ok(!doc.querySelector("input"), "There's no editable input displayed");
}
function testMissingFocusEditableFieldContainerSelector(doc) {
doc.body.innerHTML = "";
const element = createSpan(doc);
editableField({
element,
focusEditableFieldAfterApply: true,
});
element.click();
is(
element.style.display,
"inline-block",
"The original <span> was not hidden"
);
ok(!doc.querySelector("input"), "No input was created");
}
function assertFocusedElementInplaceEditorInput(doc) {
ok(
doc.activeElement.matches("input.styleinspector-propertyeditor"),
"inplace editor input is focused"
);
}