зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1812135 - Use moz-toggle in the about:newtab personalization panel. r=thecount,amy,hjones,desktop-theme-reviewers,bolsson
This adds moz-toggle.mjs as a module to load in the main newtab document (cached or otherwise), and then converts the existing toggles to use moz-toggle. This also required me to bring in design-tokens-brand.css to get the right colours for the toggle to appear. There was some markup in the original panel that had the label exist outside of the toggle, and some CSS grid styling to make it appear alongside it. Thankfully, moz-toggle takes care of a lot of that for us, so I was able to get rid of the external label element and the associated styles. Differential Revision: https://phabricator.services.mozilla.com/D187716
This commit is contained in:
Mike Conley
Родитель
9aaa529968
Коммит
c31b4c1af9
|
|
@ -75,6 +75,10 @@ function templateHTML(options) {
|
|||
<link rel="localization" href="branding/brand.ftl" />
|
||||
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
||||
<link rel="localization" href="browser/newtab/newtab.ftl" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://global/skin/design-tokens-brand.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://browser/content/contentSearchUI.css"
|
||||
|
|
@ -89,6 +93,10 @@ function templateHTML(options) {
|
|||
<div id="footer-asrouter-container" role="presentation"></div>${
|
||||
options.noscripts ? "" : scriptRender
|
||||
}
|
||||
<script
|
||||
type="module"
|
||||
src="chrome://global/content/elements/moz-toggle.mjs"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
`.trimLeft();
|
||||
|
|
|
|||
|
|
@ -36,6 +36,11 @@ export class ContentSection extends React.PureComponent {
|
|||
if (eventSource) {
|
||||
this.inputUserEvent(eventSource, value);
|
||||
}
|
||||
} else if (e.target.nodeName === "MOZ-TOGGLE") {
|
||||
value = e.target.pressed;
|
||||
if (eventSource) {
|
||||
this.inputUserEvent(eventSource, value);
|
||||
}
|
||||
}
|
||||
this.props.setPref(prefName, value);
|
||||
}
|
||||
|
|
@ -105,31 +110,16 @@ export class ContentSection extends React.PureComponent {
|
|||
return (
|
||||
<div className="home-section">
|
||||
<div id="shortcuts-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
id="shortcuts-toggle"
|
||||
checked={topSitesEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
preference="feeds.topsites"
|
||||
aria-labelledby="custom-shortcuts-title"
|
||||
aria-describedby="custom-shortcuts-subtitle"
|
||||
eventSource="TOP_SITES"
|
||||
/>
|
||||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<moz-toggle
|
||||
id="shortcuts-toggle"
|
||||
pressed={topSitesEnabled || null}
|
||||
onToggle={this.onPreferenceSelect}
|
||||
preference="feeds.topsites"
|
||||
eventSource="TOP_SITES"
|
||||
data-l10n-id="newtab-custom-shortcuts-toggle"
|
||||
data-l10n-attrs="label, description"
|
||||
/>
|
||||
<div>
|
||||
<h2 id="custom-shortcuts-title" className="title">
|
||||
<label
|
||||
htmlFor="shortcuts-toggle"
|
||||
data-l10n-id="newtab-custom-shortcuts-title"
|
||||
></label>
|
||||
</h2>
|
||||
<p
|
||||
id="custom-shortcuts-subtitle"
|
||||
className="subtitle"
|
||||
data-l10n-id="newtab-custom-shortcuts-subtitle"
|
||||
></p>
|
||||
<div className="more-info-top-wrapper">
|
||||
<div className="more-information" ref={this.topSitesDrawerRef}>
|
||||
<select
|
||||
|
|
@ -190,30 +180,18 @@ export class ContentSection extends React.PureComponent {
|
|||
{pocketRegion && (
|
||||
<div id="pocket-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
<moz-toggle
|
||||
id="pocket-toggle"
|
||||
checked={pocketEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
pressed={pocketEnabled || null}
|
||||
onToggle={this.onPreferenceSelect}
|
||||
preference="feeds.section.topstories"
|
||||
aria-labelledby="custom-pocket-title"
|
||||
aria-describedby="custom-pocket-subtitle"
|
||||
eventSource="TOP_STORIES"
|
||||
data-l10n-id="newtab-custom-pocket-toggle"
|
||||
data-l10n-attrs="label, description"
|
||||
/>
|
||||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<div>
|
||||
<h2 id="custom-pocket-title" className="title">
|
||||
<label
|
||||
htmlFor="pocket-toggle"
|
||||
data-l10n-id="newtab-custom-pocket-title"
|
||||
></label>
|
||||
</h2>
|
||||
<p
|
||||
id="custom-pocket-subtitle"
|
||||
className="subtitle"
|
||||
data-l10n-id="newtab-custom-pocket-subtitle"
|
||||
/>
|
||||
{(mayHaveSponsoredStories || mayHaveRecentSaves) && (
|
||||
<div className="more-info-pocket-wrapper">
|
||||
<div className="more-information" ref={this.pocketDrawerRef}>
|
||||
|
|
@ -264,32 +242,16 @@ export class ContentSection extends React.PureComponent {
|
|||
|
||||
<div id="recent-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
<moz-toggle
|
||||
id="highlights-toggle"
|
||||
checked={highlightsEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
pressed={highlightsEnabled || null}
|
||||
onToggle={this.onPreferenceSelect}
|
||||
preference="feeds.section.highlights"
|
||||
eventSource="HIGHLIGHTS"
|
||||
aria-labelledby="custom-recent-title"
|
||||
aria-describedby="custom-recent-subtitle"
|
||||
data-l10n-id="newtab-custom-recent-toggle"
|
||||
data-l10n-attrs="label, description"
|
||||
/>
|
||||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<div>
|
||||
<h2 id="custom-recent-title" className="title">
|
||||
<label
|
||||
htmlFor="highlights-toggle"
|
||||
data-l10n-id="newtab-custom-recent-title"
|
||||
></label>
|
||||
</h2>
|
||||
|
||||
<p
|
||||
id="custom-recent-subtitle"
|
||||
className="subtitle"
|
||||
data-l10n-id="newtab-custom-recent-subtitle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="divider" role="separator"></span>
|
||||
|
|
|
|||
|
|
@ -111,27 +111,10 @@
|
|||
padding: 0 16px;
|
||||
|
||||
.section {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px;
|
||||
|
||||
& > div {
|
||||
grid-area: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
moz-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -191,64 +174,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
grid-column: 2;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 250ms;
|
||||
border-radius: 13px;
|
||||
border: $customize-menu-border-tint;
|
||||
background-color: var(--newtab-element-secondary-color);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
inset-inline-start: 3px;
|
||||
bottom: 3px;
|
||||
background-color: var(--newtab-primary-element-text-color);
|
||||
transition: transform 250ms;
|
||||
border-radius: 50%;
|
||||
outline: $customize-menu-border-tint;
|
||||
}
|
||||
}
|
||||
|
||||
.switch input:focus-visible + .slider {
|
||||
outline: 0;
|
||||
box-shadow: $shadow-focus;
|
||||
}
|
||||
|
||||
.switch input:not(:checked):focus-visible + .slider {
|
||||
border: 1px solid var(--newtab-primary-action-background);
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--newtab-primary-action-background);
|
||||
}
|
||||
|
||||
input:checked + .slider::before {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
input:checked + .slider:dir(rtl)::before {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.more-info-top-wrapper,
|
||||
.more-info-pocket-wrapper {
|
||||
margin-inline-start: -2px;
|
||||
|
|
|
|||
|
|
@ -1700,25 +1700,9 @@ main.has-snippet {
|
|||
grid-row-gap: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.home-section .section {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px;
|
||||
}
|
||||
.home-section .section > div {
|
||||
grid-area: 1;
|
||||
}
|
||||
.home-section .section .title {
|
||||
grid-column: 1/-1;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
.home-section .section moz-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-section .section .subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-section .section .sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -1772,55 +1756,6 @@ main.has-snippet {
|
|||
.home-section .section .selector:dir(rtl) {
|
||||
background-position-x: left;
|
||||
}
|
||||
.home-section .section .switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
grid-column: 2;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.home-section .section .switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.home-section .section .slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 250ms;
|
||||
border-radius: 13px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--newtab-element-secondary-color);
|
||||
}
|
||||
.home-section .section .slider::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
inset-inline-start: 3px;
|
||||
bottom: 3px;
|
||||
background-color: var(--newtab-primary-element-text-color);
|
||||
transition: transform 250ms;
|
||||
border-radius: 50%;
|
||||
outline: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.home-section .section .switch input:focus-visible + .slider {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
|
||||
}
|
||||
.home-section .section .switch input:not(:checked):focus-visible + .slider {
|
||||
border: 1px solid var(--newtab-primary-action-background);
|
||||
}
|
||||
.home-section .section input:checked + .slider {
|
||||
background-color: var(--newtab-primary-action-background);
|
||||
}
|
||||
.home-section .section input:checked + .slider::before {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
.home-section .section input:checked + .slider:dir(rtl)::before {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
.home-section .section .more-info-top-wrapper,
|
||||
.home-section .section .more-info-pocket-wrapper {
|
||||
margin-inline-start: -2px;
|
||||
|
|
|
|||
|
|
@ -1704,25 +1704,9 @@ main.has-snippet {
|
|||
grid-row-gap: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.home-section .section {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px;
|
||||
}
|
||||
.home-section .section > div {
|
||||
grid-area: 1;
|
||||
}
|
||||
.home-section .section .title {
|
||||
grid-column: 1/-1;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
.home-section .section moz-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-section .section .subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-section .section .sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -1776,55 +1760,6 @@ main.has-snippet {
|
|||
.home-section .section .selector:dir(rtl) {
|
||||
background-position-x: left;
|
||||
}
|
||||
.home-section .section .switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
grid-column: 2;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.home-section .section .switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.home-section .section .slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 250ms;
|
||||
border-radius: 13px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--newtab-element-secondary-color);
|
||||
}
|
||||
.home-section .section .slider::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
inset-inline-start: 3px;
|
||||
bottom: 3px;
|
||||
background-color: var(--newtab-primary-element-text-color);
|
||||
transition: transform 250ms;
|
||||
border-radius: 50%;
|
||||
outline: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.home-section .section .switch input:focus-visible + .slider {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
|
||||
}
|
||||
.home-section .section .switch input:not(:checked):focus-visible + .slider {
|
||||
border: 1px solid var(--newtab-primary-action-background);
|
||||
}
|
||||
.home-section .section input:checked + .slider {
|
||||
background-color: var(--newtab-primary-action-background);
|
||||
}
|
||||
.home-section .section input:checked + .slider::before {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
.home-section .section input:checked + .slider:dir(rtl)::before {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
.home-section .section .more-info-top-wrapper,
|
||||
.home-section .section .more-info-pocket-wrapper {
|
||||
margin-inline-start: -2px;
|
||||
|
|
|
|||
|
|
@ -1700,25 +1700,9 @@ main.has-snippet {
|
|||
grid-row-gap: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.home-section .section {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px;
|
||||
}
|
||||
.home-section .section > div {
|
||||
grid-area: 1;
|
||||
}
|
||||
.home-section .section .title {
|
||||
grid-column: 1/-1;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
.home-section .section moz-toggle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-section .section .subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-section .section .sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -1772,55 +1756,6 @@ main.has-snippet {
|
|||
.home-section .section .selector:dir(rtl) {
|
||||
background-position-x: left;
|
||||
}
|
||||
.home-section .section .switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
grid-column: 2;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.home-section .section .switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.home-section .section .slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 250ms;
|
||||
border-radius: 13px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--newtab-element-secondary-color);
|
||||
}
|
||||
.home-section .section .slider::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
inset-inline-start: 3px;
|
||||
bottom: 3px;
|
||||
background-color: var(--newtab-primary-element-text-color);
|
||||
transition: transform 250ms;
|
||||
border-radius: 50%;
|
||||
outline: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.home-section .section .switch input:focus-visible + .slider {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
|
||||
}
|
||||
.home-section .section .switch input:not(:checked):focus-visible + .slider {
|
||||
border: 1px solid var(--newtab-primary-action-background);
|
||||
}
|
||||
.home-section .section input:checked + .slider {
|
||||
background-color: var(--newtab-primary-action-background);
|
||||
}
|
||||
.home-section .section input:checked + .slider::before {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
.home-section .section input:checked + .slider:dir(rtl)::before {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
.home-section .section .more-info-top-wrapper,
|
||||
.home-section .section .more-info-pocket-wrapper {
|
||||
margin-inline-start: -2px;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
<link rel="localization" href="branding/brand.ftl" />
|
||||
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
||||
<link rel="localization" href="browser/newtab/newtab.ftl" />
|
||||
<link rel="stylesheet" href="chrome://global/skin/design-tokens-brand.css">
|
||||
<link rel="stylesheet" href="chrome://browser/content/contentSearchUI.css" />
|
||||
<link rel="stylesheet" href="chrome://activity-stream/content/css/activity-stream.css" />
|
||||
</head>
|
||||
|
|
@ -40,5 +41,6 @@
|
|||
</div>
|
||||
<div id="footer-asrouter-container" role="presentation"></div>
|
||||
<script src="about:home?jscache"></script>
|
||||
<script type="module" src="chrome://global/content/elements/moz-toggle.mjs"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14230,6 +14230,12 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
} else if (e.target.nodeName === "INPUT") {
|
||||
value = e.target.checked;
|
||||
|
||||
if (eventSource) {
|
||||
this.inputUserEvent(eventSource, value);
|
||||
}
|
||||
} else if (e.target.nodeName === "MOZ-TOGGLE") {
|
||||
value = e.target.pressed;
|
||||
|
||||
if (eventSource) {
|
||||
this.inputUserEvent(eventSource, value);
|
||||
}
|
||||
|
|
@ -14300,31 +14306,15 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
id: "shortcuts-section",
|
||||
className: "section"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
className: "switch"
|
||||
}, /*#__PURE__*/external_React_default().createElement("input", {
|
||||
}, /*#__PURE__*/external_React_default().createElement("moz-toggle", {
|
||||
id: "shortcuts-toggle",
|
||||
checked: topSitesEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
pressed: topSitesEnabled || null,
|
||||
onToggle: this.onPreferenceSelect,
|
||||
preference: "feeds.topsites",
|
||||
"aria-labelledby": "custom-shortcuts-title",
|
||||
"aria-describedby": "custom-shortcuts-subtitle",
|
||||
eventSource: "TOP_SITES"
|
||||
}), /*#__PURE__*/external_React_default().createElement("span", {
|
||||
className: "slider",
|
||||
role: "presentation"
|
||||
})), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("h2", {
|
||||
id: "custom-shortcuts-title",
|
||||
className: "title"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
htmlFor: "shortcuts-toggle",
|
||||
"data-l10n-id": "newtab-custom-shortcuts-title"
|
||||
})), /*#__PURE__*/external_React_default().createElement("p", {
|
||||
id: "custom-shortcuts-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-shortcuts-subtitle"
|
||||
}), /*#__PURE__*/external_React_default().createElement("div", {
|
||||
eventSource: "TOP_SITES",
|
||||
"data-l10n-id": "newtab-custom-shortcuts-toggle",
|
||||
"data-l10n-attrs": "label, description"
|
||||
}), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "more-info-top-wrapper"
|
||||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "more-information",
|
||||
|
|
@ -14375,29 +14365,16 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
className: "section"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
className: "switch"
|
||||
}, /*#__PURE__*/external_React_default().createElement("input", {
|
||||
}, /*#__PURE__*/external_React_default().createElement("moz-toggle", {
|
||||
id: "pocket-toggle",
|
||||
checked: pocketEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
pressed: pocketEnabled || null,
|
||||
onToggle: this.onPreferenceSelect,
|
||||
preference: "feeds.section.topstories",
|
||||
"aria-labelledby": "custom-pocket-title",
|
||||
"aria-describedby": "custom-pocket-subtitle",
|
||||
eventSource: "TOP_STORIES"
|
||||
}), /*#__PURE__*/external_React_default().createElement("span", {
|
||||
className: "slider",
|
||||
role: "presentation"
|
||||
})), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("h2", {
|
||||
id: "custom-pocket-title",
|
||||
className: "title"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
htmlFor: "pocket-toggle",
|
||||
"data-l10n-id": "newtab-custom-pocket-title"
|
||||
})), /*#__PURE__*/external_React_default().createElement("p", {
|
||||
id: "custom-pocket-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-pocket-subtitle"
|
||||
}), (mayHaveSponsoredStories || mayHaveRecentSaves) && /*#__PURE__*/external_React_default().createElement("div", {
|
||||
eventSource: "TOP_STORIES",
|
||||
"data-l10n-id": "newtab-custom-pocket-toggle",
|
||||
"data-l10n-attrs": "label, description"
|
||||
})), /*#__PURE__*/external_React_default().createElement("div", null, (mayHaveSponsoredStories || mayHaveRecentSaves) && /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "more-info-pocket-wrapper"
|
||||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "more-information",
|
||||
|
|
@ -14439,28 +14416,14 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
className: "section"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
className: "switch"
|
||||
}, /*#__PURE__*/external_React_default().createElement("input", {
|
||||
}, /*#__PURE__*/external_React_default().createElement("moz-toggle", {
|
||||
id: "highlights-toggle",
|
||||
checked: highlightsEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
pressed: highlightsEnabled || null,
|
||||
onToggle: this.onPreferenceSelect,
|
||||
preference: "feeds.section.highlights",
|
||||
eventSource: "HIGHLIGHTS",
|
||||
"aria-labelledby": "custom-recent-title",
|
||||
"aria-describedby": "custom-recent-subtitle"
|
||||
}), /*#__PURE__*/external_React_default().createElement("span", {
|
||||
className: "slider",
|
||||
role: "presentation"
|
||||
})), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("h2", {
|
||||
id: "custom-recent-title",
|
||||
className: "title"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
htmlFor: "highlights-toggle",
|
||||
"data-l10n-id": "newtab-custom-recent-title"
|
||||
})), /*#__PURE__*/external_React_default().createElement("p", {
|
||||
id: "custom-recent-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-recent-subtitle"
|
||||
"data-l10n-id": "newtab-custom-recent-toggle",
|
||||
"data-l10n-attrs": "label, description"
|
||||
}))), /*#__PURE__*/external_React_default().createElement("span", {
|
||||
className: "divider",
|
||||
role: "separator"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
<link rel="localization" href="branding/brand.ftl" />
|
||||
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
||||
<link rel="localization" href="browser/newtab/newtab.ftl" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://global/skin/design-tokens-brand.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://browser/content/contentSearchUI.css"
|
||||
|
|
@ -43,5 +47,9 @@
|
|||
<script src="resource://activity-stream/vendor/react-transition-group.js"></script>
|
||||
<script src="resource://activity-stream/data/content/activity-stream.bundle.js"></script>
|
||||
<script src="resource://activity-stream/data/content/newtab-render.js"></script>
|
||||
<script
|
||||
type="module"
|
||||
src="chrome://global/content/elements/moz-toggle.mjs"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
<link rel="localization" href="branding/brand.ftl" />
|
||||
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
||||
<link rel="localization" href="browser/newtab/newtab.ftl" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://global/skin/design-tokens-brand.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://browser/content/contentSearchUI.css"
|
||||
|
|
@ -32,5 +36,9 @@
|
|||
<body class="activity-stream">
|
||||
<div id="root"></div>
|
||||
<div id="footer-asrouter-container" role="presentation"></div>
|
||||
<script
|
||||
type="module"
|
||||
src="chrome://global/content/elements/moz-toggle.mjs"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
<link rel="localization" href="branding/brand.ftl" />
|
||||
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
||||
<link rel="localization" href="browser/newtab/newtab.ftl" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://global/skin/design-tokens-brand.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://browser/content/contentSearchUI.css"
|
||||
|
|
@ -43,5 +47,9 @@
|
|||
<script src="resource://activity-stream/vendor/react-transition-group.js"></script>
|
||||
<script src="resource://activity-stream/data/content/activity-stream.bundle.js"></script>
|
||||
<script src="resource://activity-stream/data/content/newtab-render.js"></script>
|
||||
<script
|
||||
type="module"
|
||||
src="chrome://global/content/elements/moz-toggle.mjs"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -279,11 +279,13 @@ function assertCacheResultScalar(cacheResultScalar) {
|
|||
*/
|
||||
async function ensureCachedAboutHome(browser) {
|
||||
await SpecialPowers.spawn(browser, [], async () => {
|
||||
let scripts = Array.from(content.document.querySelectorAll("script"));
|
||||
Assert.ok(!!scripts.length, "There should be page scripts.");
|
||||
let [lastScript] = scripts.reverse();
|
||||
let syncScripts = Array.from(
|
||||
content.document.querySelectorAll("script:not([type='module'])")
|
||||
);
|
||||
Assert.ok(!!syncScripts.length, "There should be page scripts.");
|
||||
let [lastSyncScript] = syncScripts.reverse();
|
||||
Assert.equal(
|
||||
lastScript.src,
|
||||
lastSyncScript.src,
|
||||
"about:home?jscache",
|
||||
"Found about:home?jscache script tag, indicating the cached doc"
|
||||
);
|
||||
|
|
@ -331,8 +333,10 @@ async function ensureCachedAboutHome(browser) {
|
|||
*/
|
||||
async function ensureDynamicAboutHome(browser, expectedResultScalar) {
|
||||
await SpecialPowers.spawn(browser, [], async () => {
|
||||
let scripts = Array.from(content.document.querySelectorAll("script"));
|
||||
Assert.equal(scripts.length, 0, "There should be no page scripts.");
|
||||
let syncScripts = Array.from(
|
||||
content.document.querySelectorAll("script:not([type='module'])")
|
||||
);
|
||||
Assert.equal(syncScripts.length, 0, "There should be no page scripts.");
|
||||
|
||||
Assert.equal(
|
||||
Cu.waiveXrays(content).__FROM_STARTUP_CACHE__,
|
||||
|
|
|
|||
|
|
@ -44,9 +44,13 @@ test_newtab({
|
|||
"Customize Menu should be visible on screen"
|
||||
);
|
||||
|
||||
// Test that clicking the shortcuts toggle will make the section appear on the newtab page.
|
||||
let shortcutsSwitch = content.document.querySelector(
|
||||
"#shortcuts-section .switch"
|
||||
// Test that clicking the shortcuts toggle will make the section
|
||||
// appear on the newtab page.
|
||||
//
|
||||
// We waive XRay wrappers because we want to call the click()
|
||||
// method defined on the toggle from this context.
|
||||
let shortcutsSwitch = Cu.waiveXrays(
|
||||
content.document.querySelector("#shortcuts-section moz-toggle")
|
||||
);
|
||||
Assert.ok(
|
||||
!Services.prefs.getBoolPref(TOPSITES_PREF),
|
||||
|
|
@ -60,9 +64,13 @@ test_newtab({
|
|||
|
||||
Assert.ok(getSection("topsites"), "Shortcuts section is rendered");
|
||||
|
||||
// Test that clicking the pocket toggle will make the pocket section appear on the newtab page
|
||||
let pocketSwitch = content.document.querySelector(
|
||||
"#pocket-section .switch"
|
||||
// Test that clicking the pocket toggle will make the pocket section
|
||||
// appear on the newtab page
|
||||
//
|
||||
// We waive XRay wrappers because we want to call the click()
|
||||
// method defined on the toggle from this context.
|
||||
let pocketSwitch = Cu.waiveXrays(
|
||||
content.document.querySelector("#pocket-section moz-toggle")
|
||||
);
|
||||
Assert.ok(
|
||||
!Services.prefs.getBoolPref(TOPSTORIES_PREF),
|
||||
|
|
@ -76,9 +84,13 @@ test_newtab({
|
|||
|
||||
Assert.ok(getSection("topstories"), "Pocket section is rendered");
|
||||
|
||||
// Test that clicking the recent activity toggle will make the recent activity section appear on the newtab page
|
||||
let highlightsSwitch = content.document.querySelector(
|
||||
"#recent-section .switch"
|
||||
// Test that clicking the recent activity toggle will make the
|
||||
// recent activity section appear on the newtab page.
|
||||
//
|
||||
// We waive XRay wrappers because we want to call the click()
|
||||
// method defined on the toggle from this context.
|
||||
let highlightsSwitch = Cu.waiveXrays(
|
||||
content.document.querySelector("#recent-section moz-toggle")
|
||||
);
|
||||
Assert.ok(
|
||||
!Services.prefs.getBoolPref(HIGHLIGHTS_PREF),
|
||||
|
|
|
|||
|
|
@ -253,8 +253,10 @@ newtab-error-fallback-refresh-link = Refresh page to try again.
|
|||
|
||||
## Customization Menu
|
||||
|
||||
newtab-custom-shortcuts-title = Shortcuts
|
||||
newtab-custom-shortcuts-subtitle = Sites you save or visit
|
||||
newtab-custom-shortcuts-toggle =
|
||||
.label = Shortcuts
|
||||
.description = Sites you save or visit
|
||||
|
||||
# Variables
|
||||
# $num (number) - Number of rows to display
|
||||
newtab-custom-row-selector =
|
||||
|
|
@ -263,11 +265,13 @@ newtab-custom-row-selector =
|
|||
*[other] { $num } rows
|
||||
}
|
||||
newtab-custom-sponsored-sites = Sponsored shortcuts
|
||||
newtab-custom-pocket-title = Recommended by { -pocket-brand-name }
|
||||
newtab-custom-pocket-subtitle = Exceptional content curated by { -pocket-brand-name }, part of the { -brand-product-name } family
|
||||
newtab-custom-pocket-toggle =
|
||||
.label = Recommended by { -pocket-brand-name }
|
||||
.description = Exceptional content curated by { -pocket-brand-name }, part of the { -brand-product-name } family
|
||||
newtab-custom-pocket-sponsored = Sponsored stories
|
||||
newtab-custom-pocket-show-recent-saves = Show recent saves
|
||||
newtab-custom-recent-title = Recent activity
|
||||
newtab-custom-recent-subtitle = A selection of recent sites and content
|
||||
newtab-custom-recent-toggle =
|
||||
.label = Recent activity
|
||||
.description = A selection of recent sites and content
|
||||
newtab-custom-close-button = Close
|
||||
newtab-custom-settings = Manage more settings
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
# Any copyright is dedicated to the Public Domain.
|
||||
# http://creativecommons.org/publicdomain/zero/1.0/
|
||||
|
||||
import fluent.syntax.ast as FTL
|
||||
from fluent.migrate.helpers import transforms_from
|
||||
|
||||
|
||||
def migrate(ctx):
|
||||
"""Bug 1812135 - Convert some newtab customiation panel strings to use a label, part {index}"""
|
||||
|
||||
translations_ftl = "browser/browser/newtab/newtab.ftl"
|
||||
|
||||
ctx.add_transforms(
|
||||
translations_ftl,
|
||||
translations_ftl,
|
||||
transforms_from(
|
||||
"""
|
||||
newtab-custom-shortcuts-toggle =
|
||||
.label = {COPY_PATTERN(from_path, "newtab-custom-shortcuts-title")}
|
||||
.description = {COPY_PATTERN(from_path, "newtab-custom-shortcuts-subtitle")}
|
||||
newtab-custom-pocket-toggle =
|
||||
.label = {COPY_PATTERN(from_path, "newtab-custom-pocket-title")}
|
||||
.description = {COPY_PATTERN(from_path, "newtab-custom-pocket-subtitle")}
|
||||
newtab-custom-recent-toggle =
|
||||
.label = {COPY_PATTERN(from_path, "newtab-custom-recent-title")}
|
||||
.description = {COPY_PATTERN(from_path, "newtab-custom-recent-subtitle")}
|
||||
""",
|
||||
from_path=translations_ftl,
|
||||
),
|
||||
)
|
||||
Загрузка…
Ссылка в новой задаче