corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Backed out changeset f4841fd42927 (bug 1908163) for causing bc failures on browser_basic_endtoend.js

Browse Source
This commit is contained in:
Norisz Fay
2024-07-23 08:15:14 +03:00
parent 4359f6796b
commit 84d1b9f527
12 changed files with 97 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
browser/components/newtab/common/Actions.mjs
View File

@@ -48,7 +48,6 @@ for (const type of [
"DISCOVERY_STREAM_CONFIG_SET_VALUE",
"DISCOVERY_STREAM_DEV_EXPIRE_CACHE",
"DISCOVERY_STREAM_DEV_IDLE_DAILY",
"DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER",
"DISCOVERY_STREAM_DEV_SYNC_RS",
"DISCOVERY_STREAM_DEV_SYSTEM_TICK",
"DISCOVERY_STREAM_EXPERIMENT_DATA",

9
browser/components/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.jsx
View File

@@ -122,7 +122,6 @@ export class DiscoveryStreamAdminUI extends React.PureComponent {
this.setConfigValue = this.setConfigValue.bind(this);
this.expireCache = this.expireCache.bind(this);
this.refreshCache = this.refreshCache.bind(this);
this.showPlaceholder = this.showPlaceholder.bind(this);
this.idleDaily = this.idleDaily.bind(this);
this.systemTick = this.systemTick.bind(this);
this.syncRemoteSettings = this.syncRemoteSettings.bind(this);
@@ -178,10 +177,6 @@ export class DiscoveryStreamAdminUI extends React.PureComponent {
this.dispatchSimpleAction(at.DISCOVERY_STREAM_DEV_EXPIRE_CACHE);
}
showPlaceholder() {
this.dispatchSimpleAction(at.DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER);
}
idleDaily() {
this.dispatchSimpleAction(at.DISCOVERY_STREAM_DEV_IDLE_DAILY);
}
@@ -397,10 +392,6 @@ export class DiscoveryStreamAdminUI extends React.PureComponent {
<button className="button" onClick={this.syncRemoteSettings}>
Sync Remote Settings
</button>
<br />
<button className="button" onClick={this.showPlaceholder}>
Show Placeholder Cards
</button>
<table>
<tbody>
{prefToggles.map(pref => (

10
browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
View File

@@ -3,10 +3,18 @@ $col4-header-font-size: 14;
.ds-onboarding-container,
.ds-card-grid .ds-card {
background: var(--newtab-background-color-secondary);
@include dark-theme-only {
background: none;
}
background: $white;
border-radius: 4px;
&:not(.placeholder) {
@include dark-theme-only {
background: var(--newtab-background-color-secondary);
}
border-radius: $border-radius-new;
box-shadow: $shadow-card;

7
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
View File

@@ -488,12 +488,7 @@ export class _DSCard extends React.PureComponent {
render() {
if (this.props.placeholder || !this.state.isSeen) {
return (
<div className="ds-card placeholder" ref={this.setPlaceholderRef}>
<div className="placeholder-image placeholder-fill" />
<div className="placeholder-label placeholder-fill" />
<div className="placeholder-header placeholder-fill" />
<div className="placeholder-description placeholder-fill" />
</div>
<div className="ds-card placeholder" ref={this.setPlaceholderRef} />
);
}

67
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
View File

@@ -12,69 +12,10 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
position: relative;
&.placeholder {
display: flex;
flex-direction: column;
gap: var(--space-small);
box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
border-radius: var(--border-radius-medium);
position: relative;
overflow: hidden;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
inset-inline-start: -100%;
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0%) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0%) 100%);
@media (prefers-reduced-motion: no-preference) {
animation: loading 1.5s infinite;
}
}
.placeholder-fill {
background: var(--newtab-button-active-background);
border-radius: var(--border-radius-small);
}
.placeholder-image {
width: 100%;
height: 140px;
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.placeholder-label {
width: 40%;
height: var(--size-item-small);
margin-bottom: var(--space-small);
margin-inline: var(--space-large);
}
.placeholder-header {
width: 80%;
height: 20px;
margin-inline: var(--space-large);
}
.placeholder-description {
height: 60px;
margin-inline: var(--space-large);
margin-bottom: var(--space-large);
}
@keyframes loading {
0% {
inset-inline-start: -100%;
}
// We apply the same frame from 50-100% to account for a delay in a repeating animation.
50%, 100% {
inset-inline-start: 100%;
}
}
background: transparent;
box-shadow: inset $inner-box-shadow;
border-radius: 4px;
min-height: 300px;
}
.img-wrapper {

5
browser/components/newtab/content-src/lib/selectLayoutRender.mjs
View File

@@ -225,6 +225,7 @@ export const selectLayoutRender = ({ state = {}, prefs = {} }) => {
)) {
const spocsConfig = component.spocs;
if (spocsConfig || component.feed) {
// TODO make sure this still works for different loading cases.
if (
(component.feed && !feeds.data[component.feed.url]) ||
(spocsConfig &&
@@ -233,7 +234,9 @@ export const selectLayoutRender = ({ state = {}, prefs = {} }) => {
!spocs.loaded)
) {
components.push(placeholderComponent(component));
} else if (component.feed) {
return renderedLayoutArray;
}
if (component.feed) {
components.push(handleComponentWithFeed(component));
} else {
components.push(handleComponent(component));

69
browser/components/newtab/css/activity-stream-linux.css
View File

@@ -3591,14 +3591,22 @@ main section {
}
.ds-onboarding-container,
.ds-card-grid .ds-card {
background: var(--newtab-background-color-secondary);
background: #FFF;
border-radius: 4px;
}
[lwt-newtab-brighttext] .ds-onboarding-container,
[lwt-newtab-brighttext] .ds-card-grid .ds-card {
background: none;
}
.ds-onboarding-container:not(.placeholder),
.ds-card-grid .ds-card:not(.placeholder) {
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
[lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder),
[lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) {
background: var(--newtab-background-color-secondary);
}
.ds-onboarding-container:not(.placeholder) .img-wrapper .img img,
.ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image,
.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img img,
@@ -4380,61 +4388,10 @@ main section {
position: relative;
}
.ds-card.placeholder {
display: flex;
flex-direction: column;
gap: var(--space-small);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius-medium);
position: relative;
overflow: hidden;
}
.ds-card.placeholder::before {
content: "";
display: block;
position: absolute;
top: 0;
inset-inline-start: -100%;
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
.ds-card.placeholder::before {
animation: loading 1.5s infinite;
}
}
.ds-card.placeholder .placeholder-fill {
background: var(--newtab-button-active-background);
border-radius: var(--border-radius-small);
}
.ds-card.placeholder .placeholder-image {
width: 100%;
height: 140px;
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.ds-card.placeholder .placeholder-label {
width: 40%;
height: var(--size-item-small);
margin-bottom: var(--space-small);
margin-inline: var(--space-large);
}
.ds-card.placeholder .placeholder-header {
width: 80%;
height: 20px;
margin-inline: var(--space-large);
}
.ds-card.placeholder .placeholder-description {
height: 60px;
margin-inline: var(--space-large);
margin-bottom: var(--space-large);
}
@keyframes loading {
0% {
inset-inline-start: -100%;
}
50%, 100% {
inset-inline-start: 100%;
}
background: transparent;
box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
border-radius: 4px;
min-height: 300px;
}
.ds-card .img-wrapper {
width: 100%;

69
browser/components/newtab/css/activity-stream-mac.css
View File

@@ -3595,14 +3595,22 @@ main section {
}
.ds-onboarding-container,
.ds-card-grid .ds-card {
background: var(--newtab-background-color-secondary);
background: #FFF;
border-radius: 4px;
}
[lwt-newtab-brighttext] .ds-onboarding-container,
[lwt-newtab-brighttext] .ds-card-grid .ds-card {
background: none;
}
.ds-onboarding-container:not(.placeholder),
.ds-card-grid .ds-card:not(.placeholder) {
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
[lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder),
[lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) {
background: var(--newtab-background-color-secondary);
}
.ds-onboarding-container:not(.placeholder) .img-wrapper .img img,
.ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image,
.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img img,
@@ -4384,61 +4392,10 @@ main section {
position: relative;
}
.ds-card.placeholder {
display: flex;
flex-direction: column;
gap: var(--space-small);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius-medium);
position: relative;
overflow: hidden;
}
.ds-card.placeholder::before {
content: "";
display: block;
position: absolute;
top: 0;
inset-inline-start: -100%;
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
.ds-card.placeholder::before {
animation: loading 1.5s infinite;
}
}
.ds-card.placeholder .placeholder-fill {
background: var(--newtab-button-active-background);
border-radius: var(--border-radius-small);
}
.ds-card.placeholder .placeholder-image {
width: 100%;
height: 140px;
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.ds-card.placeholder .placeholder-label {
width: 40%;
height: var(--size-item-small);
margin-bottom: var(--space-small);
margin-inline: var(--space-large);
}
.ds-card.placeholder .placeholder-header {
width: 80%;
height: 20px;
margin-inline: var(--space-large);
}
.ds-card.placeholder .placeholder-description {
height: 60px;
margin-inline: var(--space-large);
margin-bottom: var(--space-large);
}
@keyframes loading {
0% {
inset-inline-start: -100%;
}
50%, 100% {
inset-inline-start: 100%;
}
background: transparent;
box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
border-radius: 4px;
min-height: 300px;
}
.ds-card .img-wrapper {
width: 100%;

69
browser/components/newtab/css/activity-stream-windows.css
View File

@@ -3591,14 +3591,22 @@ main section {
}
.ds-onboarding-container,
.ds-card-grid .ds-card {
background: var(--newtab-background-color-secondary);
background: #FFF;
border-radius: 4px;
}
[lwt-newtab-brighttext] .ds-onboarding-container,
[lwt-newtab-brighttext] .ds-card-grid .ds-card {
background: none;
}
.ds-onboarding-container:not(.placeholder),
.ds-card-grid .ds-card:not(.placeholder) {
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
[lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder),
[lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) {
background: var(--newtab-background-color-secondary);
}
.ds-onboarding-container:not(.placeholder) .img-wrapper .img img,
.ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image,
.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img img,
@@ -4380,61 +4388,10 @@ main section {
position: relative;
}
.ds-card.placeholder {
display: flex;
flex-direction: column;
gap: var(--space-small);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius-medium);
position: relative;
overflow: hidden;
}
.ds-card.placeholder::before {
content: "";
display: block;
position: absolute;
top: 0;
inset-inline-start: -100%;
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
.ds-card.placeholder::before {
animation: loading 1.5s infinite;
}
}
.ds-card.placeholder .placeholder-fill {
background: var(--newtab-button-active-background);
border-radius: var(--border-radius-small);
}
.ds-card.placeholder .placeholder-image {
width: 100%;
height: 140px;
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.ds-card.placeholder .placeholder-label {
width: 40%;
height: var(--size-item-small);
margin-bottom: var(--space-small);
margin-inline: var(--space-large);
}
.ds-card.placeholder .placeholder-header {
width: 80%;
height: 20px;
margin-inline: var(--space-large);
}
.ds-card.placeholder .placeholder-description {
height: 60px;
margin-inline: var(--space-large);
margin-bottom: var(--space-large);
}
@keyframes loading {
0% {
inset-inline-start: -100%;
}
50%, 100% {
inset-inline-start: 100%;
}
background: transparent;
box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
border-radius: 4px;
min-height: 300px;
}
.ds-card .img-wrapper {
width: 100%;

25
browser/components/newtab/data/content/activity-stream.bundle.js
View File

@@ -121,7 +121,6 @@ for (const type of [
"DISCOVERY_STREAM_CONFIG_SET_VALUE",
"DISCOVERY_STREAM_DEV_EXPIRE_CACHE",
"DISCOVERY_STREAM_DEV_IDLE_DAILY",
"DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER",
"DISCOVERY_STREAM_DEV_SYNC_RS",
"DISCOVERY_STREAM_DEV_SYSTEM_TICK",
"DISCOVERY_STREAM_EXPERIMENT_DATA",
@@ -674,7 +673,6 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent {
this.setConfigValue = this.setConfigValue.bind(this);
this.expireCache = this.expireCache.bind(this);
this.refreshCache = this.refreshCache.bind(this);
this.showPlaceholder = this.showPlaceholder.bind(this);
this.idleDaily = this.idleDaily.bind(this);
this.systemTick = this.systemTick.bind(this);
this.syncRemoteSettings = this.syncRemoteSettings.bind(this);
@@ -720,9 +718,6 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent {
expireCache() {
this.dispatchSimpleAction(actionTypes.DISCOVERY_STREAM_DEV_EXPIRE_CACHE);
}
showPlaceholder() {
this.dispatchSimpleAction(actionTypes.DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER);
}
idleDaily() {
this.dispatchSimpleAction(actionTypes.DISCOVERY_STREAM_DEV_IDLE_DAILY);
}
@@ -873,10 +868,7 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent {
}, "Trigger Idle Daily"), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("button", {
className: "button",
onClick: this.syncRemoteSettings
}, "Sync Remote Settings"), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("button", {
className: "button",
onClick: this.showPlaceholder
}, "Show Placeholder Cards"), /*#__PURE__*/external_React_default().createElement("table", null, /*#__PURE__*/external_React_default().createElement("tbody", null, prefToggles.map(pref => /*#__PURE__*/external_React_default().createElement(Row, {
}, "Sync Remote Settings"), /*#__PURE__*/external_React_default().createElement("table", null, /*#__PURE__*/external_React_default().createElement("tbody", null, prefToggles.map(pref => /*#__PURE__*/external_React_default().createElement(Row, {
key: pref
}, /*#__PURE__*/external_React_default().createElement("td", null, /*#__PURE__*/external_React_default().createElement(TogglePrefCheckbox, {
checked: config[pref],
@@ -3165,15 +3157,7 @@ class _DSCard extends (external_React_default()).PureComponent {
return /*#__PURE__*/external_React_default().createElement("div", {
className: "ds-card placeholder",
ref: this.setPlaceholderRef
}, /*#__PURE__*/external_React_default().createElement("div", {
className: "placeholder-image placeholder-fill"
}), /*#__PURE__*/external_React_default().createElement("div", {
className: "placeholder-label placeholder-fill"
}), /*#__PURE__*/external_React_default().createElement("div", {
className: "placeholder-header placeholder-fill"
}), /*#__PURE__*/external_React_default().createElement("div", {
className: "placeholder-description placeholder-fill"
}));
});
}
const {
isRecentSave,
@@ -8885,6 +8869,7 @@ const selectLayoutRender = ({ state = {}, prefs = {} }) => {
)) {
const spocsConfig = component.spocs;
if (spocsConfig || component.feed) {
// TODO make sure this still works for different loading cases.
if (
(component.feed && !feeds.data[component.feed.url]) ||
(spocsConfig &&
@@ -8893,7 +8878,9 @@ const selectLayoutRender = ({ state = {}, prefs = {} }) => {
!spocs.loaded)
) {
components.push(placeholderComponent(component));
} else if (component.feed) {
return renderedLayoutArray;
}
if (component.feed) {
components.push(handleComponentWithFeed(component));
} else {
components.push(handleComponent(component));

11
browser/components/newtab/lib/DiscoveryStreamFeed.sys.mjs
View File

@@ -1920,17 +1920,6 @@ export class DiscoveryStreamFeed {
// we want to be able to expire just content to trigger the earlier expire times.
await this.resetContentCache();
break;
case at.DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER: {
// We want to display the loading state permanently, for dev purposes.
// We do this by resetting everything, loading the layout, and nothing else.
// This essentially hangs because we never triggered the content load.
await this.reset();
this.loadLayout(
a => this.store.dispatch(ac.BroadcastToContent(a)),
false
);
break;
}
case at.DISCOVERY_STREAM_CONFIG_SET_VALUE:
// Use the original string pref to then set a value instead of
// this.config which has some modifications

34
browser/components/newtab/test/unit/content-src/lib/selectLayoutRender.test.js
View File

@@ -297,6 +297,40 @@ describe("selectLayoutRender", () => {
assert.equal(recommendations[2].pos, 2);
assert.equal(recommendations[3].pos, undefined);
});
it("should stop rendering feeds if we hit one that's not ready", () => {
const fakeLayout = [
{
width: 3,
components: [
{ type: "foo1" },
{ type: "foo2", properties: { items: 3 }, feed: { url: "foo2.com" } },
{ type: "foo3", properties: { items: 3 }, feed: { url: "foo3.com" } },
{ type: "foo4", properties: { items: 3 }, feed: { url: "foo4.com" } },
{ type: "foo5" },
],
},
];
store.dispatch({
type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
data: { layout: fakeLayout },
});
store.dispatch({
type: at.DISCOVERY_STREAM_FEED_UPDATE,
data: { feed: { data: { recommendations: [] } }, url: "foo2.com" },
});
const { layoutRender } = selectLayoutRender({
state: store.getState().DiscoveryStream,
});
assert.equal(layoutRender[0].components[0].type, "foo1");
assert.equal(layoutRender[0].components[1].type, "foo2");
assert.isTrue(
layoutRender[0].components[2].data.recommendations[0].placeholder
);
assert.lengthOf(layoutRender[0].components, 3);
assert.isUndefined(layoutRender[0].components[3]);
});
it("should render everything if everything is ready", () => {
const fakeLayout = [
{