зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1746509 - Replace More from Mozilla XUL tags with HTML, r=pdahiya,Gijs,preferences-reviewers,flod
Differential Revision: https://phabricator.services.mozilla.com/D135733
This commit is contained in:
Dan Mosedale
Родитель
b71c031247
Коммит
6e1ba3994e
|
|
@ -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>
|
||||
</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>
|
||||
</div>
|
||||
</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="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 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>
|
||||
|
|
|
|||
|
|
@ -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/",
|
||||
},
|
||||
};
|
||||
|
|
@ -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/",
|
||||
},
|
||||
};
|
||||
|
|
@ -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(
|
||||
|
|
@ -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
|
||||
);
|
||||
|
||||
|
|
@ -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(
|
||||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
|
|
@ -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");
|
||||
|
||||
|
|
@ -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(
|
||||
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1198,9 +1198,13 @@ richlistitem .text-link:hover {
|
|||
margin-inline-start: 6px;
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory-header .title {
|
||||
margin-block-end: 4px;
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory-header .subtitle {
|
||||
color: var(--in-content-text-color);
|
||||
margin: 4px 0 10px;
|
||||
margin-block-end: 24px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
|
@ -1209,7 +1213,7 @@ richlistitem .text-link:hover {
|
|||
}
|
||||
|
||||
#moreFromMozillaCategory .product-title {
|
||||
margin: 4px 0;
|
||||
margin: 4px 0 3px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
padding-inline-start: 30px;
|
||||
|
|
@ -1226,8 +1230,8 @@ richlistitem .text-link:hover {
|
|||
/* The firefox-mobile product has three columns and needs to constrain the
|
||||
* .product-info section to one of them.
|
||||
*/
|
||||
#firefox-mobile-vbox.advanced .product-info {
|
||||
min-width: 200px;
|
||||
#firefox-mobile-div.advanced .product-info {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory .product-img {
|
||||
|
|
@ -1242,6 +1246,7 @@ richlistitem .text-link:hover {
|
|||
}
|
||||
|
||||
#moreFromMozillaCategory .description {
|
||||
display: inline flow-root;
|
||||
color: var(--in-content-text-color);
|
||||
padding-inline-start: 30px;
|
||||
margin: 2px 0;
|
||||
|
|
@ -1253,7 +1258,7 @@ richlistitem .text-link:hover {
|
|||
}
|
||||
|
||||
#moreFromMozillaCategory .small-button {
|
||||
margin-block: 16px;
|
||||
margin-block: 14px 2px;
|
||||
margin-inline: 30px 0;
|
||||
}
|
||||
|
||||
|
|
@ -1261,7 +1266,7 @@ richlistitem .text-link:hover {
|
|||
margin: 24px 0;
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory vbox.advanced {
|
||||
#moreFromMozillaCategory .mozilla-product-item.advanced {
|
||||
box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
@ -1271,7 +1276,7 @@ richlistitem .text-link:hover {
|
|||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#moreFromMozillaCategory vbox.advanced {
|
||||
#moreFromMozillaCategory .mozilla-product-item.advanced {
|
||||
background-color: rgb(66, 65, 77);
|
||||
}
|
||||
}
|
||||
|
|
@ -1282,12 +1287,13 @@ richlistitem .text-link:hover {
|
|||
|
||||
#moreFromMozillaCategory .text-link {
|
||||
line-height: 1.4em;
|
||||
|
||||
margin-block: 2px 0;
|
||||
margin-inline: 6px 0;
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory .simple .text-link {
|
||||
display: block;
|
||||
display: inline flow-root;
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -1308,6 +1314,10 @@ richlistitem .text-link:hover {
|
|||
background-image: url("chrome://browser/skin/preferences/img-mobile.svg");
|
||||
}
|
||||
|
||||
.advanced #firefox-mobile-image {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#mozilla-vpn-image {
|
||||
background-image: url("chrome://browser/skin/preferences/img-vpn.svg");
|
||||
}
|
||||
|
|
@ -1323,13 +1333,13 @@ richlistitem .text-link:hover {
|
|||
.qr-code-box:not([hidden="true"]) {
|
||||
max-width: 320px; /* a unit better than px for this & next? */
|
||||
min-height: 204px;
|
||||
margin-block: 10px;
|
||||
margin-block: 10px 0;
|
||||
margin-inline-start: 30px;
|
||||
background-color: var(--in-content-box-info-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -1381,7 +1391,7 @@ richlistitem .text-link:hover {
|
|||
|
||||
.qr-code-box-title {
|
||||
font-size: .87em;
|
||||
font-weight: 600;
|
||||
font-weight: normal;
|
||||
line-height: 1.42em;
|
||||
|
||||
text-align: center;
|
||||
|
|
@ -1391,11 +1401,13 @@ richlistitem .text-link:hover {
|
|||
}
|
||||
|
||||
.simple .qr-code-box-title {
|
||||
width: 302px;
|
||||
margin-block: 0;
|
||||
width: 296px;
|
||||
}
|
||||
|
||||
.simple .qr-code-box {
|
||||
padding: 4px 20px 24px;
|
||||
padding-inline: 24px;
|
||||
padding-block: 20px
|
||||
}
|
||||
|
||||
.simple .qr-code-box-image {
|
||||
|
|
@ -1408,18 +1420,16 @@ richlistitem .text-link:hover {
|
|||
margin-block: revert;
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory .qr-code-button {
|
||||
#moreFromMozillaCategory .qr-code-link {
|
||||
font-size: .87em;
|
||||
font-weight: 400;
|
||||
line-height: 1.42em;
|
||||
flex: 2 0 auto;
|
||||
margin-block-start: 10px;
|
||||
margin-block-start: 0;
|
||||
margin-inline: 0; /* make sure we're correctly centered by overriding button rule */
|
||||
}
|
||||
|
||||
#moreFromMozillaCategory .advanced .qr-code-button {
|
||||
#moreFromMozillaCategory .advanced .qr-code-link {
|
||||
margin-inline: 16px;
|
||||
padding-block-start: 30px;
|
||||
margin-block-start: 30px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
# coding=utf8
|
||||
|
||||
# Any copyright is dedicated to the Public Domain.
|
||||
# http://creativecommons.org/publicdomain/zero/1.0/
|
||||
|
||||
from __future__ import absolute_import
|
||||
from fluent.migrate.helpers import transforms_from
|
||||
from fluent.migrate import COPY_PATTERN
|
||||
|
||||
|
||||
def migrate(ctx):
|
||||
"""Bug 1746509 - More from Mozilla XUL to HTML refactor, part {index}"""
|
||||
ctx.add_transforms(
|
||||
"browser/browser/preferences/moreFromMozilla.ftl",
|
||||
"browser/browser/preferences/moreFromMozilla.ftl",
|
||||
transforms_from(
|
||||
"""
|
||||
more-from-moz-button-mozilla-rally-2 =
|
||||
{ COPY_PATTERN(from_path, "more-from-moz-button-mozilla-rally.label") }
|
||||
more-from-moz-button-mozilla-vpn-2 =
|
||||
{ COPY_PATTERN(from_path, "more-from-moz-button-mozilla-vpn.label") }
|
||||
""",
|
||||
from_path="browser/browser/preferences/moreFromMozilla.ftl",
|
||||
),
|
||||
)
|
||||
Загрузка…
Ссылка в новой задаче