Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-29 15:52:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1617669 - Check if an element is in any of the roots before adding to pending mutations. r=smaug

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D67111

--HG--
rename : dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html => dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html
extra : moz-landing-system : lando
This commit is contained in:
Axel Hecht 2020-03-31 19:57:21 +00:00
parent 7bb0df2436
commit 606a2df712
5 changed files with 186 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dom/l10n/DOMLocalization.h
View File

@ -90,6 +90,16 @@ class DOMLocalization : public intl::Localization {
nsTArray<L10nMessage>& aTranslations,
nsXULPrototypeDocument* aProto, ErrorResult& aRv);
bool SubtreeRootInRoots(nsINode* aSubtreeRoot) {
for (auto iter = mRoots.Iter(); !iter.Done(); iter.Next()) {
nsINode* subtreeRoot = iter.Get()->GetKey()->SubtreeRoot();
if (subtreeRoot == aSubtreeRoot) {
return true;
}
}
return false;
}
protected:
virtual ~DOMLocalization();
void OnChange() override;

41
dom/l10n/L10nMutations.cpp
View File

@ -40,10 +40,11 @@ void L10nMutations::AttributeChanged(Element* aElement, int32_t aNameSpaceID,
if (!mObserving) {
return;
}
if (aElement->IsInComposedDoc()) {
if (aNameSpaceID == kNameSpaceID_None &&
(aAttribute == nsGkAtoms::datal10nid ||
aAttribute == nsGkAtoms::datal10nargs)) {
if (aNameSpaceID == kNameSpaceID_None &&
(aAttribute == nsGkAtoms::datal10nid ||
aAttribute == nsGkAtoms::datal10nargs)) {
if (IsInRoots(aElement)) {
L10nElementChanged(aElement);
}
}
@ -53,17 +54,17 @@ void L10nMutations::ContentAppended(nsIContent* aChild) {
if (!mObserving) {
return;
}
ErrorResult rv;
Sequence<OwningNonNull<Element>> elements;
nsINode* node = aChild;
if (!IsInRoots(node)) {
return;
}
ErrorResult rv;
Sequence<OwningNonNull<Element>> elements;
while (node) {
if (node->IsElement()) {
Element* elem = node->AsElement();
if (elem->IsInComposedDoc()) {
DOMLocalization::GetTranslatables(*node, elements, rv);
}
DOMLocalization::GetTranslatables(*node, elements, rv);
}
node = node->GetNextSibling();
@ -86,7 +87,7 @@ void L10nMutations::ContentInserted(nsIContent* aChild) {
}
Element* elem = aChild->AsElement();
if (!elem->IsInComposedDoc()) {
if (!IsInRoots(elem)) {
return;
}
DOMLocalization::GetTranslatables(*aChild, elements, rv);
@ -189,3 +190,19 @@ void L10nMutations::OnCreatePresShell() {
StartRefreshObserver();
}
}
bool L10nMutations::IsInRoots(nsINode* aNode) {
// If the root of the mutated element is in the light DOM,
// we know it must be covered by our observer directly.
//
// Otherwise, we need to check if its subtree root is the same
// as any of the `DOMLocalization::mRoots` subtree roots.
nsINode* root = aNode->SubtreeRoot();
// If element is in light DOM, it must be covered by one of
// the DOMLocalization roots to end up here.
MOZ_ASSERT_IF(!root->IsShadowRoot(),
mDOMLocalization->SubtreeRootInRoots(root));
return !root->IsShadowRoot() || mDOMLocalization->SubtreeRootInRoots(root);
}

1
dom/l10n/L10nMutations.h
View File

@ -81,6 +81,7 @@ class L10nMutations final : public nsStubMutationObserver,
MOZ_ASSERT(!mDOMLocalization,
"DOMLocalization<-->L10nMutations cycle should be broken.");
}
bool IsInRoots(nsINode* aNode);
};
} // namespace dom

1
dom/l10n/tests/mochitest/chrome.ini
View File

@ -10,6 +10,7 @@
[l10n_mutations/test_append_content_post_dcl.html]
[l10n_mutations/test_append_content_pre_dcl.html]
[l10n_mutations/test_append_fragment_post_dcl.html]
[l10n_mutations/test_disconnectedRoot_webcomponent.html]
[l10n_mutations/test_set_attributes.html]
[l10n_mutations/test_pause_observing.html]
[l10n_mutations/test_template.html]

145
dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test DOMLocalization.prototype.connectRoot with Web Components</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<script type="application/javascript">
"use strict";
async function* mockGenerateMessages(resourceIds) {
const bundle = new FluentBundle("en-US");
bundle.addResource(new FluentResource(`
key1 = Key 1
key2 = Key 2
key3 = Key 3
key4 = Key 4
`));
yield bundle;
}
document.domLoc = new DOMLocalization(
[],
mockGenerateMessages
);
document.domLoc.connectRoot(document.documentElement);
</script>
<script type="application/javascript">
// In this test we're going to use two elements - `shadowLabel` and `lightLabel`.
// We create a new `DOMLocalization` and connect it to the document's root first.
//
// Then, we connect and disconnect it on root and element within the shadow DOM and
// apply new `data-l10n-id` onto both labels.
// Once the `lightLabel` get a new translation, we check what happened to the `shadowLabel`
// to ensure that depending on the status of connection between the shadow DOM and the `DOMLocalization`
// the `shadowLabel` either gets translated or not.
SimpleTest.waitForExplicitFinish();
class FluentWidget extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: "open"});
const t = document.querySelector("#fluent-widget-template");
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
connectedCallback() {
this.runTests();
}
runTests() {
// First, let's verify that the mutation will not be applied since
// the shadow DOM is not connected to the `DOMLocalization`.
let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
let lightLabel = document.getElementById("lightLabel");
let verifyL10n = () => {
if (lightLabel.textContent == "Key 1") {
is(shadowLabel.textContent, "", "document.l10n content not applied to an element in the shadow DOM");
window.removeEventListener("MozAfterPaint", verifyL10n);
this.testPart2();
}
};
window.addEventListener("MozAfterPaint", verifyL10n);
document.domLoc.setAttributes(shadowLabel, "key1");
document.domLoc.setAttributes(lightLabel, "key1");
}
testPart2() {
// Next, we connect the shadow root to DOMLocalization and the next attribute
// change should result in a translation being applied.
document.domLoc.connectRoot(this.shadowRoot);
let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
let lightLabel = document.getElementById("lightLabel");
// Test that mutation was applied.
let verifyL10n = () => {
if (lightLabel.textContent == "Key 2") {
is(shadowLabel.textContent, "Key 2", "document.l10n content applied to an element in the shadow DOM");
window.removeEventListener("MozAfterPaint", verifyL10n);
this.testPart3();
}
};
window.addEventListener("MozAfterPaint", verifyL10n);
document.domLoc.setAttributes(shadowLabel, "key2");
document.domLoc.setAttributes(lightLabel, "key2");
}
testPart3() {
// After we disconnect the shadow root, the mutations should
// not be applied onto the `shadowLabel`.
document.domLoc.disconnectRoot(this.shadowRoot);
let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
let lightLabel = document.getElementById("lightLabel");
let verifyL10n = () => {
if (lightLabel.textContent == "Key 3") {
is(shadowLabel.textContent, "Key 2", "document.l10n content not applied to an element in the shadow DOM");
window.removeEventListener("MozAfterPaint", verifyL10n);
this.testPart4();
}
};
window.addEventListener("MozAfterPaint", verifyL10n);
document.domLoc.setAttributes(shadowLabel, "key3");
document.domLoc.setAttributes(lightLabel, "key3");
}
testPart4() {
// Finally, we'll connect it back, but this time, we'll connect
// not the shadow root, but an element within it.
// This should still result in the `shadowLabel` receiving a new translation.
document.domLoc.connectRoot(this.shadowRoot.getElementById("shadowDiv"));
let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
let lightLabel = document.getElementById("lightLabel");
// Test that mutation was applied.
let verifyL10n = () => {
if (lightLabel.textContent == "Key 4") {
is(shadowLabel.textContent, "Key 4", "document.l10n content applied to an element in the shadow DOM");
window.removeEventListener("MozAfterPaint", verifyL10n);
SimpleTest.finish();
}
};
window.addEventListener("MozAfterPaint", verifyL10n);
document.domLoc.setAttributes(shadowLabel, "key4");
document.domLoc.setAttributes(lightLabel, "key4");
}
}
customElements.define("fluent-widget", FluentWidget);
</script>
</head>
<body>
<template id="fluent-widget-template">
<div id="shadowDiv">
<p id="shadowLabel"></p>
</div>
</template>
<fluent-widget id="widget1"></fluent-widget>
<p id="lightLabel"></p>
</body>
</html>