commit fe245261056488655d56e5d1a24d7e2fb24a3c0f parent 9a8f7f22f9bb0ece723f908b4e358992f2d11d08 Author: Nina Pypchenko <npypchenko@mozilla.com> Date: Mon, 3 Nov 2025 01:43:26 +0000 Bug 1780052 - Remove DSTextPromo, DSSignup, DSDismiss components r=home-newtab-reviewers,frontend-codestyle-reviewers,reemhamz These components are no longer used on New Tab. DSDismiss was only used by DSTextPromo. Removed components, unit tests, and one Fluent string that was used by DSDismiss. Differential Revision: https://phabricator.services.mozilla.com/D270811 Diffstat:
17 files changed, 14 insertions(+), 1377 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx @@ -7,8 +7,6 @@ import { CollapsibleSection } from "content-src/components/CollapsibleSection/Co import { connect } from "react-redux"; import { DSMessage } from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage"; import { ReportContent } from "../DiscoveryStreamComponents/ReportContent/ReportContent"; -import { DSSignup } from "content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup"; -import { DSTextPromo } from "content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo"; import { Highlights } from "content-src/components/DiscoveryStreamComponents/Highlights/Highlights"; import { HorizontalRule } from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule"; import { Navigation } from "content-src/components/DiscoveryStreamComponents/Navigation/Navigation"; @@ -121,22 +119,6 @@ export class _DiscoveryStreamBase extends React.PureComponent { <TopSites isFixed={true} title={component.header?.title} /> </div> ); - case "TextPromo": - return ( - <DSTextPromo - dispatch={this.props.dispatch} - type={component.type} - data={component.data} - /> - ); - case "Signup": - return ( - <DSSignup - dispatch={this.props.dispatch} - type={component.type} - data={component.data} - /> - ); case "Message": return ( <DSMessage diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss.jsx @@ -1,56 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import React from "react"; - -export class DSDismiss extends React.PureComponent { - constructor(props) { - super(props); - this.onDismissClick = this.onDismissClick.bind(this); - this.onHover = this.onHover.bind(this); - this.offHover = this.offHover.bind(this); - this.state = { - hovering: false, - }; - } - - onDismissClick() { - if (this.props.onDismissClick) { - this.props.onDismissClick(); - } - } - - onHover() { - this.setState({ - hovering: true, - }); - } - - offHover() { - this.setState({ - hovering: false, - }); - } - - render() { - let className = `ds-dismiss - ${this.state.hovering ? ` hovering` : ``} - ${this.props.extraClasses ? ` ${this.props.extraClasses}` : ``}`; - - return ( - <div className={className}> - {this.props.children} - <button - className="ds-dismiss-button" - data-l10n-id="newtab-dismiss-button-tooltip" - onClick={this.onDismissClick} - onMouseEnter={this.onHover} - onMouseLeave={this.offHover} - > - <span className="icon icon-dismiss" /> - </button> - </div> - ); - } -} diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss @@ -1,47 +0,0 @@ -.ds-dismiss { - position: relative; - border-radius: var(--border-radius-medium); - transition-duration: 250ms; - transition-property: background; - - &:hover { - .ds-dismiss-button { - opacity: 1; - } - } - - .ds-dismiss-button { - cursor: pointer; - height: 32px; - width: 32px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - inset-inline-end: 0; - inset-block-start: 0; - border-radius: var(--border-radius-circle); - background-color: transparent; - - .icon { - @media (forced-colors: active) { - fill: CurrentColor; - } - - fill: var(--newtab-text-primary-color); - } - - &:hover { - background: var(--newtab-element-hover-color); - } - - &:active { - background: var(--newtab-element-active-color); - } - - &:focus { - box-shadow: $shadow-secondary; - } - } -} diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/_DSLinkMenu.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/_DSLinkMenu.scss @@ -1,5 +1,4 @@ -.ds-card, -.ds-signup { +.ds-card { @include context-menu-button; .context-menu { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.jsx @@ -1,168 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import { actionCreators as ac } from "common/Actions.mjs"; -import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu"; -import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton"; -import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats"; -import React from "react"; -import { SafeAnchor } from "../SafeAnchor/SafeAnchor"; - -export class DSSignup extends React.PureComponent { - constructor(props) { - super(props); - this.state = { - active: false, - lastItem: false, - }; - this.onMenuButtonUpdate = this.onMenuButtonUpdate.bind(this); - this.onLinkClick = this.onLinkClick.bind(this); - this.onMenuShow = this.onMenuShow.bind(this); - } - - onMenuButtonUpdate(showContextMenu) { - if (!showContextMenu) { - this.setState({ - active: false, - lastItem: false, - }); - } - } - - nextAnimationFrame() { - return new Promise(resolve => - this.props.windowObj.requestAnimationFrame(resolve) - ); - } - - async onMenuShow() { - let { lastItem } = this.state; - // Wait for next frame before computing scrollMaxX to allow fluent menu strings to be visible - await this.nextAnimationFrame(); - if (this.props.windowObj.scrollMaxX > 0) { - lastItem = true; - } - this.setState({ - active: true, - lastItem, - }); - } - - onLinkClick() { - const { data } = this.props; - if (this.props.dispatch && data && data.spocs && data.spocs.length) { - const source = this.props.type.toUpperCase(); - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - this.props.dispatch( - ac.DiscoveryStreamUserEvent({ - event: "CLICK", - source, - action_position: 0, - }) - ); - - this.props.dispatch( - ac.ImpressionStats({ - source, - click: 0, - tiles: [ - { - id: spoc.id, - pos: 0, - ...(spoc.shim && spoc.shim.click - ? { shim: spoc.shim.click } - : {}), - }, - ], - }) - ); - } - } - - render() { - const { data, dispatch, type } = this.props; - if (!data || !data.spocs || !data.spocs[0]) { - return null; - } - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - const { title, url, excerpt, flight_id, id, shim } = spoc; - - const SIGNUP_CONTEXT_MENU_OPTIONS = [ - "OpenInNewWindow", - "OpenInPrivateWindow", - "Separator", - "BlockUrl", - ...(flight_id ? ["ShowPrivacyInfo"] : []), - ]; - - const outerClassName = [ - "ds-signup", - this.state.active && "active", - this.state.lastItem && "last-item", - ] - .filter(v => v) - .join(" "); - - return ( - <div className={outerClassName}> - <div className="ds-signup-content"> - <span className="icon icon-small-spacer icon-mail"></span> - <span> - {title}{" "} - <SafeAnchor - className="ds-chevron-link" - dispatch={dispatch} - onLinkClick={this.onLinkClick} - url={url} - > - {excerpt} - </SafeAnchor> - </span> - <ImpressionStats - flightId={flight_id} - rows={[ - { - id, - pos: 0, - shim: shim && shim.impression, - }, - ]} - dispatch={dispatch} - source={type} - /> - </div> - <ContextMenuButton - tooltip={"newtab-menu-content-tooltip"} - tooltipArgs={{ title }} - onUpdate={this.onMenuButtonUpdate} - > - <LinkMenu - dispatch={dispatch} - index={0} - source={type.toUpperCase()} - onShow={this.onMenuShow} - options={SIGNUP_CONTEXT_MENU_OPTIONS} - shouldSendImpressionStats={true} - userEvent={ac.DiscoveryStreamUserEvent} - site={{ - referrer: "https://getpocket.com/recommendations", - title, - type, - url, - guid: id, - shim, - flight_id, - }} - /> - </ContextMenuButton> - </div> - ); - } -} - -DSSignup.defaultProps = { - windowObj: window, // Added to support unit tests -}; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.scss @@ -1,58 +0,0 @@ -.ds-signup { - max-width: 300px; - margin: 0 auto; - padding: var(--space-small); - position: relative; - text-align: center; - font-size: var(--font-size-large); - - /** - * @backward-compat { version 146 } - * - * Replace this with `--font-weight-semibold` once 146 hits release. - */ - font-weight: var(--heading-font-weight); - - &:hover { - background: var(--newtab-element-hover-color); - border-radius: var(--border-radius-small); - } - - .icon-mail { - height: 40px; - width: 40px; - margin-inline-end: var(--space-small); - fill: var(--newtab-text-secondary-color); - background-size: 30px; - flex-shrink: 0; - } - - .ds-signup-content { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - .ds-chevron-link { - margin-block-start: var(--space-xsmall); - box-shadow: none; - display: block; - white-space: nowrap; - } - } - - @media (min-width: $break-point-large) { - min-width: 756px; - width: max-content; - text-align: start; - - .ds-signup-content { - flex-direction: row; - - .ds-chevron-link { - margin-block-start: 0; - display: inline; - } - } - } -} diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo.jsx @@ -1,143 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import { actionCreators as ac } from "common/Actions.mjs"; -import { DSDismiss } from "content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss"; -import { DSImage } from "../DSImage/DSImage.jsx"; -import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats"; -import { LinkMenuOptions } from "content-src/lib/link-menu-options"; -import React from "react"; -import { SafeAnchor } from "../SafeAnchor/SafeAnchor"; - -export class DSTextPromo extends React.PureComponent { - constructor(props) { - super(props); - this.onLinkClick = this.onLinkClick.bind(this); - this.onDismissClick = this.onDismissClick.bind(this); - } - - onLinkClick() { - const { data } = this.props; - if (this.props.dispatch && data && data.spocs && data.spocs.length) { - const source = this.props.type.toUpperCase(); - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - this.props.dispatch( - ac.DiscoveryStreamUserEvent({ - event: "CLICK", - source, - action_position: 0, - }) - ); - - this.props.dispatch( - ac.ImpressionStats({ - source, - click: 0, - tiles: [ - { - id: spoc.id, - pos: 0, - ...(spoc.shim && spoc.shim.click - ? { shim: spoc.shim.click } - : {}), - }, - ], - }) - ); - } - } - - onDismissClick() { - const { data } = this.props; - if (this.props.dispatch && data && data.spocs && data.spocs.length) { - const index = 0; - const source = this.props.type.toUpperCase(); - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - const spocData = { - url: spoc.url, - guid: spoc.id, - shim: spoc.shim, - }; - const blockUrlOption = LinkMenuOptions.BlockUrl(spocData, index, source); - - const { action, impression, userEvent } = blockUrlOption; - - this.props.dispatch(action); - this.props.dispatch( - ac.DiscoveryStreamUserEvent({ - event: userEvent, - source, - action_position: index, - }) - ); - if (impression) { - this.props.dispatch(impression); - } - } - } - - render() { - const { data } = this.props; - if (!data || !data.spocs || !data.spocs[0]) { - return null; - } - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - const { - image_src, - raw_image_src, - alt_text, - title, - url, - context, - cta, - flight_id, - id, - shim, - } = spoc; - - return ( - <DSDismiss - onDismissClick={this.onDismissClick} - extraClasses={`ds-dismiss-ds-text-promo`} - > - <div className="ds-text-promo"> - <DSImage - alt_text={alt_text} - source={image_src} - rawSource={raw_image_src} - /> - <div className="text"> - <h3> - {`${title}\u2003`} - <SafeAnchor - className="ds-chevron-link" - dispatch={this.props.dispatch} - onLinkClick={this.onLinkClick} - url={url} - > - {cta} - </SafeAnchor> - </h3> - <p className="subtitle">{context}</p> - </div> - <ImpressionStats - flightId={flight_id} - rows={[ - { - id, - pos: 0, - shim: shim && shim.impression, - }, - ]} - dispatch={this.props.dispatch} - source={this.props.type} - /> - </div> - </DSDismiss> - ); - } -} diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss @@ -1,89 +0,0 @@ -.ds-dismiss-ds-text-promo { - max-width: 744px; - margin: auto; - overflow: hidden; - - &.hovering { - background: var(--newtab-element-hover-color); - } - - .ds-dismiss-button { - margin-inline: 0 var(--space-large); - margin-block: var(--space-large) 0; - } -} - -.ds-text-promo { - max-width: 640px; - margin: 0; - padding: var(--space-large); - - @media(min-width: $break-point-medium) { - display: flex; - margin: var(--space-large) var(--space-xlarge); - padding: 0; - padding-inline-end: var(--space-xxlarge); - } - - .ds-image { - width: 40px; - height: 40px; - flex-shrink: 0; - margin: 0 0 var(--space-large); - - @media(min-width: $break-point-medium) { - margin: var(--space-xsmall) var(--space-medium) 0 0; - } - - img { - border-radius: var(--border-radius-small); - } - } - - h3 { - color: var(--newtab-text-primary-color); - margin: 0; - font-weight: var(--heading-font-weight); - font-size: inherit; - } - - .subtitle { - font-size: var(--font-size-small); - margin: 0; - color: var(--newtab-text-primary-color); - } -} - -.ds-chevron-link { - color: var(--newtab-primary-action-background); - display: inline-block; - outline: 0; - - &:hover { - text-decoration: underline; - } - - &:active { - color: var(--newtab-primary-element-active-color); - - &::after { - background-color: var(--newtab-primary-element-active-color); - } - } - - &:focus { - box-shadow: $shadow-secondary; - border-radius: var(--border-radius-small); - } - - &::after { - background-color: var(--newtab-primary-action-background); - content: ' '; - mask: url('chrome://global/skin/icons/arrow-right-12.svg') 0 -8px no-repeat; - margin: 0 0 0 var(--space-xsmall); - width: 5px; - height: 8px; - text-decoration: none; - display: inline-block; - } -} diff --git a/browser/extensions/newtab/content-src/lib/selectLayoutRender.mjs b/browser/extensions/newtab/content-src/lib/selectLayoutRender.mjs @@ -51,9 +51,7 @@ export const selectLayoutRender = ({ state = {}, prefs = {} }) => { const positions = {}; const DS_COMPONENTS = [ "Message", - "TextPromo", "SectionTitle", - "Signup", "Navigation", "Widgets", "CardGrid", @@ -108,7 +106,7 @@ export const selectLayoutRender = ({ state = {}, prefs = {} }) => { const placeholderComponent = component => { if (!component.feed) { - // TODO we now need a placeholder for topsites and textPromo. + // TODO we now need a placeholder for topsites. return { ...component, data: { diff --git a/browser/extensions/newtab/content-src/styles/activity-stream.scss b/browser/extensions/newtab/content-src/styles/activity-stream.scss @@ -183,13 +183,10 @@ input { @import '../components/DiscoveryStreamComponents/DSCard/DSCard'; @import '../components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter'; @import '../components/DiscoveryStreamComponents/DSImage/DSImage'; -@import '../components/DiscoveryStreamComponents/DSDismiss/DSDismiss'; @import '../components/DiscoveryStreamComponents/DSMessage/DSMessage'; @import '../components/DiscoveryStreamImpressionStats/ImpressionStats'; @import '../components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState'; -@import '../components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo'; @import '../components/DiscoveryStreamComponents/DSThumbsUpDownButtons/DSThumbsUpDownButtons'; -@import '../components/DiscoveryStreamComponents/DSSignup/DSSignup'; @import '../components/DiscoveryStreamComponents/PrivacyLink/PrivacyLink'; @import '../components/DiscoveryStreamComponents/TopicsWidget/TopicsWidget'; @import '../components/DiscoveryStreamComponents/FeatureHighlight/FeatureHighlight'; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -7151,8 +7151,7 @@ dialog::after { width: var(--rightPanelIconWidth); } -.ds-card .context-menu-button, -.ds-signup .context-menu-button { +.ds-card .context-menu-button { background-clip: padding-box; background-color: var(--newtab-button-background); background-image: url("chrome://global/skin/icons/more.svg"); @@ -7174,50 +7173,40 @@ dialog::after { transition-property: transform, opacity; width: 27px; } -.ds-card .context-menu-button:is(:active, :focus-visible, :hover), -.ds-signup .context-menu-button:is(:active, :focus-visible, :hover) { +.ds-card .context-menu-button:is(:active, :focus-visible, :hover) { opacity: 1; transform: scale(1); } -.ds-card .context-menu-button:is(:hover), -.ds-signup .context-menu-button:is(:hover) { +.ds-card .context-menu-button:is(:hover) { background-color: var(--newtab-button-hover-background); } -.ds-card .context-menu-button:is(:focus-visible), -.ds-signup .context-menu-button:is(:focus-visible) { +.ds-card .context-menu-button:is(:focus-visible) { outline-color: var(--newtab-button-focus-border); background-color: var(--newtab-button-focus-background); outline-width: 4px; } -.ds-card .context-menu-button:is(:active), -.ds-signup .context-menu-button:is(:active) { +.ds-card .context-menu-button:is(:active) { background-color: var(--newtab-button-active-background); } -.ds-card .context-menu, -.ds-signup .context-menu { +.ds-card .context-menu { opacity: 0; } -.ds-card.active .context-menu, -.ds-signup.active .context-menu { +.ds-card.active .context-menu { opacity: 1; } -.ds-card.last-item .context-menu, -.ds-signup.last-item .context-menu { +.ds-card.last-item .context-menu { margin-inline-end: var(--space-xsmall); margin-inline-start: auto; inset-inline-end: 0; inset-inline-start: auto; } -.ds-card.last-item .context-menu, -.ds-signup.last-item .context-menu { +.ds-card.last-item .context-menu { opacity: 1; } -.ds-card:is(:hover, :focus, .active), -.ds-signup:is(:hover, :focus, .active) { +.ds-card:is(:hover, :focus, .active) { outline: none; } -.ds-card:is(:hover, :focus, .active) .context-menu-button, -.ds-signup:is(:hover, :focus, .active) .context-menu-button { +.ds-card:is(:hover, :focus, .active) .context-menu-button { opacity: 1; transform: scale(1); transition-delay: 333ms; @@ -7918,47 +7907,6 @@ dialog::after { background-size: var(--placeholderBackgroundScale); } -.ds-dismiss { - position: relative; - border-radius: var(--border-radius-medium); - transition-duration: 250ms; - transition-property: background; -} -.ds-dismiss:hover .ds-dismiss-button { - opacity: 1; -} -.ds-dismiss .ds-dismiss-button { - cursor: pointer; - height: 32px; - width: 32px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - inset-inline-end: 0; - inset-block-start: 0; - border-radius: var(--border-radius-circle); - background-color: transparent; -} -.ds-dismiss .ds-dismiss-button .icon { - fill: var(--newtab-text-primary-color); -} -@media (forced-colors: active) { - .ds-dismiss .ds-dismiss-button .icon { - fill: CurrentColor; - } -} -.ds-dismiss .ds-dismiss-button:hover { - background: var(--newtab-element-hover-color); -} -.ds-dismiss .ds-dismiss-button:active { - background: var(--newtab-element-active-color); -} -.ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); -} - .ds-message { margin: var(--space-small) 0 0; } @@ -8084,87 +8032,6 @@ dialog::after { transform: rotate(360deg); } } -.ds-dismiss-ds-text-promo { - max-width: 744px; - margin: auto; - overflow: hidden; -} -.ds-dismiss-ds-text-promo.hovering { - background: var(--newtab-element-hover-color); -} -.ds-dismiss-ds-text-promo .ds-dismiss-button { - margin-inline: 0 var(--space-large); - margin-block: var(--space-large) 0; -} - -.ds-text-promo { - max-width: 640px; - margin: 0; - padding: var(--space-large); -} -@media (min-width: 610px) { - .ds-text-promo { - display: flex; - margin: var(--space-large) var(--space-xlarge); - padding: 0; - padding-inline-end: var(--space-xxlarge); - } -} -.ds-text-promo .ds-image { - width: 40px; - height: 40px; - flex-shrink: 0; - margin: 0 0 var(--space-large); -} -@media (min-width: 610px) { - .ds-text-promo .ds-image { - margin: var(--space-xsmall) var(--space-medium) 0 0; - } -} -.ds-text-promo .ds-image img { - border-radius: var(--border-radius-small); -} -.ds-text-promo h3 { - color: var(--newtab-text-primary-color); - margin: 0; - font-weight: var(--heading-font-weight); - font-size: inherit; -} -.ds-text-promo .subtitle { - font-size: var(--font-size-small); - margin: 0; - color: var(--newtab-text-primary-color); -} - -.ds-chevron-link { - color: var(--newtab-primary-action-background); - display: inline-block; - outline: 0; -} -.ds-chevron-link:hover { - text-decoration: underline; -} -.ds-chevron-link:active { - color: var(--newtab-primary-element-active-color); -} -.ds-chevron-link:active::after { - background-color: var(--newtab-primary-element-active-color); -} -.ds-chevron-link:focus { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); - border-radius: var(--border-radius-small); -} -.ds-chevron-link::after { - background-color: var(--newtab-primary-action-background); - content: " "; - mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat; - margin: 0 0 0 var(--space-xsmall); - width: 5px; - height: 8px; - text-decoration: none; - display: inline-block; -} - .card-stp-thumbs-buttons-wrapper { margin-block-start: var(--space-medium); visibility: hidden; @@ -8275,59 +8142,6 @@ dialog::after { margin-block-end: 0; } -.ds-signup { - max-width: 300px; - margin: 0 auto; - padding: var(--space-small); - position: relative; - text-align: center; - font-size: var(--font-size-large); - /** - * @backward-compat { version 146 } - * - * Replace this with `--font-weight-semibold` once 146 hits release. - */ - font-weight: var(--heading-font-weight); -} -.ds-signup:hover { - background: var(--newtab-element-hover-color); - border-radius: var(--border-radius-small); -} -.ds-signup .icon-mail { - height: 40px; - width: 40px; - margin-inline-end: var(--space-small); - fill: var(--newtab-text-secondary-color); - background-size: 30px; - flex-shrink: 0; -} -.ds-signup .ds-signup-content { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} -.ds-signup .ds-signup-content .ds-chevron-link { - margin-block-start: var(--space-xsmall); - box-shadow: none; - display: block; - white-space: nowrap; -} -@media (min-width: 866px) { - .ds-signup { - min-width: 756px; - width: max-content; - text-align: start; - } - .ds-signup .ds-signup-content { - flex-direction: row; - } - .ds-signup .ds-signup-content .ds-chevron-link { - margin-block-start: 0; - display: inline; - } -} - .ds-privacy-link { text-align: center; font-size: var(--font-size-small); diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -5883,323 +5883,6 @@ const ReportContent = spocs => { className: "submit-report-btn" })))); }; -;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.jsx -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - - - - - - - -class DSSignup extends (external_React_default()).PureComponent { - constructor(props) { - super(props); - this.state = { - active: false, - lastItem: false - }; - this.onMenuButtonUpdate = this.onMenuButtonUpdate.bind(this); - this.onLinkClick = this.onLinkClick.bind(this); - this.onMenuShow = this.onMenuShow.bind(this); - } - onMenuButtonUpdate(showContextMenu) { - if (!showContextMenu) { - this.setState({ - active: false, - lastItem: false - }); - } - } - nextAnimationFrame() { - return new Promise(resolve => this.props.windowObj.requestAnimationFrame(resolve)); - } - async onMenuShow() { - let { - lastItem - } = this.state; - // Wait for next frame before computing scrollMaxX to allow fluent menu strings to be visible - await this.nextAnimationFrame(); - if (this.props.windowObj.scrollMaxX > 0) { - lastItem = true; - } - this.setState({ - active: true, - lastItem - }); - } - onLinkClick() { - const { - data - } = this.props; - if (this.props.dispatch && data && data.spocs && data.spocs.length) { - const source = this.props.type.toUpperCase(); - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - this.props.dispatch(actionCreators.DiscoveryStreamUserEvent({ - event: "CLICK", - source, - action_position: 0 - })); - this.props.dispatch(actionCreators.ImpressionStats({ - source, - click: 0, - tiles: [{ - id: spoc.id, - pos: 0, - ...(spoc.shim && spoc.shim.click ? { - shim: spoc.shim.click - } : {}) - }] - })); - } - } - render() { - const { - data, - dispatch, - type - } = this.props; - if (!data || !data.spocs || !data.spocs[0]) { - return null; - } - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - const { - title, - url, - excerpt, - flight_id, - id, - shim - } = spoc; - const SIGNUP_CONTEXT_MENU_OPTIONS = ["OpenInNewWindow", "OpenInPrivateWindow", "Separator", "BlockUrl", ...(flight_id ? ["ShowPrivacyInfo"] : [])]; - const outerClassName = ["ds-signup", this.state.active && "active", this.state.lastItem && "last-item"].filter(v => v).join(" "); - return /*#__PURE__*/external_React_default().createElement("div", { - className: outerClassName - }, /*#__PURE__*/external_React_default().createElement("div", { - className: "ds-signup-content" - }, /*#__PURE__*/external_React_default().createElement("span", { - className: "icon icon-small-spacer icon-mail" - }), /*#__PURE__*/external_React_default().createElement("span", null, title, " ", /*#__PURE__*/external_React_default().createElement(SafeAnchor, { - className: "ds-chevron-link", - dispatch: dispatch, - onLinkClick: this.onLinkClick, - url: url - }, excerpt)), /*#__PURE__*/external_React_default().createElement(ImpressionStats_ImpressionStats, { - flightId: flight_id, - rows: [{ - id, - pos: 0, - shim: shim && shim.impression - }], - dispatch: dispatch, - source: type - })), /*#__PURE__*/external_React_default().createElement(ContextMenuButton, { - tooltip: "newtab-menu-content-tooltip", - tooltipArgs: { - title - }, - onUpdate: this.onMenuButtonUpdate - }, /*#__PURE__*/external_React_default().createElement(LinkMenu, { - dispatch: dispatch, - index: 0, - source: type.toUpperCase(), - onShow: this.onMenuShow, - options: SIGNUP_CONTEXT_MENU_OPTIONS, - shouldSendImpressionStats: true, - userEvent: actionCreators.DiscoveryStreamUserEvent, - site: { - referrer: "https://getpocket.com/recommendations", - title, - type, - url, - guid: id, - shim, - flight_id - } - }))); - } -} -DSSignup.defaultProps = { - windowObj: window // Added to support unit tests -}; -;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss.jsx -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - - -class DSDismiss extends (external_React_default()).PureComponent { - constructor(props) { - super(props); - this.onDismissClick = this.onDismissClick.bind(this); - this.onHover = this.onHover.bind(this); - this.offHover = this.offHover.bind(this); - this.state = { - hovering: false - }; - } - onDismissClick() { - if (this.props.onDismissClick) { - this.props.onDismissClick(); - } - } - onHover() { - this.setState({ - hovering: true - }); - } - offHover() { - this.setState({ - hovering: false - }); - } - render() { - let className = `ds-dismiss - ${this.state.hovering ? ` hovering` : ``} - ${this.props.extraClasses ? ` ${this.props.extraClasses}` : ``}`; - return /*#__PURE__*/external_React_default().createElement("div", { - className: className - }, this.props.children, /*#__PURE__*/external_React_default().createElement("button", { - className: "ds-dismiss-button", - "data-l10n-id": "newtab-dismiss-button-tooltip", - onClick: this.onDismissClick, - onMouseEnter: this.onHover, - onMouseLeave: this.offHover - }, /*#__PURE__*/external_React_default().createElement("span", { - className: "icon icon-dismiss" - }))); - } -} -;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo.jsx -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - - - - - - - - -class DSTextPromo extends (external_React_default()).PureComponent { - constructor(props) { - super(props); - this.onLinkClick = this.onLinkClick.bind(this); - this.onDismissClick = this.onDismissClick.bind(this); - } - onLinkClick() { - const { - data - } = this.props; - if (this.props.dispatch && data && data.spocs && data.spocs.length) { - const source = this.props.type.toUpperCase(); - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - this.props.dispatch(actionCreators.DiscoveryStreamUserEvent({ - event: "CLICK", - source, - action_position: 0 - })); - this.props.dispatch(actionCreators.ImpressionStats({ - source, - click: 0, - tiles: [{ - id: spoc.id, - pos: 0, - ...(spoc.shim && spoc.shim.click ? { - shim: spoc.shim.click - } : {}) - }] - })); - } - } - onDismissClick() { - const { - data - } = this.props; - if (this.props.dispatch && data && data.spocs && data.spocs.length) { - const index = 0; - const source = this.props.type.toUpperCase(); - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - const spocData = { - url: spoc.url, - guid: spoc.id, - shim: spoc.shim - }; - const blockUrlOption = LinkMenuOptions.BlockUrl(spocData, index, source); - const { - action, - impression, - userEvent - } = blockUrlOption; - this.props.dispatch(action); - this.props.dispatch(actionCreators.DiscoveryStreamUserEvent({ - event: userEvent, - source, - action_position: index - })); - if (impression) { - this.props.dispatch(impression); - } - } - } - render() { - const { - data - } = this.props; - if (!data || !data.spocs || !data.spocs[0]) { - return null; - } - // Grab the first item in the array as we only have 1 spoc position. - const [spoc] = data.spocs; - const { - image_src, - raw_image_src, - alt_text, - title, - url, - context, - cta, - flight_id, - id, - shim - } = spoc; - return /*#__PURE__*/external_React_default().createElement(DSDismiss, { - onDismissClick: this.onDismissClick, - extraClasses: `ds-dismiss-ds-text-promo` - }, /*#__PURE__*/external_React_default().createElement("div", { - className: "ds-text-promo" - }, /*#__PURE__*/external_React_default().createElement(DSImage, { - alt_text: alt_text, - source: image_src, - rawSource: raw_image_src - }), /*#__PURE__*/external_React_default().createElement("div", { - className: "text" - }, /*#__PURE__*/external_React_default().createElement("h3", null, `${title}\u2003`, /*#__PURE__*/external_React_default().createElement(SafeAnchor, { - className: "ds-chevron-link", - dispatch: this.props.dispatch, - onLinkClick: this.onLinkClick, - url: url - }, cta)), /*#__PURE__*/external_React_default().createElement("p", { - className: "subtitle" - }, context)), /*#__PURE__*/external_React_default().createElement(ImpressionStats_ImpressionStats, { - flightId: flight_id, - rows: [{ - id, - pos: 0, - shim: shim && shim.impression - }], - dispatch: this.props.dispatch, - source: this.props.type - }))); - } -} ;// CONCATENATED MODULE: ./content-src/lib/screenshot-utils.mjs /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, @@ -10759,9 +10442,7 @@ const selectLayoutRender = ({ state = {}, prefs = {} }) => { const positions = {}; const DS_COMPONENTS = [ "Message", - "TextPromo", "SectionTitle", - "Signup", "Navigation", "Widgets", "CardGrid", @@ -10816,7 +10497,7 @@ const selectLayoutRender = ({ state = {}, prefs = {} }) => { const placeholderComponent = component => { if (!component.feed) { - // TODO we now need a placeholder for topsites and textPromo. + // TODO we now need a placeholder for topsites. return { ...component, data: { @@ -13935,8 +13616,6 @@ function Widgets() { - - const ALLOWED_CSS_URL_PREFIXES = ["chrome://", "resource://", "https://img-getpocket.cdn.mozilla.net/"]; const DUMMY_CSS_SELECTOR = "DUMMY#CSS.SELECTOR"; @@ -14018,18 +13697,6 @@ class _DiscoveryStreamBase extends (external_React_default()).PureComponent { isFixed: true, title: component.header?.title })); - case "TextPromo": - return /*#__PURE__*/external_React_default().createElement(DSTextPromo, { - dispatch: this.props.dispatch, - type: component.type, - data: component.data - }); - case "Signup": - return /*#__PURE__*/external_React_default().createElement(DSSignup, { - dispatch: this.props.dispatch, - type: component.type, - data: component.data - }); case "Message": return /*#__PURE__*/external_React_default().createElement(DSMessage, { title: component.header && component.header.title, diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSDismiss.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSDismiss.test.jsx @@ -1,51 +0,0 @@ -import { DSDismiss } from "content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss"; -import React from "react"; -import { shallow } from "enzyme"; - -describe("<DSDismiss>", () => { - const fakeSpoc = { - url: "https://foo.com", - guid: "1234", - }; - let wrapper; - let sandbox; - let onDismissClickStub; - - beforeEach(() => { - sandbox = sinon.createSandbox(); - onDismissClickStub = sandbox.stub(); - wrapper = shallow( - <DSDismiss - data={fakeSpoc} - onDismissClick={onDismissClickStub} - shouldSendImpressionStats={true} - /> - ); - }); - - afterEach(() => { - sandbox.restore(); - }); - - it("should render", () => { - assert.ok(wrapper.exists()); - assert.ok(wrapper.find(".ds-dismiss").exists()); - }); - - it("should render proper hover state", () => { - wrapper.instance().onHover(); - assert.ok(wrapper.find(".hovering").exists()); - wrapper.instance().offHover(); - assert.ok(!wrapper.find(".hovering").exists()); - }); - - it("should dispatch call onDismissClick", () => { - wrapper.instance().onDismissClick(); - assert.calledOnce(onDismissClickStub); - }); - - it("should add extra classes", () => { - wrapper = shallow(<DSDismiss extraClasses="extra-class" />); - assert.ok(wrapper.find(".extra-class").exists()); - }); -}); diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSSignup.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSSignup.test.jsx @@ -1,92 +0,0 @@ -import { DSSignup } from "content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup"; -import React from "react"; -import { shallow } from "enzyme"; - -describe("<DSSignup>", () => { - let wrapper; - let sandbox; - let dispatchStub; - - beforeEach(() => { - sandbox = sinon.createSandbox(); - dispatchStub = sandbox.stub(); - wrapper = shallow( - <DSSignup - data={{ - spocs: [ - { - shim: { impression: "1234" }, - id: "1234", - }, - ], - }} - type="SIGNUP" - dispatch={dispatchStub} - /> - ); - }); - - afterEach(() => { - sandbox.restore(); - }); - - it("should render", () => { - assert.ok(wrapper.exists()); - assert.ok(wrapper.find(".ds-signup").exists()); - }); - - it("should dispatch a click event on click", () => { - wrapper.instance().onLinkClick(); - - assert.calledTwice(dispatchStub); - assert.deepEqual(dispatchStub.firstCall.args[0].data, { - event: "CLICK", - source: "SIGNUP", - action_position: 0, - }); - assert.deepEqual(dispatchStub.secondCall.args[0].data, { - source: "SIGNUP", - click: 0, - tiles: [{ id: "1234", pos: 0 }], - }); - }); - - it("Should remove active on Menu Update", () => { - wrapper.setState = sandbox.stub(); - wrapper.instance().onMenuButtonUpdate(false); - assert.calledWith(wrapper.setState, { active: false, lastItem: false }); - }); - - it("Should add active on Menu Show", async () => { - wrapper.setState = sandbox.stub(); - wrapper.instance().nextAnimationFrame = () => {}; - await wrapper.instance().onMenuShow(); - assert.calledWith(wrapper.setState, { active: true, lastItem: false }); - }); - - it("Should add last-item to support resized window", async () => { - const fakeWindow = { scrollMaxX: "20" }; - wrapper = shallow(<DSSignup windowObj={fakeWindow} />); - wrapper.setState = sandbox.stub(); - wrapper.instance().nextAnimationFrame = () => {}; - await wrapper.instance().onMenuShow(); - assert.calledWith(wrapper.setState, { active: true, lastItem: true }); - }); - - it("Should add last-item and active classes", () => { - wrapper.setState({ - active: true, - lastItem: true, - }); - assert.ok(wrapper.find(".last-item").exists()); - assert.ok(wrapper.find(".active").exists()); - }); - - it("Should call rAF from nextAnimationFrame", () => { - const fakeWindow = { requestAnimationFrame: sinon.stub() }; - wrapper = shallow(<DSSignup windowObj={fakeWindow} />); - - wrapper.instance().nextAnimationFrame(); - assert.calledOnce(fakeWindow.requestAnimationFrame); - }); -}); diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx @@ -1,104 +0,0 @@ -import { DSTextPromo } from "content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo"; -import React from "react"; -import { shallow } from "enzyme"; - -describe("<DSTextPromo>", () => { - let wrapper; - let sandbox; - let dispatchStub; - - beforeEach(() => { - sandbox = sinon.createSandbox(); - dispatchStub = sandbox.stub(); - wrapper = shallow( - <DSTextPromo - data={{ - spocs: [ - { - shim: { impression: "1234" }, - id: "1234", - }, - ], - }} - type="TEXTPROMO" - dispatch={dispatchStub} - /> - ); - }); - - afterEach(() => { - sandbox.restore(); - }); - - it("should render", () => { - assert.ok(wrapper.exists()); - assert.ok(wrapper.find(".ds-text-promo").exists()); - }); - - it("should render a header", () => { - wrapper.setProps({ header: "foo" }); - assert.ok(wrapper.find(".text").exists()); - }); - - it("should render a subtitle", () => { - wrapper.setProps({ subtitle: "foo" }); - assert.ok(wrapper.find(".subtitle").exists()); - }); - - it("should dispatch a click event on click", () => { - wrapper.instance().onLinkClick(); - - assert.calledTwice(dispatchStub); - assert.deepEqual(dispatchStub.firstCall.args[0].data, { - event: "CLICK", - source: "TEXTPROMO", - action_position: 0, - }); - assert.deepEqual(dispatchStub.secondCall.args[0].data, { - source: "TEXTPROMO", - click: 0, - tiles: [{ id: "1234", pos: 0 }], - }); - }); - - it("should dispath telemety events on dismiss", () => { - wrapper.instance().onDismissClick(); - - const firstCall = dispatchStub.getCall(0); - const secondCall = dispatchStub.getCall(1); - const thirdCall = dispatchStub.getCall(2); - - assert.equal(firstCall.args[0].type, "BLOCK_URL"); - assert.deepEqual(firstCall.args[0].data, [ - { - url: undefined, - pocket_id: undefined, - tile_id: undefined, - recommendation_id: undefined, - scheduled_corpus_item_id: undefined, - corpus_item_id: undefined, - recommended_at: undefined, - received_rank: undefined, - isSponsoredTopSite: undefined, - type: undefined, - card_type: undefined, - position: 0, - is_pocket_card: false, - }, - ]); - - assert.equal(secondCall.args[0].type, "DISCOVERY_STREAM_USER_EVENT"); - assert.deepEqual(secondCall.args[0].data, { - event: "BLOCK", - source: "TEXTPROMO", - action_position: 0, - }); - - assert.equal(thirdCall.args[0].type, "TELEMETRY_IMPRESSION_STATS"); - assert.deepEqual(thirdCall.args[0].data, { - source: "TEXTPROMO", - block: 0, - tiles: [{ id: "1234", pos: 0 }], - }); - }); -}); diff --git a/browser/locales/en-US/browser/newtab/newtab.ftl b/browser/locales/en-US/browser/newtab/newtab.ftl @@ -95,11 +95,6 @@ newtab-menu-section-tooltip = .title = Open menu .aria-label = Open menu -# Tooltip for dismiss button -newtab-dismiss-button-tooltip = - .title = Remove - .aria-label = Remove - # This tooltip is for the context menu of Pocket cards or Topsites # Variables: # $title (string) - The label or hostname of the site. This is for screen readers when the context menu button is focused/active. diff --git a/stylelint-rollouts.config.js b/stylelint-rollouts.config.js @@ -141,7 +141,6 @@ module.exports = [ "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/_DSLinkMenu.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FeatureHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/HorizontalRule/_HorizontalRule.scss", @@ -1021,11 +1020,8 @@ module.exports = [ "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBanner/_AdBanner.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FeatureHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss", @@ -1255,7 +1251,6 @@ module.exports = [ "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSContextFooter/_DSContextFooter.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss", @@ -1465,8 +1460,6 @@ module.exports = [ "browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FeatureHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss",