Skip to content

Commit

Permalink
Bug 1746509 - Replace More from Mozilla XUL tags with HTML, r=pdahiya…
Browse files Browse the repository at this point in the history 
…,Gijs,preferences-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D135733
  • Loading branch information
Dan Mosedale committed Jan 27, 2022
1 parent b71c031 commit 6e1ba39
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 111 deletions.
97 changes: 48 additions & 49 deletions browser/components/preferences/moreFromMozilla.inc.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,63 +5,62 @@
<!-- More From Mozilla panel -->

<script src="chrome://browser/content/preferences/moreFromMozilla.js"/>
<html:template id="template-paneMoreFromMozilla">
<vbox id="moreFromMozillaCategory-header"
<html:template xmlns="http://www.w3.org/1999/xhtml" id="template-paneMoreFromMozilla">
<div id="moreFromMozillaCategory-header"
class="subcategory"
data-hidden-from-search="true"
hidden="true"
data-category="paneMoreFromMozilla">
<html:h1 class="title" data-l10n-id="more-from-moz-title" />
<html:p class="subtitle" data-l10n-id="more-from-moz-subtitle" />
</vbox>
<groupbox id="moreFromMozillaCategory"
<h1 class="title" data-l10n-id="more-from-moz-title" />
<p class="subtitle" data-l10n-id="more-from-moz-subtitle" />
</div>
<div id="moreFromMozillaCategory"
data-category="paneMoreFromMozilla"
hidden="true"
data-hidden-from-search="true">
</groupbox>
</div>
</html:template>
<html:template id="simple">
<html:div class="mozilla-product-item simple">
<hbox>
<label>
<html:h2 class="product-title" />
</label>
</hbox>
<hbox>
<html:p class="description" />
<html:a class="text-link wants-telemetry" hidden="true" />
</hbox>
<html:div>
<button class="primary small-button" hidden="true" />
</html:div>
<html:div class="qr-code-box" hidden="true">
<label class="qr-code-title-label">
<html:h3 class="qr-code-box-title" />
</label>
<html:img class="qr-code-box-image" />
<html:a class="wants-telemetry qr-code-button text-link" target="_blank" />
</html:div>
</html:div>

<html:template xmlns="http://www.w3.org/1999/xhtml" id="simple">
<article class="mozilla-product-item simple">

<div>
<h2 class="product-title" />
<div class="product-description-box">
<div class="description" />
<a class="text-link wants-telemetry" hidden="true" />
</div>
</div>

<button type="button" class="primary small-button" hidden="true" />

<div class="qr-code-box" hidden="true">
<h3 class="qr-code-box-title" />
<img class="qr-code-box-image" />
<a class="wants-telemetry qr-code-link text-link" target="_blank" />
</div>

</article>
</html:template>

<html:template id="advanced">
<vbox class="mozilla-product-item advanced">
<hbox class="product-img">
<vbox class="product-info" flex="1">
<label>
<html:h2 class="product-title" />
</label>
<html:p class="description" />
<html:a class="text-link wants-telemetry" hidden="true" />
<html:div><button class="primary small-button" hidden="true"/></html:div>
</vbox>
<html:div class="qr-code-box" hidden="true">
<html:div class="qr-code-top-box">
<html:h3 class="qr-code-box-title" />
<html:img class="qr-code-box-image" role="presentation" />
</html:div>
<html:a class="qr-code-button text-link wants-telemetry" target="_blank" />
</html:div>
</hbox>
</vbox>
<html:template xmlns="http://www.w3.org/1999/xhtml" id="advanced">
<div class="mozilla-product-item advanced">
<div class="product-img">
<div class="product-info" flex="1">
<h2 class="product-title" />
<p class="description" />
<a class="text-link wants-telemetry" hidden="true" />
<div>
<button type="button" class="primary small-button" hidden="true"/>
</div>
</div>
<div class="qr-code-box" hidden="true">
<div class="qr-code-top-box">
<h3 class="qr-code-box-title" />
<img class="qr-code-box-image" role="presentation" />
</div>
<a class="qr-code-link text-link wants-telemetry" target="_blank" />
</div>
</div>
</div>
</html:template>
35 changes: 16 additions & 19 deletions browser/components/preferences/moreFromMozilla.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ var gMoreFromMozillaPane = {
region: "global",
button: {
id: "mozillaVPN",
label_string_id: "more-from-moz-button-mozilla-vpn",
label_string_id: "more-from-moz-button-mozilla-vpn-2",
actionURL: "https://www.mozilla.org/products/vpn/",
},
};
Expand All @@ -137,7 +137,7 @@ var gMoreFromMozillaPane = {
region: "na",
button: {
id: "mozillaRally",
label_string_id: "more-from-moz-button-mozilla-rally",
label_string_id: "more-from-moz-button-mozilla-rally-2",
actionURL: "https://rally.mozilla.org/",
},
};
Expand Down Expand Up @@ -167,7 +167,9 @@ var gMoreFromMozillaPane = {
if (this.option === "advanced") {
// So that we can build a selector that applies to .product-info differently
// for different products.
template.querySelector("vbox.advanced").id = `${product.id}-vbox`;
template.querySelector(
".mozilla-product-item.advanced"
).id = `${product.id}-div`;

template.querySelector(".product-img").id = `${product.id}-image`;
desc.setAttribute(
Expand All @@ -186,8 +188,8 @@ var gMoreFromMozillaPane = {
if (actionElement) {
actionElement.hidden = false;
actionElement.id = `${this.option}-${product.button.id}`;
actionElement.setAttribute(
"data-l10n-id",
document.l10n.setAttributes(
actionElement,
product.button.label_string_id
);

Expand All @@ -198,7 +200,7 @@ var gMoreFromMozillaPane = {
);
actionElement.setAttribute("target", "_blank");
} else {
actionElement.addEventListener("command", function() {
actionElement.addEventListener("click", function() {
let mainWindow = window.windowRoot.ownerGlobal;
mainWindow.openTrustedLinkIn(
gMoreFromMozillaPane.getURL(
Expand Down Expand Up @@ -242,24 +244,19 @@ var gMoreFromMozillaPane = {
"more-from-moz-qr-code-firefox-mobile-img"
);

// Note that the QR code image itself is _not_ a link; this is a link that
// is directly below the image.
let qrc_btn = template.querySelector(".qr-code-button");
let qrc_link = template.querySelector(".qr-code-link");

// So the telemetry includes info about which option is being used
qrc_btn.id = `${this.option}-${product.qrcode.button.id}`;
qrc_btn.setAttribute(
qrc_link.id = `${this.option}-${product.qrcode.button.id}`;
qrc_link.setAttribute(
"data-l10n-id",
product.qrcode.button.label.string_id
);
qrc_btn.setAttribute(
"href",
this.getURL(
product.qrcode.button.actionURL,
product.region,
this.option,
true
)
qrc_link.href = this.getURL(
product.qrcode.button.actionURL,
product.region,
this.option,
true
);
}

Expand Down
27 changes: 7 additions & 20 deletions browser/components/preferences/tests/browser_moreFromMozilla.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,9 @@ add_task(async function testDefaultUIWithoutTemplatePref() {
ok(moreFromMozillaCategory, "The category exists");
ok(!moreFromMozillaCategory.hidden, "The category is not hidden");

let clickedPromise = ContentTaskUtils.waitForEvent(
moreFromMozillaCategory,
"click"
);
moreFromMozillaCategory.click();
await clickedPromise;

let productCards = doc.querySelectorAll("div.simple");
let productCards = doc.querySelectorAll(".mozilla-product-item.simple");
Assert.ok(productCards, "Default UI uses simple template");
Assert.equal(productCards.length, 3, "3 product cards displayed");

Expand Down Expand Up @@ -164,14 +159,9 @@ add_task(async function test_aboutpreferences_simple_template() {
"category-more-from-mozilla"
);

let clickedPromise = ContentTaskUtils.waitForEvent(
moreFromMozillaCategory,
"click"
);
moreFromMozillaCategory.click();
await clickedPromise;

let productCards = doc.querySelectorAll("div.simple");
let productCards = doc.querySelectorAll(".mozilla-product-item");
Assert.ok(productCards, "The product cards from simple template found");
Assert.equal(productCards.length, 3, "3 product cards displayed");

Expand All @@ -198,14 +188,9 @@ add_task(async function test_aboutpreferences_advanced_template() {
"category-more-from-mozilla"
);

let clickedPromise = ContentTaskUtils.waitForEvent(
moreFromMozillaCategory,
"click"
);
moreFromMozillaCategory.click();
await clickedPromise;

let productCards = doc.querySelectorAll("vbox.advanced");
let productCards = doc.querySelectorAll(".mozilla-product-item.advanced");
Assert.ok(productCards, "The product cards from advanced template found");
Assert.equal(productCards.length, 3, "3 product cards displayed");
Assert.deepEqual(
Expand Down Expand Up @@ -236,15 +221,17 @@ add_task(async function test_aboutpreferences_clickBtnVPN() {
let doc = gBrowser.contentDocument;
let tab = gBrowser.selectedTab;

let productCards = doc.querySelectorAll("vbox.simple");
let productCards = doc.querySelectorAll(".mozilla-product-item.simple");
Assert.ok(productCards, "Simple template loaded");

const expectedUrl = "https://www.mozilla.org/products/vpn/";
let tabOpened = BrowserTestUtils.waitForNewTab(gBrowser, url =>
url.startsWith(expectedUrl)
);

let vpnButton = doc.getElementById("simple-mozillaVPN");
vpnButton.doCommand();
vpnButton.click();

let openedTab = await tabOpened;
Assert.ok(gBrowser.selectedBrowser.documentURI.spec.startsWith(expectedUrl));

Expand Down
6 changes: 2 additions & 4 deletions browser/locales/en-US/browser/preferences/moreFromMozilla.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,13 @@ more-from-moz-mozilla-rally-description = Put your data to work for a better int
# This string is specific to the product Mozilla Rally which is US only.
more-from-moz-mozilla-rally-description-advanced = Donate your data to research studies working to create a safer, more open internet that helps people, not Big Tech.
# This string is specific to the product Mozilla Rally which is US only.
more-from-moz-button-mozilla-rally =
.label = Join { -rally-short-name }
more-from-moz-button-mozilla-rally-2 = Join { -rally-short-name }
more-from-moz-qr-code-box-firefox-mobile-title = Download using your mobile device. Point your camera at the QR code. When a link appears, tap it.
more-from-moz-qr-code-box-firefox-mobile-button = Send an email to your phone instead
more-from-moz-qr-code-firefox-mobile-img =
.alt = QR code to download { -brand-product-name } Mobile
more-from-moz-button-mozilla-vpn =
.label = Get VPN
more-from-moz-button-mozilla-vpn-2 = Get VPN
more-from-moz-learn-more-link = Learn more
Loading

0 comments on commit 6e1ba39

Please sign in to comment.