Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 16:55:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset aa0a5591f010 (bug 1643780) for bc failures on browser_resource_uri.js. CLOSED TREE

Browse Source
This commit is contained in:
Cosmin Sabou 2020-06-24 02:33:01 +03:00
parent 30e138debd
commit 065961eddc
7 changed files with 54 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
browser/components/newtab/aboutwelcome/AboutWelcomeChild.jsm
View File

@ -137,10 +137,6 @@ class AboutWelcomeChild extends JSWindowActorChild {
defineAs: "AWGetImportableSites",
});
Cu.exportFunction(this.AWSelectTheme.bind(this), window, {
defineAs: "AWSelectTheme",
});
Cu.exportFunction(this.AWSendEventTelemetry.bind(this), window, {
defineAs: "AWSendEventTelemetry",
});
@ -173,12 +169,6 @@ class AboutWelcomeChild extends JSWindowActorChild {
);
}
AWSelectTheme(data) {
return this.wrapPromise(
this.sendQuery("AWPage:SELECT_THEME", data.toUpperCase())
);
}
/**
* Send initial data to page including experiment information
*/

10
browser/components/newtab/aboutwelcome/AboutWelcomeParent.jsm
View File

@ -12,7 +12,6 @@ const { XPCOMUtils } = ChromeUtils.import(
);
XPCOMUtils.defineLazyModuleGetters(this, {
AddonManager: "resource://gre/modules/AddonManager.jsm",
FxAccounts: "resource://gre/modules/FxAccounts.jsm",
MigrationUtils: "resource:///modules/MigrationUtils.jsm",
OS: "resource://gre/modules/osfile.jsm",
@ -43,11 +42,6 @@ const AWTerminate = {
APP_SHUT_DOWN: "app-shut-down",
ADDRESS_BAR_NAVIGATED: "address-bar-navigated",
};
const LIGHT_WEIGHT_THEMES = {
DARK: "firefox-compact-dark@mozilla.org",
LIGHT: "firefox-compact-light@mozilla.org",
DEFAULT: "default-theme@mozilla.org",
};
async function getImportableSites() {
const sites = [];
@ -193,10 +187,6 @@ class AboutWelcomeParent extends JSWindowActorParent {
this.AboutWelcomeObserver.terminateReason =
AWTerminate.ADDRESS_BAR_NAVIGATED;
break;
case "AWPage:SELECT_THEME":
return AddonManager.getAddonByID(
LIGHT_WEIGHT_THEMES[data]
).then(addon => addon.enable());
case "AWPage:WAIT_FOR_MIGRATION_CLOSE":
return new Promise(resolve =>
Services.ww.registerNotification(function observer(subject, topic) {

79
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
View File

@ -384,29 +384,18 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
});
}
highlightTheme(theme) {
const themes = document.querySelectorAll("button.theme");
themes.forEach(function (element) {
element.classList.remove("selected");
if (element.value === theme) {
element.classList.add("selected");
}
});
}
async handleAction(event) {
let {
props
} = this;
let targetContent = props.content[event.currentTarget.value] || props.content.tiles;
let targetContent = props.content[event.target.value];
if (!(targetContent && targetContent.action)) {
return;
} // Send telemetry before waiting on actions
_lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__["AboutWelcomeUtils"].sendActionTelemetry(props.messageId, event.currentTarget.value);
_lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__["AboutWelcomeUtils"].sendActionTelemetry(props.messageId, event.target.value);
let {
action
} = targetContent;
@ -420,12 +409,6 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
await window.AWWaitForMigrationClose();
_lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__["AboutWelcomeUtils"].sendActionTelemetry(props.messageId, "migrate_close");
}
} // A special tiles.action.theme value indicates we should use the event's value vs provided value.
if (action.theme) {
this.highlightTheme(event.currentTarget.value);
window.AWSelectTheme(action.theme === "<event>" ? event.currentTarget.value : action.theme);
}
if (action.navigate) {
@ -448,47 +431,23 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
}
renderTiles() {
switch (this.props.content.tiles.type) {
case "topsites":
return this.props.topSites ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "tiles-topsites-section"
}, this.props.topSites.slice(0, 5).map(({
icon,
label
}) => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "site",
key: icon + label
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "icon",
style: icon ? {
backgroundColor: "transparent",
backgroundImage: `url(${icon})`
} : {}
}, icon ? "" : label[0].toUpperCase()), label && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "host"
}, label)))) : null;
case "theme":
return this.props.content.tiles.data ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "tiles-theme-section"
}, this.props.content.tiles.data.map(({
theme,
label
}) => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", {
className: "theme",
key: theme + label,
value: theme,
onClick: this.handleAction
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: `icon ${theme}`
}), label && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
text: label
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "text"
}))))) : null;
}
return null;
return this.props.content.tiles && this.props.topSites ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "tiles-section"
}, this.props.topSites.slice(0, 5).map(({
icon,
label
}) => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "site",
key: icon + label
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "icon",
style: icon ? {
backgroundColor: "transparent",
backgroundImage: `url(${icon})`
} : {}
}, icon ? "" : label[0].toUpperCase()), label && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "host"
}, label)))) : null;
}
renderStepsIndicator() {

55
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
View File

@ -305,52 +305,17 @@ body {
margin: 0 6px;
color: var(--grey-subtitle-1);
line-height: 28px; }
.multistageContainer .tiles-theme-section {
display: flex;
margin: 10px auto; }
.multistageContainer .tiles-theme-section .theme {
display: flex;
flex-direction: column;
padding: 0;
width: 180px;
height: 145px;
color: #000;
background-color: #FFF;
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
border-radius: 4px;
cursor: pointer;
margin-inline-end: 21px; }
.multistageContainer .tiles-theme-section .theme .icon {
background-size: cover;
height: 91px; }
.multistageContainer .tiles-theme-section .theme .icon.light {
background-image: url("chrome://mozapps/content/extensions/firefox-compact-light.svg"); }
.multistageContainer .tiles-theme-section .theme .icon.dark {
background-image: url("chrome://mozapps/content/extensions/firefox-compact-dark.svg"); }
.multistageContainer .tiles-theme-section .theme .text {
display: flex;
font-size: 14px;
font-weight: bold;
line-height: 22px;
margin-inline-start: 12px;
margin-top: 9px; }
.multistageContainer .tiles-theme-section .theme.selected {
outline: 4px solid #0090ED;
outline-offset: -4px; }
.multistageContainer .tiles-theme-section .theme:focus, .multistageContainer .tiles-theme-section .theme:active {
outline: 4px solid #0090ED;
outline-offset: -4px; }
.multistageContainer .tiles-topsites-section {
.multistageContainer .tiles-section {
display: grid;
grid-gap: 24px;
grid-template-columns: repeat(5, auto);
margin: 10px auto; }
@media (max-width: 610px) {
.multistageContainer .tiles-topsites-section {
.multistageContainer .tiles-section {
grid-template-columns: repeat(3, auto); } }
.multistageContainer .tiles-topsites-section .site {
.multistageContainer .tiles-section .site {
width: 96px; }
.multistageContainer .tiles-topsites-section .icon {
.multistageContainer .tiles-section .icon {
background-size: cover;
border-radius: 4px;
box-shadow: var(--newtab-card-shadow);
@ -359,21 +324,21 @@ body {
font-weight: bold;
height: 96px;
line-height: 96px; }
.multistageContainer .tiles-topsites-section .host {
.multistageContainer .tiles-section .host {
font-size: 12px;
line-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.multistageContainer .tiles-topsites-section .site:nth-child(1) .icon {
.multistageContainer .tiles-section .site:nth-child(1) .icon {
background-color: #7542E5; }
.multistageContainer .tiles-topsites-section .site:nth-child(2) .icon {
.multistageContainer .tiles-section .site:nth-child(2) .icon {
background-color: #952BB9; }
.multistageContainer .tiles-topsites-section .site:nth-child(3) .icon {
.multistageContainer .tiles-section .site:nth-child(3) .icon {
background-color: #E31587; }
.multistageContainer .tiles-topsites-section .site:nth-child(4) .icon {
.multistageContainer .tiles-section .site:nth-child(4) .icon {
background-color: #E25920; }
.multistageContainer .tiles-topsites-section .site:nth-child(5) .icon {
.multistageContainer .tiles-section .site:nth-child(5) .icon {
background-color: #0250BB; }
.multistageContainer button {
font-family: inherit;

56
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
View File

@ -41,7 +41,7 @@ body {
'Helvetica Neue', sans-serif;
font-size: 16px;
position: relative;
/* these two rules fix test failures in
/* these two rules fix test failures in
"browser_ext_themes_ntp_colors" & "browser_ext_themes_ntp_colors_perwindow".*/
color: var(--newtab-text-primary-color);
background-color: var(--newtab-background-color);
@ -303,59 +303,7 @@ body {
}
}
.tiles-theme-section {
display: flex;
margin: 10px auto;
.theme {
display: flex;
flex-direction: column;
padding: 0;
width: 180px;
height: 145px;
color: #000;
background-color: #FFF;
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
border-radius: 4px;
cursor: pointer;
margin-inline-end: 21px;
.icon {
background-size: cover;
height: 91px;
&.light {
background-image: url('chrome://mozapps/content/extensions/firefox-compact-light.svg');
}
&.dark {
background-image: url('chrome://mozapps/content/extensions/firefox-compact-dark.svg');
}
}
.text {
display: flex;
font-size: 14px;
font-weight: bold;
line-height: 22px;
margin-inline-start: 12px;
margin-top: 9px;
}
&.selected {
outline: 4px solid #0090ED;
outline-offset: -4px;
}
&:focus,
&:active {
outline: 4px solid #0090ED;
outline-offset: -4px;
}
}
}
.tiles-topsites-section {
.tiles-section {
$host-size: 12px;
$tile-size: 96px;

94
browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
View File

@ -125,33 +125,17 @@ export class WelcomeScreen extends React.PureComponent {
AboutWelcomeUtils.handleUserAction({ type, data });
}
highlightTheme(theme) {
const themes = document.querySelectorAll("button.theme");
themes.forEach(function(element) {
element.classList.remove("selected");
if (element.value === theme) {
element.classList.add("selected");
}
});
}
async handleAction(event) {
let { props } = this;
let targetContent =
props.content[event.currentTarget.value] || props.content.tiles;
let targetContent = props.content[event.target.value];
if (!(targetContent && targetContent.action)) {
return;
}
// Send telemetry before waiting on actions
AboutWelcomeUtils.sendActionTelemetry(
props.messageId,
event.currentTarget.value
);
AboutWelcomeUtils.sendActionTelemetry(props.messageId, event.target.value);
let { action } = targetContent;
if (action.type === "OPEN_URL") {
this.handleOpenURL(action, props.flowParams, props.UTMTerm);
} else if (action.type) {
@ -163,14 +147,6 @@ export class WelcomeScreen extends React.PureComponent {
}
}
// A special tiles.action.theme value indicates we should use the event's value vs provided value.
if (action.theme) {
this.highlightTheme(event.currentTarget.value);
window.AWSelectTheme(
action.theme === "<event>" ? event.currentTarget.value : action.theme
);
}
if (action.navigate) {
props.navigate();
}
@ -194,52 +170,28 @@ export class WelcomeScreen extends React.PureComponent {
}
renderTiles() {
switch (this.props.content.tiles.type) {
case "topsites":
return this.props.topSites ? (
<div className="tiles-topsites-section">
{this.props.topSites.slice(0, 5).map(({ icon, label }) => (
<div className="site" key={icon + label}>
<div
className="icon"
style={
icon
? {
backgroundColor: "transparent",
backgroundImage: `url(${icon})`,
}
: {}
}
>
{icon ? "" : label[0].toUpperCase()}
</div>
{label && <div className="host">{label}</div>}
</div>
))}
return this.props.content.tiles && this.props.topSites ? (
<div className="tiles-section">
{this.props.topSites.slice(0, 5).map(({ icon, label }) => (
<div className="site" key={icon + label}>
<div
className="icon"
style={
icon
? {
backgroundColor: "transparent",
backgroundImage: `url(${icon})`,
}
: {}
}
>
{icon ? "" : label[0].toUpperCase()}
</div>
{label && <div className="host">{label}</div>}
</div>
) : null;
case "theme":
return this.props.content.tiles.data ? (
<div className="tiles-theme-section">
{this.props.content.tiles.data.map(({ theme, label }) => (
<button
className="theme"
key={theme + label}
value={theme}
onClick={this.handleAction}
>
<div className={`icon ${theme}`} />
{label && (
<Localized text={label}>
<div className="text" />
</Localized>
)}
</button>
))}
</div>
) : null;
}
return null;
))}
</div>
) : null;
}
renderStepsIndicator() {

84
browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js
View File

@ -12,22 +12,6 @@ const TEST_MULTISTAGE_CONTENT = {
order: 0,
content: {
title: "Step 1",
tiles: {
type: "theme",
action: {
theme: "<event>",
},
data: [
{
theme: "test-theme-1",
label: "theme-1",
},
{
theme: "test-theme-2",
label: "theme-2",
},
],
},
primary_button: {
label: "Next",
action: {
@ -182,7 +166,6 @@ add_task(async function test_Multistage_About_Welcome_branches() {
"main.AW_STEP1",
"div.secondary-cta.top",
"button.secondary",
"button.theme",
"div.indicator.current",
],
// Unexpected selectors:
@ -414,70 +397,3 @@ add_task(async function test_AWMultistage_Secondary_Open_URL_Action() {
"secondary button click source recorded in Telemetry"
);
});
add_task(async function test_AWMultistage_Themes() {
let browser = await openAboutWelcome();
let aboutWelcomeActor = await getAboutWelcomeParent(browser);
const sandbox = sinon.createSandbox();
// Stub AboutWelcomeParent Content Message Handler
sandbox
.stub(aboutWelcomeActor, "onContentMessage")
.resolves("")
.withArgs("AWPage:IMPORTABLE_SITES")
.resolves([]);
registerCleanupFunction(() => {
sandbox.restore();
});
await ContentTask.spawn(browser, "Themes", async () => {
await ContentTaskUtils.waitForCondition(
() => content.document.querySelector("button.theme"),
"Theme Icons"
);
let themes = content.document.querySelectorAll("button.theme");
Assert.equal(themes.length, 2, "Two themes displayed");
});
await onButtonClick(browser, "button[value=test-theme-1]");
const { callCount } = aboutWelcomeActor.onContentMessage;
ok(callCount >= 1, `${callCount} Stub was called`);
let actionCall;
let eventCall;
for (let i = 0; i < callCount; i++) {
const call = aboutWelcomeActor.onContentMessage.getCall(i);
info(`Call #${i}: ${call.args[0]} ${JSON.stringify(call.args[1])}`);
if (call.calledWithMatch("SELECT_THEME")) {
actionCall = call;
} else if (call.calledWithMatch("", { event: "CLICK_BUTTON" })) {
eventCall = call;
}
}
Assert.equal(
actionCall.args[0],
"AWPage:SELECT_THEME",
"Got call to handle select theme"
);
Assert.equal(
actionCall.args[1],
"TEST-THEME-1",
"Theme value passed as TEST-THEME-1"
);
Assert.equal(
eventCall.args[0],
"AWPage:TELEMETRY_EVENT",
"Got call to handle Telemetry event when theme tile clicked"
);
Assert.equal(
eventCall.args[1].event,
"CLICK_BUTTON",
"click button event recorded in Telemetry"
);
Assert.equal(
eventCall.args[1].event_context.source,
"test-theme-1",
"test-theme-1 click source recorded in Telemetry"
);
});