AS Router Admin
{" "} Need help using these tools? Check out our{" "} documentation
{this.getSection()}
{headerId && }
{cards.map(card => (
{showCardPanel && (
)}
{cardsFirst ? cards : accounts}
{cardsFirst ? accounts : cards}
{content.header}
{content.title}
{this.renderText()}
{title}
) : null;
}
async onButtonClick() {
if (this.props.provider !== "preview") {
this.props.sendUserActionTelemetry({
event: "CLICK_BUTTON",
id: this.props.UISurface,
});
}
const { button_url } = this.props.content;
// If button_url is defined handle it as OPEN_URL action
const type = this.props.content.button_action || (button_url && "OPEN_URL");
await this.props.onAction({
type,
data: { args: this.props.content.button_action_args || button_url },
});
if (!this.props.content.do_not_autoblock) {
this.props.onBlock();
}
}
_shouldRenderButton() {
return (
this.props.content.button_action ||
this.props.onButtonClick ||
this.props.content.button_url
);
}
renderButton() {
const { props } = this;
if (!this._shouldRenderButton()) {
return null;
}
return (
);
}
render() {
const { props } = this;
let className = "SimpleBelowSearchSnippet";
let containerName = "below-search-snippet";
if (props.className) {
className += ` ${props.className}`;
}
if (this._shouldRenderButton()) {
className += " withButton";
containerName += " withButton";
}
return (
{this.renderTitle()}
{{this.renderText()}
{this.props.extraContent}{this.renderButton()}
}
{this.renderTitleIcon()} {title}
) : null; } renderTitleIcon() { const titleIconLight = safeURI(this.props.content.title_icon); const titleIconDark = safeURI( this.props.content.title_icon_dark_theme || this.props.content.title_icon ); if (!titleIconLight) { return null; } return ({children}
;
}
renderSectionHeader() {
const { props } = this;
// an icon and text must be specified to render the section header
if (props.content.section_title_icon && props.content.section_title_text) {
const sectionTitleIconLight = safeURI(props.content.section_title_icon);
const sectionTitleIconDark = safeURI(
props.content.section_title_icon_dark_theme ||
props.content.section_title_icon
);
const sectionTitleURL = props.content.section_title_url;
return (
{props.content.section_title_text}
{this.renderTitle()}
{{this.renderText()}
{this.props.extraContent}{this.renderButton()}
}
); } renderSignupSubmitted() { const { content } = this.props; const isSuccess = this.state.signupSuccess; const successTitle = isSuccess && content.success_title; const bodyText = isSuccess ? { success_text: content.success_text } : { error_text: content.error_text }; const retryButtonText = content.retry_button_label; return (
{successTitle ? (
{successTitle}
) : null}
{content.scene2_title && (
{content.scene2_title}
)}{" "} {content.scene2_text && (| Type | {component.type} | Width | {width} |
Feed url: {url}
| spocs_endpoint | {spocs.spocs_endpoint} | Data last fetched | {relativeTime(spocs.lastUpdated)} |
Spoc data
Spoc frequency caps
{storyData}
{" "}
{prefToggles.map(pref => (
{Object.keys(LAYOUT_VARIANTS).map(id => (
);
}
}
export class ASRouterAdminInner extends React.PureComponent {
constructor(props) {
super(props);
this.onMessage = this.onMessage.bind(this);
this.handleEnabledToggle = this.handleEnabledToggle.bind(this);
this.handleUserPrefToggle = this.handleUserPrefToggle.bind(this);
this.onChangeMessageFilter = this.onChangeMessageFilter.bind(this);
this.findOtherBundledMessagesOfSameTemplate = this.findOtherBundledMessagesOfSameTemplate.bind(
this
);
this.handleExpressionEval = this.handleExpressionEval.bind(this);
this.onChangeTargetingParameters = this.onChangeTargetingParameters.bind(
this
);
this.onChangeAttributionParameters = this.onChangeAttributionParameters.bind(
this
);
this.setAttribution = this.setAttribution.bind(this);
this.onCopyTargetingParams = this.onCopyTargetingParams.bind(this);
this.onPasteTargetingParams = this.onPasteTargetingParams.bind(this);
this.onNewTargetingParams = this.onNewTargetingParams.bind(this);
this.state = {
messageFilter: "all",
evaluationStatus: {},
trailhead: {},
stringTargetingParameters: null,
newStringTargetingParameters: null,
copiedToClipboard: false,
pasteFromClipboard: false,
attributionParameters: {
source: "addons.mozilla.org",
campaign: "non-fx-button",
content: "iridium@particlecore.github.io",
},
};
}
onMessage({ data: action }) {
if (action.type === "ADMIN_SET_STATE") {
this.setState(action.data);
if (!this.state.stringTargetingParameters) {
const stringTargetingParameters = {};
for (const param of Object.keys(action.data.targetingParameters)) {
stringTargetingParameters[param] = JSON.stringify(
action.data.targetingParameters[param],
null,
2
);
}
this.setState({ stringTargetingParameters });
}
}
}
componentWillMount() {
const endpoint = ASRouterUtils.getPreviewEndpoint();
ASRouterUtils.sendMessage({
type: "ADMIN_CONNECT_STATE",
data: { endpoint },
});
ASRouterUtils.addListener(this.onMessage);
}
componentWillUnmount() {
ASRouterUtils.removeListener(this.onMessage);
}
findOtherBundledMessagesOfSameTemplate(template) {
return this.state.messages.filter(
msg => msg.template === template && msg.bundled
);
}
handleBlock(msg) {
if (msg.bundled) {
// If we are blocking a message that belongs to a bundle, block all other messages that are bundled of that same template
let bundle = this.findOtherBundledMessagesOfSameTemplate(msg.template);
return () => ASRouterUtils.blockBundle(bundle);
}
return () => ASRouterUtils.blockById(msg.id);
}
handleUnblock(msg) {
if (msg.bundled) {
// If we are unblocking a message that belongs to a bundle, unblock all other messages that are bundled of that same template
let bundle = this.findOtherBundledMessagesOfSameTemplate(msg.template);
return () => ASRouterUtils.unblockBundle(bundle);
}
return () => ASRouterUtils.unblockById(msg.id);
}
handleOverride(id) {
return () => ASRouterUtils.overrideMessage(id);
}
expireCache() {
ASRouterUtils.sendMessage({ type: "EXPIRE_QUERY_CACHE" });
}
resetPref() {
ASRouterUtils.sendMessage({ type: "RESET_PROVIDER_PREF" });
}
handleExpressionEval() {
const context = {};
for (const param of Object.keys(this.state.stringTargetingParameters)) {
const value = this.state.stringTargetingParameters[param];
context[param] = value ? JSON.parse(value) : null;
}
ASRouterUtils.sendMessage({
type: "EVALUATE_JEXL_EXPRESSION",
data: {
expression: this.refs.expressionInput.value,
context,
},
});
}
onChangeTargetingParameters(event) {
const { name } = event.target;
const { value } = event.target;
this.setState(({ stringTargetingParameters }) => {
let targetingParametersError = null;
const updatedParameters = { ...stringTargetingParameters };
updatedParameters[name] = value;
try {
JSON.parse(value);
} catch (e) {
console.log(`Error parsing value of parameter ${name}`); // eslint-disable-line no-console
targetingParametersError = { id: name };
}
return {
copiedToClipboard: false,
evaluationStatus: {},
stringTargetingParameters: updatedParameters,
targetingParametersError,
};
});
}
handleEnabledToggle(event) {
const provider = this.state.providerPrefs.find(
p => p.id === event.target.dataset.provider
);
const userPrefInfo = this.state.userPrefs;
const isUserEnabled =
provider.id in userPrefInfo ? userPrefInfo[provider.id] : true;
const isSystemEnabled = provider.enabled;
const isEnabling = event.target.checked;
if (isEnabling) {
if (!isUserEnabled) {
ASRouterUtils.sendMessage({
type: "SET_PROVIDER_USER_PREF",
data: { id: provider.id, value: true },
});
}
if (!isSystemEnabled) {
ASRouterUtils.sendMessage({
type: "ENABLE_PROVIDER",
data: provider.id,
});
}
} else {
ASRouterUtils.sendMessage({
type: "DISABLE_PROVIDER",
data: provider.id,
});
}
this.setState({ messageFilter: "all" });
}
handleUserPrefToggle(event) {
const action = {
type: "SET_PROVIDER_USER_PREF",
data: { id: event.target.dataset.provider, value: event.target.checked },
};
ASRouterUtils.sendMessage(action);
this.setState({ messageFilter: "all" });
}
onChangeMessageFilter(event) {
this.setState({ messageFilter: event.target.value });
}
// Simulate a copy event that sets to clipboard all targeting paramters and values
onCopyTargetingParams(event) {
const stringTargetingParameters = {
...this.state.stringTargetingParameters,
};
for (const key of Object.keys(stringTargetingParameters)) {
// If the value is not set the parameter will be lost when we stringify
if (stringTargetingParameters[key] === undefined) {
stringTargetingParameters[key] = null;
}
}
const setClipboardData = e => {
e.preventDefault();
e.clipboardData.setData(
"text",
JSON.stringify(stringTargetingParameters, null, 2)
);
document.removeEventListener("copy", setClipboardData);
this.setState({ copiedToClipboard: true });
};
document.addEventListener("copy", setClipboardData);
document.execCommand("copy");
}
// Copy all clipboard data to targeting parameters
onPasteTargetingParams(event) {
this.setState(({ pasteFromClipboard }) => ({
pasteFromClipboard: !pasteFromClipboard,
newStringTargetingParameters: "",
}));
}
onNewTargetingParams(event) {
this.setState({ newStringTargetingParameters: event.target.value });
event.target.classList.remove("errorState");
this.refs.targetingParamsEval.innerText = "";
try {
const stringTargetingParameters = JSON.parse(event.target.value);
this.setState({ stringTargetingParameters });
} catch (e) {
event.target.classList.add("errorState");
this.refs.targetingParamsEval.innerText = e.message;
}
}
renderMessageItem(msg) {
const isBlocked =
this.state.messageBlockList.includes(msg.id) ||
this.state.messageBlockList.includes(msg.campaign);
const impressions = this.state.messageImpressions[msg.id]
? this.state.messageImpressions[msg.id].length
: 0;
let itemClassName = "message-item";
if (isBlocked) {
itemClassName += " blocked";
}
return (
|
|
Endpoint variant
You can also change this manually by changing this pref:{" "}
browser.newtabpage.activity-stream.discoverystream.config
| {id} | {LAYOUT_VARIANTS[id]} |
Caching info
| Data last fetched | {relativeTime(lastUpdated) || "(no data)"} |
Layout
{layout.map((row, rowIndex) => (
{row.components.map((component, componentIndex) => (
))}
{this.renderComponent(row.width, component)}
))}
Feeds Data
{this.renderFeedsData()}Spocs
{this.renderSpocs()}({impressions} impressions)
{JSON.stringify(msg, null, 2)}
{/* eslint-disable-next-line prettier/prettier */} Show messages from{" "} {/* eslint-disable-next-line jsx-a11y/no-onchange */}
); } renderTableHead() { return (| {isTestProvider ? ( ) : ( )} | {provider.id} | {label} | {provider.cohort} | {info.lastUpdated ? new Date(info.lastUpdated).toLocaleString() : ""} |
Evaluate JEXL expression |
|
|
Status:{" "} {success ? "✅" : "❌"}, Result: {result} |
|
Modify targeting parameters |
|
| {param} | {inputComp} |
{JSON.stringify(story, null, 2)}
| Enabled | {config.enabled ? "yes" : "no"} |
| Endpoint | {config.endpoint || "(empty)"} |
Attribution Parameters
{" "} This forces the browser to set some attribution parameters, useful for testing the Return To AMO feature. Clicking on 'Force Attribution', with the default values in each field, will demo the Return To AMO flow with the addon called 'Iridium for Youtube'. If you wish to try different attribution parameters, enter them in the text boxes. If you wish to try a different addon with the Return To AMO flow, make sure the 'content' text box has the addon GUID, then click 'Force Attribution'.
| Source | {" "} {" "} |
| Campaign | {" "} {" "} |
| Content | {" "} {" "} |
| {" "} {" "} |
| Provider ID | Message | Timestamp |
|---|
No errors
; } renderTrailheadInfo() { const { trailheadInterrupt, trailheadTriplet } = this.state.trailhead; return (| Interrupt branch | {trailheadInterrupt} |
| Triplet branch | {trailheadTriplet} |
Targeting Utilities
{" "} (This expires the cache in ASR Targeting for bookmarks and top sites) {this.renderTargetingParameters()} {this.renderAttributionParamers()}Discovery Stream
ASRouter Errors
{this.renderErrors()}Message Providers{" "}
{this.state.providers ? this.renderProviders() : null}Trailhead
{this.renderTrailheadInfo()}Messages
{this.renderMessageFilter()} {this.renderMessages()} {this.renderPasteModal()}
{isDiscoveryStream ? (
) : (
{hasImage && (
)}
{link.type === "download" && (
)}
{link.hostname && (
{link.hostname.slice(0, 100)}
{link.type === "download" && ` \u2014 ${link.description}`}
)}
{link.title}
{link.description}
{icon && !link.context && (
)}
{link.icon && link.context && (
)}
{fluentID && !link.context && (
)}
{link.context && (
{link.context}
)}
{/* Click-targets that toggle a collapsible section should have an aria-expanded attribute; see bug 1553234 */}
{this.renderIcon()}
)}
{this.props.children}
-
{this.props.options.map((option, i) =>
option.type === "separator" ? (
) : (
option.type !== "empty" && (
{component.type}
;
}
}
renderStyles(styles) {
// Use json string as both the key and styles to render so React knows when
// to unmount and mount a new instance for new styles.
const json = JSON.stringify(styles);
return ;
}
componentWillReceiveProps(oldProps) {
if (this.props.DiscoveryStream.layout !== oldProps.DiscoveryStream.layout) {
rollCache = [];
}
}
render() {
// Select layout render data by adding spocs and position to recommendations
const { layoutRender, spocsFill } = selectLayoutRender({
state: this.props.DiscoveryStream,
prefs: this.props.Prefs.values,
rollCache,
lang: this.props.document.documentElement.lang,
});
const { config, spocs, feeds } = this.props.DiscoveryStream;
// Send SPOCS Fill if any. Note that it should not send it again if the same
// page gets re-rendered by state changes.
if (
spocs.loaded &&
feeds.loaded &&
spocsFill.length &&
!this._spocsFillSent
) {
this.props.dispatch(
ac.DiscoveryStreamSpocsFill({ spoc_fills: spocsFill })
);
this._spocsFillSent = true;
}
// Allow rendering without extracting special components
if (!config.collapsible) {
return this.renderLayout(layoutRender);
}
// Find the first component of a type and remove it from layout
const extractComponent = type => {
for (const [rowIndex, row] of Object.entries(layoutRender)) {
for (const [index, component] of Object.entries(row.components)) {
if (component.type === type) {
// Remove the row if it was the only component or the single item
if (row.components.length === 1) {
layoutRender.splice(rowIndex, 1);
} else {
row.components.splice(index, 1);
}
return component;
}
}
}
return null;
};
// Get "topstories" Section state for default values
const topStories = this.props.Sections.find(s => s.id === "topstories");
if (!topStories) {
return null;
}
// Extract TopSites to render before the rest and Message to use for header
const topSites = extractComponent("TopSites");
const message = extractComponent("Message") || {
header: {
link_text: topStories.learnMore.link.message,
link_url: topStories.learnMore.link.href,
title: topStories.title,
},
};
// Render a DS-style TopSites then the rest if any in a collapsible section
return (
{layoutRender.map((row, rowIndex) => (
))}
{this.renderStyles(styles)}
);
}
}
export const DiscoveryStreamBase = connect(state => ({
DiscoveryStream: state.DiscoveryStream,
Prefs: state.Prefs,
Sections: state.Sections,
document: global.document,
}))(_DiscoveryStreamBase);
================================================
FILE: content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
================================================
$ds-width: 936px;
.discovery-stream.ds-layout {
$columns: 12;
--gridColumnGap: 48px;
--gridRowGap: 24px;
display: grid;
grid-template-columns: repeat($columns, 1fr);
grid-column-gap: var(--gridColumnGap);
grid-row-gap: var(--gridRowGap);
width: $ds-width;
margin: 0 auto;
@while $columns > 0 {
.ds-column-#{$columns} {
grid-column-start: auto;
grid-column-end: span $columns;
}
$columns: $columns - 1;
}
.ds-column-grid {
display: grid;
grid-row-gap: var(--gridRowGap);
}
}
.ds-header {
margin: 8px 0;
}
.ds-header,
.ds-layout .section-title span {
@include dark-theme-only {
color: $grey-30;
}
color: $grey-50;
font-size: 13px;
font-weight: 600;
line-height: 20px;
.icon {
fill: var(--newtab-text-secondary-color);
}
}
.collapsible-section.ds-layout {
margin: auto;
width: $ds-width + 2 * $section-horizontal-padding;
.section-top-bar {
.learn-more-link a {
color: var(--newtab-link-primary-color);
font-weight: normal;
&:-moz-any(:focus, :hover) {
text-decoration: underline;
}
}
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.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/. */
import { DSCard, PlaceholderDSCard } from "../DSCard/DSCard.jsx";
import { DSEmptyState } from "../DSEmptyState/DSEmptyState.jsx";
import React from "react";
export class CardGrid extends React.PureComponent {
renderCards() {
const recs = this.props.data.recommendations.slice(0, this.props.items);
const cards = [];
for (let index = 0; index < this.props.items; index++) {
const rec = recs[index];
cards.push(
!rec || rec.placeholder ? (
{row.components.map((component, componentIndex) => {
if (!component) {
return null;
}
styles[rowIndex] = [
...(styles[rowIndex] || []),
component.styles,
];
return (
{this.renderComponent(component, row.width)}
);
})}
{cards}
);
}
render() {
const { data } = this.props;
// Handle a render before feed has been fetched by displaying nothing
if (!data) {
return null;
}
// Handle the case where a user has dismissed all recommendations
const isEmpty = data.recommendations.length === 0;
return (
{this.props.title && (
);
}
}
CardGrid.defaultProps = {
border: `border`,
items: 4, // Number of stories to display
};
================================================
FILE: content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
================================================
$col4-header-line-height: 20;
$col4-header-font-size: 14;
.ds-card-grid {
display: grid;
grid-gap: 24px;
.ds-card {
@include dark-theme-only {
background: none;
}
background: $white;
border-radius: 4px;
}
.ds-card-link:focus {
@include ds-fade-in;
}
&.ds-card-grid-border {
.ds-card:not(.placeholder) {
@include dark-theme-only {
box-shadow: 0 1px 4px $shadow-10;
background: $grey-70;
}
box-shadow: 0 1px 4px 0 $grey-90-10;
.img-wrapper .img img {
border-radius: 4px 4px 0 0;
}
}
}
&.ds-card-grid-no-border {
.ds-card {
background: none;
.meta {
padding: 12px 0;
}
}
}
// "2/3 width layout"
.ds-column-5 &,
.ds-column-6 &,
.ds-column-7 &,
.ds-column-8 & {
grid-template-columns: repeat(2, 1fr);
}
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(4, 1fr);
&.ds-card-grid-divisible-by-3 {
grid-template-columns: repeat(3, 1fr);
.title {
font-size: 17px;
line-height: 24px;
}
.excerpt {
@include limit-visible-lines(3, 24, 15);
}
}
&.ds-card-grid-divisible-by-4 .title {
@include limit-visible-lines(3, 20, 15);
}
}
&.empty {
grid-template-columns: auto;
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/DSCard/DSCard.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/. */
import { actionCreators as ac } from "common/Actions.jsm";
import { DSImage } from "../DSImage/DSImage.jsx";
import { DSLinkMenu } from "../DSLinkMenu/DSLinkMenu";
import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats";
import React from "react";
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
import { DSContextFooter } from "../DSContextFooter/DSContextFooter.jsx";
// Default Meta that displays CTA as link if cta_variant in layout is set as "link"
export const DefaultMeta = ({
display_engagement_labels,
source,
title,
excerpt,
context,
context_type,
cta,
engagement,
cta_variant,
}) => (
{this.props.title}
)}
{isEmpty ? (
{source}
{excerpt}
} {cta_variant === "link" && cta && (
{cta}
)}
{sponsor ? sponsor : source} {context && ` · Sponsored`}
{excerpt}
}
{context &&
{!context &&
(context_type || (display_engagement_labels && engagement)) && (
{engagement && !context_type ? (
)}
);
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/DSContextFooter/_DSContextFooter.scss
================================================
$status-green: #058B00;
$status-dark-green: #7C6;
.story-footer {
color: var(--newtab-text-secondary-color);
inset-inline-start: 0;
margin-top: 12px;
position: relative;
.story-sponsored-label,
.story-view-count,
.status-message {
@include dark-theme-only {
color: $grey-40;
}
-webkit-line-clamp: 1;
font-size: 13px;
line-height: 24px;
color: $grey-50;
}
.status-message {
display: flex;
align-items: center;
height: 24px;
.story-badge-icon {
@include dark-theme-only {
fill: $grey-40;
}
fill: $grey-50;
height: 16px;
margin-inline-end: 6px;
&.icon-bookmark-removed {
background-image: url('#{$image-path}icon-removed-bookmark.svg');
}
}
.story-context-label {
@include dark-theme-only {
color: $grey-40;
}
color: $grey-50;
flex-grow: 1;
font-size: 13px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.story-animate-enter {
opacity: 0;
}
.story-animate-enter-active {
opacity: 1;
transition: opacity 150ms ease-in 300ms;
.story-badge-icon,
.story-context-label {
@include dark-theme-only {
animation: dark-color 3s ease-out 0.3s;
}
animation: color 3s ease-out 0.3s;
@keyframes color {
0% {
color: $status-green;
fill: $status-green;
}
100% {
color: $grey-50;
fill: $grey-50;
}
}
@keyframes dark-color {
0% {
color: $status-dark-green;
fill: $status-dark-green;
}
100% {
color: $grey-40;
fill: $grey-40;
}
}
}
}
.story-animate-exit {
position: absolute;
top: 0;
opacity: 1;
}
.story-animate-exit-active {
opacity: 0;
transition: opacity 250ms ease-in;
}
================================================
FILE: 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/. */
import { actionCreators as ac } from "common/Actions.jsm";
import React from "react";
import { LinkMenuOptions } from "content-src/lib/link-menu-options";
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() {
const index = 0;
const source = "DISCOVERY_STREAM";
const blockUrlOption = LinkMenuOptions.BlockUrl(
this.props.data,
index,
source
);
const { action, impression, userEvent } = blockUrlOption;
this.props.dispatch(action);
const userEventData = Object.assign(
{
event: userEvent,
source,
action_position: index,
},
this.props.data
);
this.props.dispatch(ac.UserEvent(userEventData));
if (impression && this.props.shouldSendImpressionStats) {
this.props.dispatch(impression);
}
}
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 (
{context}
}{engagement}
) : (
{this.props.children}
);
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss
================================================
.ds-dismiss {
position: relative;
overflow: hidden;
border-radius: 8px;
transition-delay: 100ms;
transition-duration: 200ms;
transition-property: background;
&.hovering {
@include dark-theme-only {
background: $grey-90-30;
}
background: $grey-90-10;
}
&:hover {
.ds-dismiss-button {
opacity: 1;
}
}
.ds-dismiss-button {
@include dark-theme-only {
background: $grey-90-30;
}
border: 0;
cursor: pointer;
height: 32px;
width: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
border-radius: 50%;
margin: 18px 18px 0 0;
background: $grey-90-10;
&:hover {
@include dark-theme-only {
background: $grey-90-50;
}
background: $grey-90-20;
}
&:active {
@include dark-theme-only {
background: $grey-90-70;
}
background: $grey-90-30;
}
&:focus {
@include dark-theme-only {
box-shadow: 0 0 0 2px $grey-80, 0 0 0 5px $blue-50-50;
}
box-shadow: 0 0 0 2px $white, 0 0 0 5px $blue-50-50;
}
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState.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/. */
import { actionCreators as ac, actionTypes as at } from "common/Actions.jsm";
import React from "react";
export class DSEmptyState extends React.PureComponent {
constructor(props) {
super(props);
this.onReset = this.onReset.bind(this);
this.state = {};
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
onReset() {
if (this.props.dispatch && this.props.feed) {
const { feed } = this.props;
const { url } = feed;
this.props.dispatch({
type: at.DISCOVERY_STREAM_FEED_UPDATE,
data: {
feed: {
...feed,
data: {
...feed.data,
status: "waiting",
},
},
url,
},
});
this.setState({ waiting: true });
this.timeout = setTimeout(() => {
this.timeout = null;
this.setState({
waiting: false,
});
}, 300);
this.props.dispatch(
ac.OnlyToMain({ type: at.DISCOVERY_STREAM_RETRY_FEED, data: { feed } })
);
}
}
renderButton() {
if (this.props.status === "waiting" || this.state.waiting) {
return (
);
}
return (
);
}
renderState() {
if (this.props.status === "waiting" || this.props.status === "failed") {
return (
{this.renderState()}
{`${this.props.header}\u2003`}
{this.props.cta_text}
{this.props.subtitle}
{heroRec.domain}
{heroRec.excerpt}
{heroCard}
);
}
render() {
const { data } = this.props;
// Handle a render before feed has been fetched by displaying nothing
if (!data || !data.recommendations) {
return ;
}
// Handle the case where a user has dismissed all recommendations
const isEmpty = data.recommendations.length === 0;
return (
{this.props.subComponentType === `cards` ? cards : list}
{this.props.title}
{isEmpty ? (
; } } ================================================ FILE: content-src/components/DiscoveryStreamComponents/HorizontalRule/_HorizontalRule.scss ================================================ .ds-hr { @include ds-border-top { border: 0; }; height: 0; } ================================================ FILE: content-src/components/DiscoveryStreamComponents/List/List.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/. */ import { actionCreators as ac } from "common/Actions.jsm"; import { connect } from "react-redux"; import { DSEmptyState } from "../DSEmptyState/DSEmptyState.jsx"; import { DSImage } from "../DSImage/DSImage.jsx"; import { DSLinkMenu } from "../DSLinkMenu/DSLinkMenu"; import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats"; import React from "react"; import { SafeAnchor } from "../SafeAnchor/SafeAnchor"; import { DSContextFooter } from "../DSContextFooter/DSContextFooter.jsx"; /** * @note exported for testing only */ export class ListItem extends React.PureComponent { // TODO performance: get feeds to send appropriately sized images rather // than waiting longer and scaling down on client? constructor(props) { super(props); this.onLinkClick = this.onLinkClick.bind(this); } onLinkClick(event) { if (this.props.dispatch) { this.props.dispatch( ac.UserEvent({ event: "CLICK", source: this.props.type.toUpperCase(), action_position: this.props.pos, value: { card_type: this.props.flightId ? "spoc" : "organic" }, }) ); this.props.dispatch( ac.ImpressionStats({ source: this.props.type.toUpperCase(), click: 0, tiles: [ { id: this.props.id, pos: this.props.pos, ...(this.props.shim && this.props.shim.click ? { shim: this.props.shim.click } : {}), }, ], }) ); } } render() { return (
{this.props.domain}
{this.props.title}
{this.props.excerpt && (
{this.props.excerpt}
)}
- {recMarkup}
{props.header && props.header.title ? (
);
}
_List.defaultProps = {
recStartingPoint: 0, // Index of recommendations to start displaying from
fullWidth: false, // Display items taking up the whole column
hasBorders: false, // Display lines separating each item
hasImages: false, // Display images for each item
hasNumbers: false, // Display numbers for each item
items: 6, // Number of stories to display. TODO: get from endpoint
};
export const List = connect(state => ({
DiscoveryStream: state.DiscoveryStream,
}))(_List);
================================================
FILE: content-src/components/DiscoveryStreamComponents/List/_List.scss
================================================
// Type sizes
$bordered-spacing: 16px;
$item-font-size: 14;
$item-image-size: 80px;
$item-line-height: 20;
// XXX this is gross, and attaches the bottom-border to the item above.
// Ideally, we'd attach the top-border to the item that needs it.
// Unfortunately the border needs to go _above_ the row gap as currently
// set up, which means that some refactoring will be required to do this.
@mixin bottom-border-except-last-grid-row($columns) {
.ds-list-item:not(.placeholder):not(:nth-last-child(-n+#{$columns})) {
@include ds-border-bottom;
margin-bottom: -1px; // cancel out the pixel we used for the border
padding-bottom: $bordered-spacing;
}
}
@mixin set-item-sizes($font-size, $line-height, $image-size) {
.ds-list-item {
// XXX see if we really want absolute units, maybe hoist somewhere central?
font-size: $font-size * 1px;
line-height: $line-height * 1px;
position: relative;
}
.ds-list-item-title {
@include limit-visible-lines(3, $line-height, $font-size);
}
.ds-list-image {
min-width: $image-size;
width: $image-size;
}
}
.ds-list {
display: grid;
grid-row-gap: 24px;
grid-column-gap: 24px;
// reset some stuff from {props.header.title}
) : null}
{isEmpty ? (
- . Should maybe be hoisted when we have better
// regression detection?
padding-inline-start: 0;
&:not(.ds-list-full-width) {
@include set-item-sizes($item-font-size, $item-line-height, $item-image-size);
// "2/3 width layout"
.ds-column-5 &,
.ds-column-6 &,
.ds-column-7 &,
.ds-column-8 & {
grid-template-columns: repeat(2, 1fr);
}
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(3, 1fr);
}
&.empty {
grid-template-columns: auto;
}
.ds-list-item-excerpt {
display: none;
}
}
&:not(.ds-list-images) {
.ds-list-image {
display: none;
}
}
a {
@include dark-theme-only {
color: $grey-10;
}
color: $grey-90;
}
}
.ds-list-item-link:focus {
@include ds-fade-in;
}
.ds-list-numbers {
$counter-whitespace: ($item-line-height - $item-font-size) * 1px;
$counter-size: 32px;
$counter-padded-size: $counter-size + $counter-whitespace * 1.5;
.ds-list-item {
counter-increment: list;
}
.ds-list-item:not(.placeholder) > .ds-list-item-link {
padding-inline-start: $counter-padded-size;
&::before {
@include dark-theme-only {
background-color: $teal-70;
}
background-color: $pocket-teal;
border-radius: $counter-size;
color: $white;
content: counter(list);
font-size: 17px;
height: $counter-size;
line-height: $counter-size;
margin-inline-start: -$counter-padded-size;
margin-top: $counter-whitespace / 2;
position: absolute;
text-align: center;
width: $counter-size;
}
&:hover::before {
@include dark-theme-only {
background-color: $blue-40;
}
background-color: $blue-40;
}
&:active::before {
@include dark-theme-only {
background-color: $blue-60;
}
background-color: $blue-70;
}
}
}
.ds-list-borders {
@include ds-border-top;
grid-row-gap: $bordered-spacing;
padding-top: $bordered-spacing;
&.ds-list-full-width,
.ds-column-1 &,
.ds-column-2 &,
.ds-column-3 &,
.ds-column-4 & {
@include bottom-border-except-last-grid-row(1);
}
&:not(.ds-list-full-width) {
// "2/3 width layout"
.ds-column-5 &,
.ds-column-6 &,
.ds-column-7 &,
.ds-column-8 & {
@include bottom-border-except-last-grid-row(2);
}
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
@include bottom-border-except-last-grid-row(3);
}
}
}
.ds-list-full-width {
@include set-item-sizes(17, 24, $item-image-size * 2);
}
.ds-list-item {
// reset some stuff from
- . Should maybe be hoisted when we have better // regression detection? display: block; text-align: start; &.placeholder { background: transparent; min-height: $item-image-size; box-shadow: inset $inner-box-shadow; border-radius: 4px; .ds-list-item-link { cursor: default; } .ds-list-image { opacity: 0; } } .ds-list-item-link { mix-blend-mode: normal; display: flex; justify-content: space-between; height: 100%; } .ds-list-item-excerpt { @include limit-visible-lines(2, $item-line-height, $item-font-size); @include dark-theme-only { color: $grey-10-80; } color: $grey-50; margin: 4px 0 8px; } p { font-size: $item-font-size * 1px; line-height: $item-line-height * 1px; margin: 0; } .ds-list-item-info { @include limit-visible-lines(1, $item-line-height, $item-font-size); @include dark-theme-only { color: $grey-40; } color: $grey-50; font-size: 13px; } .ds-list-item-title { font-weight: 600; margin-bottom: 4px; } .ds-list-item-body { flex: 1; } .ds-list-item-text { display: flex; flex-direction: column; justify-content: space-between; } .ds-list-image { height: $item-image-size; margin-inline-start: $item-font-size * 1px; min-height: $item-image-size; img { border-radius: 4px; box-shadow: inset 0 0 0 0.5px $black-15; } } &:hover { .ds-list-item-title { color: $blue-40; } } &:active { .ds-list-item-title { color: $blue-70; } } } ================================================ FILE: content-src/components/DiscoveryStreamComponents/Navigation/Navigation.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/. */ import React from "react"; import { SafeAnchor } from "../SafeAnchor/SafeAnchor"; import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText"; export class Topic extends React.PureComponent { render() { const { url, name } = this.props; return (
-
{name}
);
}
}
export class Navigation extends React.PureComponent {
render() {
const { links } = this.props || [];
const { alignment } = this.props || "centered";
const header = this.props.header || {};
return (
-
{/* We don't yet support an accessible drag-and-drop implementation, see Bug 1552005 */} {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}{link.searchTopSite && ( )} {showSmallFavicon && ( )}{link.isPinned && } {title}{link.type === SPOC_TYPE ? ( Sponsored ) : null} {children} {link.type === SPOC_TYPE ? (
) : null}
);
}
}
TopSiteLink.defaultProps = {
title: "",
link: {},
isDraggable: true,
};
export class TopSite extends React.PureComponent {
constructor(props) {
super(props);
this.state = { showContextMenu: false };
this.onLinkClick = this.onLinkClick.bind(this);
this.onMenuUpdate = this.onMenuUpdate.bind(this);
}
/**
* Report to telemetry additional information about the item.
*/
_getTelemetryInfo() {
const value = { icon_type: this.props.link.iconType };
// Filter out "not_pinned" type for being the default
if (this.props.link.isPinned) {
value.card_type = "pinned";
}
if (this.props.link.searchTopSite) {
// Set the card_type as "search" regardless of its pinning status
value.card_type = "search";
value.search_vendor = this.props.link.hostname;
}
if (this.props.link.type === SPOC_TYPE) {
value.card_type = "spoc";
}
return { value };
}
userEvent(event) {
this.props.dispatch(
ac.UserEvent(
Object.assign(
{
event,
source: TOP_SITES_SOURCE,
action_position: this.props.index,
},
this._getTelemetryInfo()
)
)
);
}
onLinkClick(event) {
this.userEvent("CLICK");
// Specially handle a top site link click for "typed" frecency bonus as
// specified as a property on the link.
event.preventDefault();
const { altKey, button, ctrlKey, metaKey, shiftKey } = event;
if (!this.props.link.searchTopSite) {
this.props.dispatch(
ac.OnlyToMain({
type: at.OPEN_LINK,
data: Object.assign(this.props.link, {
event: { altKey, button, ctrlKey, metaKey, shiftKey },
}),
})
);
// Fire off a spoc specific impression.
if (this.props.link.type === SPOC_TYPE) {
this.props.dispatch(
ac.ImpressionStats({
source: TOP_SITES_SOURCE,
click: 0,
tiles: [
{
id: this.props.link.id,
pos: this.props.link.pos,
shim: this.props.link.shim && this.props.link.shim.click,
},
],
})
);
}
} else {
this.props.dispatch(
ac.OnlyToMain({
type: at.FILL_SEARCH_TERM,
data: { label: this.props.link.label },
})
);
}
}
onMenuUpdate(isOpen) {
if (isOpen) {
this.props.onActivate(this.props.index);
} else {
this.props.onActivate();
}
}
render() {
const { props } = this;
const { link } = props;
const isContextMenuOpen = props.activeIndex === props.index;
const title = link.label || link.hostname;
const menuOptions =
link.type !== SPOC_TYPE
? TOP_SITES_CONTEXT_MENU_OPTIONS
: TOP_SITES_SPOC_CONTEXT_MENU_OPTIONS;
return (
- {name} ); } } export class Topics extends React.PureComponent { render() { const { topics } = this.props; return (
{header.title ? (
) : null}
);
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
================================================
.ds-navigation {
line-height: 32px;
padding: 4px 0;
font-size: 14px;
font-weight: 600;
&.ds-navigation-centered {
text-align: center;
}
&.ds-navigation-right-aligned {
text-align: end;
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
&::after {
content: '·';
padding: 8px;
color: $grey-50;
}
&:last-child::after {
content: none;
}
a {
&:hover {
// text-decoration: underline; didn't quite match comps.
border-bottom: 1px solid var(--newtab-link-primary-color);
&:active {
border-bottom: 1px solid $blue-70;
}
}
&:active {
color: $blue-70;
}
}
}
.ds-header {
margin-bottom: 8px;
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor.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/. */
import { actionCreators as ac, actionTypes as at } from "common/Actions.jsm";
import React from "react";
export class SafeAnchor extends React.PureComponent {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(event) {
// Use dispatch instead of normal link click behavior to include referrer
if (this.props.dispatch) {
event.preventDefault();
const { altKey, button, ctrlKey, metaKey, shiftKey } = event;
this.props.dispatch(
ac.OnlyToMain({
type: at.OPEN_LINK,
data: {
event: { altKey, button, ctrlKey, metaKey, shiftKey },
referrer: "https://getpocket.com/recommendations",
// Use the anchor's url, which could have been cleaned up
url: event.currentTarget.href,
},
})
);
}
// Propagate event if there's a handler
if (this.props.onLinkClick) {
this.props.onLinkClick(event);
}
}
safeURI(url) {
let protocol = null;
try {
protocol = new URL(url).protocol;
} catch (e) {
return "";
}
const isAllowed = ["http:", "https:"].includes(protocol);
if (!isAllowed) {
console.warn(`${url} is not allowed for anchor targets.`); // eslint-disable-line no-console
return "";
}
return url;
}
render() {
const { url, className } = this.props;
return (
{this.props.children}
);
}
}
================================================
FILE: content-src/components/DiscoveryStreamComponents/SectionTitle/SectionTitle.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/. */
import React from "react";
export class SectionTitle extends React.PureComponent {
render() {
const {
header: { title, subtitle },
} = this.props;
return (
-
{links &&
links.map(t =>
{title}
{subtitle ? {subtitle}
: null}
{this.props.children}
);
}
}
ImpressionStats.defaultProps = {
IntersectionObserver: global.IntersectionObserver,
document: global.document,
rows: [],
source: "",
};
================================================
FILE: content-src/components/DiscoveryStreamImpressionStats/_ImpressionStats.scss
================================================
.impression-observer {
position: absolute;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
================================================
FILE: content-src/components/ErrorBoundary/ErrorBoundary.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/. */
import { A11yLinkButton } from "content-src/components/A11yLinkButton/A11yLinkButton";
import React from "react";
export class ErrorBoundaryFallback extends React.PureComponent {
constructor(props) {
super(props);
this.windowObj = this.props.windowObj || window;
this.onClick = this.onClick.bind(this);
}
/**
* Since we only get here if part of the page has crashed, do a
* forced reload to give us the best chance at recovering.
*/
onClick() {
this.windowObj.location.reload(true);
}
render() {
const defaultClass = "as-error-fallback";
let className;
if ("className" in this.props) {
className = `${this.props.className} ${defaultClass}`;
} else {
className = defaultClass;
}
// "A11yLinkButton" to force normal link styling stuff (eg cursor on hover)
return (
{this.props.showLogo && (
)}
{!this.props.handoffEnabled && (
)}
{this.props.handoffEnabled && (
);
}
}
export const Search = connect()(_Search);
================================================
FILE: content-src/components/Search/_Search.scss
================================================
$search-height: 48px;
$search-icon-size: 24px;
$search-icon-padding: 12px;
$search-icon-width: 2 * $search-icon-padding + $search-icon-size -2;
$search-button-width: 48px;
$glyph-forward: url('chrome://browser/skin/forward.svg');
.search-wrapper {
padding: 34px 0 64px;
.only-search & {
padding: 0 0 64px;
}
.logo-and-wordmark {
$logo-size: 96px;
$wordmark-size: 172px;
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 49px;
.logo {
background: url('chrome://branding/content/icon128.png') no-repeat center center;
background-size: $logo-size;
display: inline-block;
height: $logo-size;
width: $logo-size;
}
.wordmark {
background: url('#{$image-path}firefox-wordmark.svg') no-repeat center center;
background-size: $wordmark-size;
-moz-context-properties: fill;
display: inline-block;
fill: var(--newtab-search-wordmark-color);
height: $logo-size;
margin-inline-start: 15px;
width: $wordmark-size;
}
@media (max-width: $break-point-medium - 1) {
$logo-size-small: 64px;
$wordmark-small-size: 100px;
.logo {
background-size: $logo-size-small;
height: $logo-size-small;
width: $logo-size-small;
}
.wordmark {
background-size: $wordmark-small-size;
height: $logo-size-small;
width: $wordmark-small-size;
}
}
}
.search-inner-wrapper {
cursor: default;
display: flex;
height: $search-height;
margin: 0 auto;
position: relative;
width: $searchbar-width-small;
@media (min-width: $break-point-medium) {
width: $searchbar-width-medium;
}
@media (min-width: $break-point-large) {
width: $searchbar-width-large;
}
}
input {
background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat;
background-size: $search-icon-size;
border: solid 1px var(--newtab-search-border-color);
box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
font-size: 15px;
-moz-context-properties: fill;
fill: var(--newtab-search-icon-color);
padding: 0;
padding-inline-end: $search-button-width;
padding-inline-start: $search-icon-width;
width: 100%;
&:dir(rtl) {
background-position-x: right $search-icon-padding;
}
}
&:hover input {
box-shadow: $shadow-secondary, 0 0 0 1px $black-25;
}
.search-inner-wrapper:active input,
input:focus {
border: $input-border-active;
box-shadow: var(--newtab-textbox-focus-boxshadow);
}
.search-button {
background: $glyph-forward no-repeat center center;
background-size: 16px 16px;
border: 0;
border-radius: 0 $border-radius $border-radius 0;
-moz-context-properties: fill;
fill: var(--newtab-search-icon-color);
height: 100%;
inset-inline-end: 0;
position: absolute;
width: $search-button-width;
&:focus,
&:hover {
background-color: $grey-90-10;
cursor: pointer;
}
&:active {
background-color: $grey-90-20;
}
&:dir(rtl) {
transform: scaleX(-1);
}
}
}
.non-collapsible-section + .below-search-snippet-wrapper {
// If search is enabled, we need to invade its large bottom padding.
margin-top: -48px;
}
@media (max-height: 700px) {
.search-wrapper {
padding: 0 0 30px;
}
.non-collapsible-section + .below-search-snippet-wrapper {
// In shorter windows, search doesn't have such a large padding.
margin-top: -14px;
}
.below-search-snippet-wrapper {
min-height: 0;
}
}
.search-handoff-button {
background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat;
background-size: $search-icon-size;
border: solid 1px var(--newtab-search-border-color);
border-radius: 3px;
box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
cursor: text;
font-size: 15px;
padding: 0;
padding-inline-end: 48px;
padding-inline-start: 46px;
opacity: 1;
transition: opacity 500ms;
width: 100%;
&:dir(rtl) {
background-position-x: right $search-icon-padding;
}
&:hover {
box-shadow: $shadow-secondary, 0 0 0 1px $black-25;
}
.fake-focus & {
border: $input-border-active;
box-shadow: var(--newtab-textbox-focus-boxshadow);
.fake-caret {
display: block;
}
}
.search-hidden & {
opacity: 0;
visibility: hidden;
}
.fake-editable:focus {
outline: none;
caret-color: transparent;
}
.fake-editable {
color: transparent;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fake-textbox {
opacity: 0.54;
text-align: start;
}
.fake-caret {
animation: caret-animation 1.3s steps(5, start) infinite;
background: var(--newtab-text-primary-color);
display: none;
inset-inline-start: 47px;
height: 17px;
position: absolute;
top: 16px;
width: 1px;
@keyframes caret-animation {
to {
visibility: hidden;
}
}
}
}
@media (min-height: 701px) {
body:not(.inline-onboarding) .fixed-search {
main {
padding-top: 146px;
}
.search-wrapper {
$search-header-bar-height: 95px;
$search-height: 35px;
$search-icon-size: 16px;
$search-icon-padding: 16px;
background-color: var(--newtab-search-header-background-color);
border-bottom: solid 1px var(--newtab-border-secondary-color);
height: $search-header-bar-height;
left: 0;
padding: 30px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
.search-inner-wrapper {
height: $search-height;
}
input {
background-position-x: $search-icon-padding;
background-size: $search-icon-size;
&:dir(rtl) {
background-position-x: right $search-icon-padding;
}
}
}
.search-handoff-button {
background-position-x: $search-icon-padding;
background-size: $search-icon-size;
&:dir(rtl) {
background-position-x: right $search-icon-padding;
}
.fake-caret {
top: 10px;
}
}
}
}
@at-root {
// Adjust the style of the contentSearchUI-generated table
.contentSearchSuggestionTable {
background-color: var(--newtab-search-dropdown-color);
border: 0;
box-shadow: $context-menu-shadow;
transform: translateY($textbox-shadow-size);
.contentSearchHeader {
background-color: var(--newtab-search-dropdown-header-color);
color: var(--newtab-text-secondary-color);
}
.contentSearchHeader,
.contentSearchSettingsButton {
border-color: var(--newtab-border-secondary-color);
}
.contentSearchSuggestionsList {
border: 0;
}
.contentSearchOneOffsTable {
background-color: var(--newtab-search-dropdown-header-color);
border-top: solid 1px var(--newtab-border-secondary-color);
}
.contentSearchSearchWithHeaderSearchText {
color: var(--newtab-text-primary-color);
}
.contentSearchSuggestionsContainer {
background-color: var(--newtab-search-dropdown-color);
}
.contentSearchSuggestionRow {
&.selected {
background: var(--newtab-element-hover-color);
color: var(--newtab-text-primary-color);
&:active {
background: var(--newtab-element-active-color);
}
.historyIcon {
fill: var(--newtab-icon-secondary-color);
}
}
}
.contentSearchOneOffsTable {
.contentSearchSuggestionsContainer {
background-color: var(--newtab-search-dropdown-header-color);
}
}
.contentSearchOneOffItem {
// Make the border slightly shorter by offsetting from the top and bottom
$border-offset: 18%;
background-image: none;
border-image: linear-gradient(transparent $border-offset, var(--newtab-border-secondary-color) $border-offset, var(--newtab-border-secondary-color) 100% - $border-offset, transparent 100% - $border-offset) 1;
border-inline-end: 1px solid;
position: relative;
&.selected {
background: var(--newtab-element-hover-color);
}
&:active {
background: var(--newtab-element-active-color);
}
}
.contentSearchSettingsButton {
&:hover {
background: var(--newtab-element-hover-color);
color: var(--newtab-text-primary-color);
}
}
}
.contentSearchHeaderRow > td > img,
.contentSearchSuggestionRow > td > .historyIcon {
margin-inline-start: 7px;
margin-inline-end: 15px;
}
}
================================================
FILE: content-src/components/SectionMenu/SectionMenu.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/. */
import { actionCreators as ac } from "common/Actions.jsm";
import { ContextMenu } from "content-src/components/ContextMenu/ContextMenu";
import React from "react";
import { SectionMenuOptions } from "content-src/lib/section-menu-options";
const DEFAULT_SECTION_MENU_OPTIONS = [
"MoveUp",
"MoveDown",
"Separator",
"RemoveSection",
"CheckCollapsed",
"Separator",
"ManageSection",
];
const WEBEXT_SECTION_MENU_OPTIONS = [
"MoveUp",
"MoveDown",
"Separator",
"CheckCollapsed",
"Separator",
"ManageWebExtension",
];
export class _SectionMenu extends React.PureComponent {
handleAddWhileCollapsed() {
const { action, userEvent } = SectionMenuOptions.ExpandSection(this.props);
this.props.dispatch(action);
if (userEvent) {
this.props.dispatch(
ac.UserEvent({
event: userEvent,
source: this.props.source,
})
);
}
}
getOptions() {
const { props } = this;
const propOptions = props.isWebExtension
? [...WEBEXT_SECTION_MENU_OPTIONS]
: [...DEFAULT_SECTION_MENU_OPTIONS];
// Remove the move related options if the section is fixed
if (props.isFixed) {
propOptions.splice(propOptions.indexOf("MoveUp"), 3);
}
// Prepend custom options and a separator
if (props.extraOptions) {
propOptions.splice(0, 0, ...props.extraOptions, "Separator");
}
// Insert privacy notice before the last option ("ManageSection")
if (props.privacyNoticeURL) {
propOptions.splice(-1, 0, "PrivacyNotice");
}
const options = propOptions
.map(o => SectionMenuOptions[o](props))
.map(option => {
const { action, id, type, userEvent } = option;
if (!type && id) {
option.onClick = () => {
const hasAddEvent =
userEvent === "MENU_ADD_TOPSITE" ||
userEvent === "MENU_ADD_SEARCH";
if (props.collapsed && hasAddEvent) {
this.handleAddWhileCollapsed();
}
props.dispatch(action);
if (userEvent) {
props.dispatch(
ac.UserEvent({
event: userEvent,
source: props.source,
})
);
}
};
}
return option;
});
// This is for accessibility to support making each item tabbable.
// We want to know which item is the first and which item
// is the last, so we can close the context menu accordingly.
options[0].first = true;
options[options.length - 1].last = true;
return options;
}
render() {
return (
{/*
This dummy and hidden input below is so we can load ContentSearchUIController.
Why? It sets --newtab-search-icon for us and it isn't trivial to port over.
*/}
)}
-
{cards}
{emptyState.icon &&
emptyState.icon.startsWith("moz-extension://") ? (
) : (
)}
{shouldShowTopics && (
)}
{shouldShowReadMore && (
{this.renderSections()}
;
}
}
export const Sections = connect(state => ({
Sections: state.Sections,
Prefs: state.Prefs,
}))(_Sections);
================================================
FILE: content-src/components/Sections/_Sections.scss
================================================
.sections-list {
.section-list {
display: grid;
grid-gap: $base-gutter;
grid-template-columns: repeat(auto-fit, $card-width);
margin: 0;
@media (max-width: $break-point-medium) {
@include context-menu-open-left;
}
@media (min-width: $break-point-medium) and (max-width: $break-point-large) {
:nth-child(2n) {
@include context-menu-open-left;
}
}
@media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) {
:nth-child(3n) {
@include context-menu-open-left;
}
}
@media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) {
// 3n for normal cards, 4n for compact cards
:nth-child(3n),
:nth-child(4n) {
@include context-menu-open-left;
}
}
}
.section-empty-state {
border: $border-secondary;
border-radius: $border-radius;
display: flex;
height: $card-height;
width: 100%;
.empty-state {
margin: auto;
max-width: 350px;
.empty-state-icon {
background-position: center;
background-repeat: no-repeat;
background-size: 50px 50px;
-moz-context-properties: fill;
display: block;
fill: var(--newtab-icon-secondary-color);
height: 50px;
margin: 0 auto;
width: 50px;
}
.empty-state-message {
color: var(--newtab-text-primary-color);
font-size: 13px;
margin-bottom: 0;
text-align: center;
}
}
@media (min-width: $break-point-widest) {
height: $card-height-large;
}
}
}
.top-stories-bottom-container {
color: var(--newtab-section-navigation-text-color);
font-size: 12px;
line-height: 1.6;
margin-top: $topic-margin-top;
display: flex;
justify-content: space-between;
a {
color: var(--newtab-link-secondary-color);
font-weight: bold;
&.more-recommendations {
font-weight: normal;
font-size: 13px;
}
}
.wrapper-topics,
.wrapper-cta + .wrapper-more-recommendations {
@media (max-width: $break-point-large - 1) {
display: none;
}
}
@media (max-width: $break-point-medium - 1) {
.wrapper-cta {
text-align: center;
.pocket-logged-in-cta {
display: block;
margin-inline-end: 0;
.pocket-cta-button {
max-width: none;
display: block;
margin-inline-end: 0;
margin: 5px 0 10px;
}
}
}
.wrapper-more-recommendations {
width: 100%;
.more-recommendations {
justify-content: center;
&::after {
display: none;
}
}
}
}
}
@media (min-width: $break-point-widest) {
.sections-list {
// Compact cards stay the same size but normal cards get bigger.
.normal-cards {
.section-list {
grid-template-columns: repeat(auto-fit, $card-width-large);
}
}
}
}
================================================
FILE: content-src/components/TopSites/SearchShortcutsForm.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/. */
import { actionCreators as ac, actionTypes as at } from "common/Actions.jsm";
import React from "react";
import { TOP_SITES_SOURCE } from "./TopSitesConstants";
export class SelectableSearchShortcut extends React.PureComponent {
render() {
const { shortcut, selected } = this.props;
const imageStyle = { backgroundImage: `url("${shortcut.tippyTopIcon}")` };
return (
-
{topSitesUI}
{editForm && (
)}
{showSearchShortcutsForm && (
)}
-
{topics &&
topics.map(t =>
Inner Element
;
beforeEach(() => {
mockRaf = createMockRaf();
sandbox = sinon.createSandbox();
sandbox.stub(window, "requestAnimationFrame").callsFake(mockRaf.raf);
wrapper = shallow(
{props.children}
;
};
describe("Inner Element
;
function renderImpressionStats(props = {}) {
return shallow(
- presentation component", () => {
const ValidRecommendations = [
{ url: 1 },
{ url: 2 },
{ context: "test spoc", url: 3 },
];
const ValidListProps = {
data: {
recommendations: ValidRecommendations,
},
feed: {
url: "fakeFeedUrl",
},
header: {
title: "fakeFeedTitle",
},
};
it("should return null if feed.data is falsy", () => {
const ListProps = {
data: { feeds: { a: "stuff" } },
};
const wrapper = shallow(
- if props are valid", () => {
const wrapper = shallow(
doh!
;
}
}
const wrapper = shallow(doh!
;
}
}
const wrapper = shallow(
with a class of as-error-fallback", () => {
const wrapper = shallow(
with the props.className and .as-error-fallback", () => {
const wrapper = shallow(", () => {
const wrapper = shallow(", () => {
it("should create span with no children", () => {
const wrapper = shallow(
);
assert.ok(wrapper.find("p[data-l10n-id='fluent']"));
});
it("should set args for fluent", () => {
const wrapper = shallow(
);
assert.ok(wrapper.find("b[data-l10n-name='bold']"));
});
it("should only allow a single child", () => {
assert.throws(() =>
shallow(
)
);
});
});
================================================
FILE: test/unit/content-src/components/LinkMenu.test.jsx
================================================
import { ContextMenu } from "content-src/components/ContextMenu/ContextMenu";
import { _LinkMenu as LinkMenu } from "content-src/components/LinkMenu/LinkMenu";
import React from "react";
import { shallow } from "enzyme";
describe("", () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(
{}}
/>
);
});
it("should render a ContextMenu element", () => {
assert.ok(wrapper.find(ContextMenu).exists());
});
it("should pass onUpdate, and options to ContextMenu", () => {
assert.ok(wrapper.find(ContextMenu).exists());
const contextMenuProps = wrapper.find(ContextMenu).props();
["onUpdate", "options"].forEach(prop =>
assert.property(contextMenuProps, prop)
);
});
it("should give ContextMenu the correct tabbable options length for a11y", () => {
const { options } = wrapper.find(ContextMenu).props();
const [firstItem] = options;
const lastItem = options[options.length - 1];
// first item should have {first: true}
assert.isTrue(firstItem.first);
assert.ok(!firstItem.last);
// last item should have {last: true}
assert.isTrue(lastItem.last);
assert.ok(!lastItem.first);
// middle items should have neither
for (let i = 1; i < options.length - 1; i++) {
assert.ok(!options[i].first && !options[i].last);
}
});
it("should show the correct options for default sites", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
let i = 0;
assert.propertyVal(options[i++], "id", "newtab-menu-pin");
assert.propertyVal(options[i++], "id", "newtab-menu-edit-topsites");
assert.propertyVal(options[i++], "type", "separator");
assert.propertyVal(options[i++], "id", "newtab-menu-open-new-window");
assert.propertyVal(
options[i++],
"id",
"newtab-menu-open-new-private-window"
);
assert.propertyVal(options[i++], "type", "separator");
assert.propertyVal(options[i++], "id", "newtab-menu-dismiss");
assert.propertyVal(options, "length", i);
// Double check that delete options are not included for default top sites
options
.filter(o => o.type !== "separator")
.forEach(o => {
assert.notInclude(["newtab-menu-delete-history"], o.id);
});
});
it("should show Unpin option for a pinned site if CheckPinTopSite in options list", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(options.find(o => o.id && o.id === "newtab-menu-unpin"));
});
it("should show Pin option for an unpinned site if CheckPinTopSite in options list", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(options.find(o => o.id && o.id === "newtab-menu-pin"));
});
it("should show Unbookmark option for a bookmarked site if CheckBookmark in options list", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-remove-bookmark")
);
});
it("should show Bookmark option for an unbookmarked site if CheckBookmark in options list", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-bookmark")
);
});
it("should show Save to Pocket option for an unsaved Pocket item if CheckSavedToPocket in options list", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-save-to-pocket")
);
});
it("should show Delete from Pocket option for a saved Pocket item if CheckSavedToPocket in options list", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-delete-pocket")
);
});
it("should show Archive from Pocket option for a saved Pocket item if CheckBookmarkOrArchive", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-archive-pocket")
);
});
it("should show Bookmark option for an unbookmarked site if CheckBookmarkOrArchive in options list and no pocket_id", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-bookmark")
);
});
it("should show Unbookmark option for a bookmarked site if CheckBookmarkOrArchive in options list and no pocket_id", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-remove-bookmark")
);
});
it("should show Open File option for a downloaded item", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-open-file")
);
});
it("should show Show File option for a downloaded item on a default platform", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-show-file")
);
});
it("should show Copy Downlad Link option for a downloaded item when CopyDownloadLink", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-copy-download-link")
);
});
it("should show Go To Download Page option for a downloaded item when GoToDownloadPage", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-go-to-download-page")
);
assert.isFalse(options[0].disabled);
});
it("should show Go To Download Page option as disabled for a downloaded item when GoToDownloadPage if no referrer exists", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-go-to-download-page")
);
assert.isTrue(options[0].disabled);
});
it("should show Remove Download Link option for a downloaded item when RemoveDownload", () => {
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
assert.isDefined(
options.find(o => o.id && o.id === "newtab-menu-remove-download")
);
});
it("should show Edit option", () => {
const props = { url: "foo", label: "label" };
const index = 5;
wrapper = shallow(
{}}
/>
);
const { options } = wrapper.find(ContextMenu).props();
const option = options.find(
o => o.id && o.id === "newtab-menu-edit-topsites"
);
assert.isDefined(option);
assert.equal(option.action.data.index, index);
});
describe(".onClick", () => {
const FAKE_INDEX = 3;
const FAKE_SOURCE = "TOP_SITES";
const FAKE_SITE = {
bookmarkGuid: 1234,
hostname: "foo",
path: "foo",
pocket_id: "1234",
referrer: "https://foo.com/ref",
title: "bar",
type: "bookmark",
typedBonus: true,
url: "https://foo.com",
};
const dispatch = sinon.stub();
const propOptions = [
"ShowFile",
"CopyDownloadLink",
"GoToDownloadPage",
"RemoveDownload",
"Separator",
"ShowPrivacyInfo",
"RemoveBookmark",
"AddBookmark",
"OpenInNewWindow",
"OpenInPrivateWindow",
"BlockUrl",
"DeleteUrl",
"PinTopSite",
"UnpinTopSite",
"SaveToPocket",
"DeleteFromPocket",
"ArchiveFromPocket",
"WebExtDismiss",
];
const expectedActionData = {
"newtab-menu-remove-bookmark": FAKE_SITE.bookmarkGuid,
"newtab-menu-bookmark": {
url: FAKE_SITE.url,
title: FAKE_SITE.title,
type: FAKE_SITE.type,
},
"newtab-menu-open-new-window": {
url: FAKE_SITE.url,
referrer: FAKE_SITE.referrer,
typedBonus: FAKE_SITE.typedBonus,
},
"newtab-menu-open-new-private-window": {
url: FAKE_SITE.url,
referrer: FAKE_SITE.referrer,
},
"newtab-menu-dismiss": {
url: FAKE_SITE.url,
pocket_id: FAKE_SITE.pocket_id,
},
menu_action_webext_dismiss: {
source: "TOP_SITES",
url: FAKE_SITE.url,
action_position: 3,
},
"newtab-menu-delete-history": {
url: FAKE_SITE.url,
pocket_id: FAKE_SITE.pocket_id,
forceBlock: FAKE_SITE.bookmarkGuid,
},
"newtab-menu-pin": { site: { url: FAKE_SITE.url }, index: FAKE_INDEX },
"newtab-menu-unpin": { site: { url: FAKE_SITE.url } },
"newtab-menu-save-to-pocket": {
site: { url: FAKE_SITE.url, title: FAKE_SITE.title },
},
"newtab-menu-delete-pocket": { pocket_id: "1234" },
"newtab-menu-archive-pocket": { pocket_id: "1234" },
"newtab-menu-show-file": { url: FAKE_SITE.url },
"newtab-menu-copy-download-link": { url: FAKE_SITE.url },
"newtab-menu-go-to-download-page": { url: FAKE_SITE.referrer },
"newtab-menu-remove-download": { url: FAKE_SITE.url },
};
const { options } = shallow(
", () => {
it("should render a MoreRecommendations element", () => {
const wrapper = shallow(
);
}
describe("", () => {
it("should render a PocketLoggedInCta element", () => {
const wrapper = mountSectionWithProps({});
assert.ok(wrapper.exists());
});
it("should render Fluent spans when rendered without props", () => {
const wrapper = mountSectionWithProps({});
const message = wrapper.find("span[data-l10n-id]");
assert.lengthOf(message, 2);
});
it("should not render Fluent spans when rendered with props", () => {
const wrapper = shallow(
", () => {
let dispatch;
let onReady;
let sandbox;
let wrapper;
let dummyNode;
let fakeDocument;
let sendUserActionTelemetryStub;
let content;
beforeEach(() => {
sandbox = sinon.createSandbox();
dispatch = sandbox.stub();
onReady = sandbox.stub();
sendUserActionTelemetryStub = sandbox.stub();
content = {
primary_button: {},
secondary_button: {},
};
dummyNode = document.createElement("body");
sandbox.stub(dummyNode, "querySelector").returns(dummyNode);
fakeDocument = {
get activeElement() {
return dummyNode;
},
get body() {
return dummyNode;
},
getElementById() {
return dummyNode;
},
};
});
afterEach(() => {
sandbox.restore();
});
describe("not mounted", () => {
it("should send an IMPRESSION on mount", () => {
assert.notCalled(sendUserActionTelemetryStub);
wrapper = mount(
", () => {
let globals;
let sandbox;
beforeEach(() => {
globals = new GlobalOverrider();
sandbox = globals.sandbox;
global.ContentSearchUIController.prototype = { search: sandbox.spy() };
});
afterEach(() => {
globals.restore();
});
it("should render a Search element", () => {
const wrapper = shallow(