Bug 1746649 - Pocket newtab some new layout prefs r=gvn (16959a80) · Commits · The Tor Project / Applications / Tor Browser

browser/app/profile/firefox.js

+11 −0

Original line number	Diff line number	Diff line
		@@ -1514,7 +1514,18 @@ pref("browser.newtabpage.activity-stream.discoverystream.loadMore.enabled", fals
		pref("browser.newtabpage.activity-stream.discoverystream.lastCardMessage.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.newFooterSection.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.saveToPocketCard.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.includeDescriptions.enabled", true);
		pref("browser.newtabpage.activity-stream.discoverystream.compactGrid.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.compactImages.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.imageGradient.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.titleLines", 3);
		pref("browser.newtabpage.activity-stream.discoverystream.descLines", 3);
		pref("browser.newtabpage.activity-stream.discoverystream.readTime.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.newSponsoredLabel.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.essentialReadsHeader.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.editorsPicksHeader.enabled", false);
		pref("browser.newtabpage.activity-stream.discoverystream.spoc-positions", "2,4,11,20");

		pref("browser.newtabpage.activity-stream.discoverystream.spocs-endpoint", "");
		pref("browser.newtabpage.activity-stream.discoverystream.spocs-endpoint-query", "");
		pref("browser.newtabpage.activity-stream.discoverystream.sponsored-collections.enabled", false);

browser/components/newtab/content-src/components/CollapsibleSection/CollapsibleSection.jsx

+11 −2

Original line number	Diff line number	Diff line
		@@ -52,7 +52,7 @@ export class _CollapsibleSection extends React.PureComponent {
		menuButtonHover,
		showContextMenu,
		} = this.state;
		const { id, collapsed, learnMore, title } = this.props;
		const { id, collapsed, learnMore, title, subTitle } = this.props;
		const active = menuButtonHover \|\| showContextMenu;
		let bodyStyle;
		if (isAnimating && !collapsed) {
		@@ -64,6 +64,7 @@ export class _CollapsibleSection extends React.PureComponent {
		if (this.props.hideTitle) {
		titleStyle = { visibility: "hidden" };
		}
		const hasSubtitleClassName = subTitle ? `has-subtitle` : ``;
		return (
		<section
		className={`collapsible-section ${this.props.className}${
		@@ -73,7 +74,10 @@ export class _CollapsibleSection extends React.PureComponent {
		data-section-id={id}
		>
		<div className="section-top-bar">
		<h3 className="section-title-container" style={titleStyle}>
		<h3
		className={`section-title-container ${hasSubtitleClassName}`}
		style={titleStyle}
		>
		<span className="section-title">
		<FluentOrText message={title} />
		</span>
		@@ -86,6 +90,11 @@ export class _CollapsibleSection extends React.PureComponent {
		</span>
		)}
		</span>
		{subTitle && (
		<span className="section-sub-title">
		<FluentOrText message={subTitle} />
		</span>
		)}
		</h3>
		</div>
		<ErrorBoundary className="section-body-fallback">

browser/components/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss

+17 −0

Original line number	Diff line number	Diff line
		@@ -3,6 +3,16 @@

		.section-title-container {
		margin: 0;

		&.has-subtitle {
		display: flex;
		flex-direction: column;
		@media (min-width: $break-point-large) {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		}
		}
		}

		.section-title {
		@@ -36,6 +46,13 @@
		}
		}

		.section-sub-title {
		font-size: 14px;
		line-height: 16px;
		color: var(--newtab-text-secondary-color);
		opacity: 0.3;
		}

		.section-top-bar {
		min-height: 19px;
		margin-bottom: 13px;

browser/components/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

+38 −9

Original line number	Diff line number	Diff line
		@@ -158,6 +158,8 @@ export class _DiscoveryStreamBase extends React.PureComponent {
		link_text={component.header && component.header.link_text}
		link_url={component.header && component.header.link_url}
		icon={component.header && component.header.icon}
		essentialReadsHeader={component.essentialReadsHeader}
		editorsPicksHeader={component.editorsPicksHeader}
		/>
		);
		case "SectionTitle":
		@@ -209,7 +211,16 @@ export class _DiscoveryStreamBase extends React.PureComponent {
		dispatch={this.props.dispatch}
		items={component.properties.items}
		compact={component.properties.compact}
		include_descriptions={!component.properties.compact}
		includeDescriptions={component.properties.includeDescriptions}
		compactGrid={component.properties.compactGrid}
		compactImages={component.properties.compactImages}
		imageGradient={component.properties.imageGradient}
		newSponsoredLabel={component.properties.newSponsoredLabel}
		titleLines={component.properties.titleLines}
		descLines={component.properties.descLines}
		essentialReadsHeader={component.properties.essentialReadsHeader}
		editorsPicksHeader={component.properties.editorsPicksHeader}
		readTime={component.properties.readTime}
		loadMoreEnabled={component.loadMoreEnabled}
		lastCardMessageEnabled={component.lastCardMessageEnabled}
		saveToPocketCard={component.saveToPocketCard}
		@@ -234,11 +245,12 @@ export class _DiscoveryStreamBase extends React.PureComponent {
		}

		render() {
		const { locale } = this.props;
		// Select layout render data by adding spocs and position to recommendations
		const { layoutRender } = selectLayoutRender({
		state: this.props.DiscoveryStream,
		prefs: this.props.Prefs.values,
		locale: this.props.locale,
		locale,
		});
		const { config } = this.props.DiscoveryStream;

		@@ -282,7 +294,28 @@ export class _DiscoveryStreamBase extends React.PureComponent {
		title: topStories.title,
		},
		};

		const privacyLinkComponent = extractComponent("PrivacyLink");
		let learnMore = {
		link: {
		href: message.header.link_url,
		message: message.header.link_text,
		},
		};
		let sectionTitle = message.header.title;
		let subTitle = "";

		// If we're in one of these experiments, override the default message.
		// For now this is English only.
		if (message.essentialReadsHeader \|\| message.editorsPicksHeader) {
		learnMore = null;
		subTitle = "Recommended By Pocket";
		if (message.essentialReadsHeader) {
		sectionTitle = "Today’s Essential Reads";
		} else if (message.editorsPicksHeader) {
		sectionTitle = "Editor’s Picks";
		}
		}

		// Render a DS-style TopSites then the rest if any in a collapsible section
		return (
		@@ -311,15 +344,11 @@ export class _DiscoveryStreamBase extends React.PureComponent {
		dispatch={this.props.dispatch}
		id={topStories.id}
		isFixed={true}
		learnMore={{
		link: {
		href: message.header.link_url,
		message: message.header.link_text,
		},
		}}
		learnMore={learnMore}
		privacyNoticeURL={topStories.privacyNoticeURL}
		showPrefName={topStories.pref.feed}
		title={message.header.title}
		title={sectionTitle}
		subTitle={subTitle}
		eventSource="CARDGRID"
		>
		{this.renderLayout(layoutRender)}

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

+52 −10

Original line number	Diff line number	Diff line
		@@ -38,9 +38,35 @@ export class CardGrid extends React.PureComponent {
		);
		}

		renderDSSubHeader(title) {
		return (
		<div className="section-top-bar ds-sub-header">
		<h3 className="section-title-container">
		<span className="section-title">
		<FluentOrText message={title} />
		</span>
		</h3>
		</div>
		);
		}

		renderCards() {
		let { items } = this.props;
		const { lastCardMessageEnabled, loadMoreThreshold } = this.props;
		let { items, compact } = this.props;
		const {
		includeDescriptions,
		lastCardMessageEnabled,
		saveToPocketCard,
		loadMoreThreshold,
		compactGrid,
		compactImages,
		imageGradient,
		newSponsoredLabel,
		titleLines,
		descLines,
		readTime,
		essentialReadsHeader,
		editorsPicksHeader,
		} = this.props;
		let showLastCardMessage = lastCardMessageEnabled;
		if (this.showLoadMore) {
		items = loadMoreThreshold;
		@@ -65,6 +91,7 @@ export class CardGrid extends React.PureComponent {
		raw_image_src={rec.raw_image_src}
		word_count={rec.word_count}
		time_to_read={rec.time_to_read}
		displayReadTime={readTime}
		title={rec.title}
		excerpt={rec.excerpt}
		url={rec.url}
		@@ -72,7 +99,6 @@ export class CardGrid extends React.PureComponent {
		shim={rec.shim}
		type={this.props.type}
		context={rec.context}
		compact={this.props.compact}
		sponsor={rec.sponsor}
		sponsored_by_override={rec.sponsored_by_override}
		dispatch={this.props.dispatch}
		@@ -82,8 +108,13 @@ export class CardGrid extends React.PureComponent {
		bookmarkGuid={rec.bookmarkGuid}
		engagement={rec.engagement}
		display_engagement_labels={this.props.display_engagement_labels}
		include_descriptions={this.props.include_descriptions}
		saveToPocketCard={this.props.saveToPocketCard}
		includeDescriptions={includeDescriptions}
		saveToPocketCard={saveToPocketCard}
		compactImages={compactImages}
		imageGradient={imageGradient}
		newSponsoredLabel={newSponsoredLabel}
		titleLines={titleLines}
		descLines={descLines}
		cta={rec.cta}
		cta_variant={this.props.cta_variant}
		is_video={this.props.enable_video_playheads && rec.is_video}
		@@ -93,6 +124,17 @@ export class CardGrid extends React.PureComponent {
		);
		}

		// If we have both header, inject the second one after the second row.
		// For now this is English only.
		if (essentialReadsHeader && editorsPicksHeader) {
		// For compact second row is 8 cards, and regular it is 6 cards.
		if (compact) {
		cards.splice(8, 0, this.renderDSSubHeader("Editor’s Picks"));
		} else {
		cards.splice(6, 0, this.renderDSSubHeader("Editor’s Picks"));
		}
		}

		// Replace last card with "you are all caught up card"
		if (showLastCardMessage) {
		cards.splice(
		@@ -107,17 +149,17 @@ export class CardGrid extends React.PureComponent {
		? `ds-card-grid-${this.props.display_variant}`
		: ``;

		const compactClass = this.props.compact
		? `ds-card-grid-compact-variant`
		: ``;
		const compactClass = compact ? `ds-card-grid-compact-variant` : ``;

		const includeDescriptions = this.props.include_descriptions
		const includeDescriptionsClassName = includeDescriptions
		? `ds-card-grid-include-descriptions`
		: ``;

		const compactGridClassName = compactGrid ? `ds-card-grid-compact` : ``;

		return (
		<div
		className={`ds-card-grid ds-card-grid-${this.props.border} ${variantClass} ${compactClass} ${includeDescriptions}`}
		className={`ds-card-grid ds-card-grid-${this.props.border} ${variantClass} ${compactClass} ${includeDescriptionsClassName} ${compactGridClassName}`}
		>
		{cards}
		</div>