зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset c2341f2f6212 (bug 1812135) for causing multiple crashes. CLOSED TREE
This commit is contained in:
Iulian Moraru
Родитель
45aaf94b5f
Коммит
e4efe8dc5b
|
|
@ -75,10 +75,6 @@ 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"
|
||||
|
|
@ -93,10 +89,6 @@ 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,11 +36,6 @@ 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);
|
||||
}
|
||||
|
|
@ -110,16 +105,31 @@ export class ContentSection extends React.PureComponent {
|
|||
return (
|
||||
<div className="home-section">
|
||||
<div id="shortcuts-section" className="section">
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
<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
|
||||
|
|
@ -180,18 +190,30 @@ export class ContentSection extends React.PureComponent {
|
|||
{pocketRegion && (
|
||||
<div id="pocket-section" className="section">
|
||||
<label className="switch">
|
||||
<moz-toggle
|
||||
<input
|
||||
id="pocket-toggle"
|
||||
pressed={pocketEnabled || null}
|
||||
onToggle={this.onPreferenceSelect}
|
||||
checked={pocketEnabled}
|
||||
type="checkbox"
|
||||
onChange={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}>
|
||||
|
|
@ -242,16 +264,32 @@ export class ContentSection extends React.PureComponent {
|
|||
|
||||
<div id="recent-section" className="section">
|
||||
<label className="switch">
|
||||
<moz-toggle
|
||||
<input
|
||||
id="highlights-toggle"
|
||||
pressed={highlightsEnabled || null}
|
||||
onToggle={this.onPreferenceSelect}
|
||||
checked={highlightsEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
preference="feeds.section.highlights"
|
||||
eventSource="HIGHLIGHTS"
|
||||
data-l10n-id="newtab-custom-recent-toggle"
|
||||
data-l10n-attrs="label, description"
|
||||
aria-labelledby="custom-recent-title"
|
||||
aria-describedby="custom-recent-subtitle"
|
||||
/>
|
||||
<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,10 +111,27 @@
|
|||
padding: 0 16px;
|
||||
|
||||
.section {
|
||||
moz-toggle {
|
||||
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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -174,6 +191,64 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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,9 +1700,25 @@ main.has-snippet {
|
|||
grid-row-gap: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.home-section .section moz-toggle {
|
||||
.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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-section .section .subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-section .section .sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -1756,6 +1772,55 @@ 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,9 +1704,25 @@ main.has-snippet {
|
|||
grid-row-gap: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.home-section .section moz-toggle {
|
||||
.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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-section .section .subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-section .section .sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -1760,6 +1776,55 @@ 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,9 +1700,25 @@ main.has-snippet {
|
|||
grid-row-gap: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.home-section .section moz-toggle {
|
||||
.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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-section .section .subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-section .section .sponsored {
|
||||
font-size: 14px;
|
||||
margin-inline-start: 5px;
|
||||
|
|
@ -1756,6 +1772,55 @@ 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,7 +29,6 @@
|
|||
<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>
|
||||
|
|
@ -41,6 +40,5 @@
|
|||
</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,12 +14230,6 @@ 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);
|
||||
}
|
||||
|
|
@ -14306,15 +14300,31 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
id: "shortcuts-section",
|
||||
className: "section"
|
||||
}, /*#__PURE__*/external_React_default().createElement("moz-toggle", {
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
className: "switch"
|
||||
}, /*#__PURE__*/external_React_default().createElement("input", {
|
||||
id: "shortcuts-toggle",
|
||||
pressed: topSitesEnabled || null,
|
||||
onToggle: this.onPreferenceSelect,
|
||||
checked: topSitesEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
preference: "feeds.topsites",
|
||||
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", {
|
||||
"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", {
|
||||
className: "more-info-top-wrapper"
|
||||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "more-information",
|
||||
|
|
@ -14365,16 +14375,29 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
className: "section"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
className: "switch"
|
||||
}, /*#__PURE__*/external_React_default().createElement("moz-toggle", {
|
||||
}, /*#__PURE__*/external_React_default().createElement("input", {
|
||||
id: "pocket-toggle",
|
||||
pressed: pocketEnabled || null,
|
||||
onToggle: this.onPreferenceSelect,
|
||||
checked: pocketEnabled,
|
||||
type: "checkbox",
|
||||
onChange: 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"
|
||||
})), /*#__PURE__*/external_React_default().createElement("div", null, (mayHaveSponsoredStories || mayHaveRecentSaves) && /*#__PURE__*/external_React_default().createElement("div", {
|
||||
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", {
|
||||
className: "more-info-pocket-wrapper"
|
||||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "more-information",
|
||||
|
|
@ -14416,14 +14439,28 @@ class ContentSection extends (external_React_default()).PureComponent {
|
|||
className: "section"
|
||||
}, /*#__PURE__*/external_React_default().createElement("label", {
|
||||
className: "switch"
|
||||
}, /*#__PURE__*/external_React_default().createElement("moz-toggle", {
|
||||
}, /*#__PURE__*/external_React_default().createElement("input", {
|
||||
id: "highlights-toggle",
|
||||
pressed: highlightsEnabled || null,
|
||||
onToggle: this.onPreferenceSelect,
|
||||
checked: highlightsEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
preference: "feeds.section.highlights",
|
||||
eventSource: "HIGHLIGHTS",
|
||||
"data-l10n-id": "newtab-custom-recent-toggle",
|
||||
"data-l10n-attrs": "label, description"
|
||||
"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"
|
||||
}))), /*#__PURE__*/external_React_default().createElement("span", {
|
||||
className: "divider",
|
||||
role: "separator"
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@
|
|||
<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"
|
||||
|
|
@ -47,9 +43,5 @@
|
|||
<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,10 +20,6 @@
|
|||
<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"
|
||||
|
|
@ -36,9 +32,5 @@
|
|||
<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,10 +20,6 @@
|
|||
<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"
|
||||
|
|
@ -47,9 +43,5 @@
|
|||
<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,13 +279,11 @@ function assertCacheResultScalar(cacheResultScalar) {
|
|||
*/
|
||||
async function ensureCachedAboutHome(browser) {
|
||||
await SpecialPowers.spawn(browser, [], async () => {
|
||||
let syncScripts = Array.from(
|
||||
content.document.querySelectorAll("script:not([type='module'])")
|
||||
);
|
||||
Assert.ok(!!syncScripts.length, "There should be page scripts.");
|
||||
let [lastSyncScript] = syncScripts.reverse();
|
||||
let scripts = Array.from(content.document.querySelectorAll("script"));
|
||||
Assert.ok(!!scripts.length, "There should be page scripts.");
|
||||
let [lastScript] = scripts.reverse();
|
||||
Assert.equal(
|
||||
lastSyncScript.src,
|
||||
lastScript.src,
|
||||
"about:home?jscache",
|
||||
"Found about:home?jscache script tag, indicating the cached doc"
|
||||
);
|
||||
|
|
@ -333,10 +331,8 @@ async function ensureCachedAboutHome(browser) {
|
|||
*/
|
||||
async function ensureDynamicAboutHome(browser, expectedResultScalar) {
|
||||
await SpecialPowers.spawn(browser, [], async () => {
|
||||
let syncScripts = Array.from(
|
||||
content.document.querySelectorAll("script:not([type='module'])")
|
||||
);
|
||||
Assert.equal(syncScripts.length, 0, "There should be no page scripts.");
|
||||
let scripts = Array.from(content.document.querySelectorAll("script"));
|
||||
Assert.equal(scripts.length, 0, "There should be no page scripts.");
|
||||
|
||||
Assert.equal(
|
||||
Cu.waiveXrays(content).__FROM_STARTUP_CACHE__,
|
||||
|
|
|
|||
|
|
@ -44,13 +44,9 @@ test_newtab({
|
|||
"Customize Menu should be visible on screen"
|
||||
);
|
||||
|
||||
// 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")
|
||||
// Test that clicking the shortcuts toggle will make the section appear on the newtab page.
|
||||
let shortcutsSwitch = content.document.querySelector(
|
||||
"#shortcuts-section .switch"
|
||||
);
|
||||
Assert.ok(
|
||||
!Services.prefs.getBoolPref(TOPSITES_PREF),
|
||||
|
|
@ -64,13 +60,9 @@ 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
|
||||
//
|
||||
// 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")
|
||||
// Test that clicking the pocket toggle will make the pocket section appear on the newtab page
|
||||
let pocketSwitch = content.document.querySelector(
|
||||
"#pocket-section .switch"
|
||||
);
|
||||
Assert.ok(
|
||||
!Services.prefs.getBoolPref(TOPSTORIES_PREF),
|
||||
|
|
@ -84,13 +76,9 @@ 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.
|
||||
//
|
||||
// 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")
|
||||
// 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"
|
||||
);
|
||||
Assert.ok(
|
||||
!Services.prefs.getBoolPref(HIGHLIGHTS_PREF),
|
||||
|
|
|
|||
|
|
@ -253,10 +253,8 @@ newtab-error-fallback-refresh-link = Refresh page to try again.
|
|||
|
||||
## Customization Menu
|
||||
|
||||
newtab-custom-shortcuts-toggle =
|
||||
.label = Shortcuts
|
||||
.description = Sites you save or visit
|
||||
|
||||
newtab-custom-shortcuts-title = Shortcuts
|
||||
newtab-custom-shortcuts-subtitle = Sites you save or visit
|
||||
# Variables
|
||||
# $num (number) - Number of rows to display
|
||||
newtab-custom-row-selector =
|
||||
|
|
@ -265,13 +263,11 @@ newtab-custom-row-selector =
|
|||
*[other] { $num } rows
|
||||
}
|
||||
newtab-custom-sponsored-sites = Sponsored shortcuts
|
||||
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-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-sponsored = Sponsored stories
|
||||
newtab-custom-pocket-show-recent-saves = Show recent saves
|
||||
newtab-custom-recent-toggle =
|
||||
.label = Recent activity
|
||||
.description = A selection of recent sites and content
|
||||
newtab-custom-recent-title = Recent activity
|
||||
newtab-custom-recent-subtitle = A selection of recent sites and content
|
||||
newtab-custom-close-button = Close
|
||||
newtab-custom-settings = Manage more settings
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
# 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,
|
||||
),
|
||||
)
|
||||
Загрузка…
Ссылка в новой задаче