diff --git a/browser/components/newtab/common/Actions.jsm b/browser/components/newtab/common/Actions.jsm index 58aba384f7b3..44679f8834d5 100644 --- a/browser/components/newtab/common/Actions.jsm +++ b/browser/components/newtab/common/Actions.jsm @@ -56,6 +56,7 @@ for (const type of [ "DISCOVERY_STREAM_SPOCS_ENDPOINT", "DISCOVERY_STREAM_SPOCS_FILL", "DISCOVERY_STREAM_SPOCS_UPDATE", + "DISCOVERY_STREAM_SPOC_BLOCKED", "DISCOVERY_STREAM_SPOC_IMPRESSION", "DOWNLOAD_CHANGED", "FAKE_FOCUS_SEARCH", diff --git a/browser/components/newtab/common/Reducers.jsm b/browser/components/newtab/common/Reducers.jsm index e63603a0fcab..a2e5374ca45b 100644 --- a/browser/components/newtab/common/Reducers.jsm +++ b/browser/components/newtab/common/Reducers.jsm @@ -66,6 +66,7 @@ const INITIAL_STATE = { data: {}, // {spocs: []} loaded: false, frequency_caps: [], + blocked: [], }, }, Search: { @@ -612,6 +613,14 @@ function DiscoveryStream(prevState = INITIAL_STATE.DiscoveryStream, action) { }; } return prevState; + case at.DISCOVERY_STREAM_SPOC_BLOCKED: + return { + ...prevState, + spocs: { + ...prevState.spocs, + blocked: [...prevState.spocs.blocked, action.data.url], + }, + }; case at.DISCOVERY_STREAM_LINK_BLOCKED: return isNotReady() ? prevState diff --git a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx index 47c496d81883..fa1fe5e9f159 100644 --- a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx +++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx @@ -19,11 +19,26 @@ export class ModalOverlayWrapper extends React.PureComponent { componentWillMount() { this.props.document.addEventListener("keydown", this.onKeyDown); this.props.document.body.classList.add("modal-open"); + this.header = this.props.document.getElementById( + "header-asrouter-container" + ); + + if (this.header) { + this.header.classList.add("modal-scroll"); + this.props.document.getElementById("root").classList.add("modal-height"); + } } componentWillUnmount() { this.props.document.removeEventListener("keydown", this.onKeyDown); this.props.document.body.classList.remove("modal-open"); + + if (this.header) { + this.header.classList.remove("modal-scroll"); + this.props.document + .getElementById("root") + .classList.remove("modal-height"); + } } render() { diff --git a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss index 13f44417235e..97b9c21f4a4c 100644 --- a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss +++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss @@ -19,6 +19,19 @@ } } +.modal-scroll { + position: absolute; + width: 100%; + height: 100%; + overflow: auto; +} + +.modal-height { + // "Welcome header" has 40px of padding and 36px font size that get neglected using position absolute + // causing this to visually collide with the newtab searchbar + padding-top: 80px; +} + .modalOverlayInner { width: 960px; position: fixed; @@ -30,7 +43,6 @@ display: none; z-index: 1101; - // modal takes over entire screen @media(max-width: 960px) { width: 100%; diff --git a/browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss b/browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss index 3fedd5effa64..9a6eb68dbeb7 100644 --- a/browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss +++ b/browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss @@ -401,7 +401,7 @@ .inline-onboarding { &.activity-stream.welcome { - overflow-y: scroll; + overflow-y: hidden; } .modalOverlayInner { diff --git a/browser/components/newtab/content-src/components/Card/Card.jsx b/browser/components/newtab/content-src/components/Card/Card.jsx index 2ee3c813732f..d7730fffcfd7 100644 --- a/browser/components/newtab/content-src/components/Card/Card.jsx +++ b/browser/components/newtab/content-src/components/Card/Card.jsx @@ -5,6 +5,7 @@ import { actionCreators as ac, actionTypes as at } from "common/Actions.jsm"; import { cardContextTypes } from "./types"; import { connect } from "react-redux"; +import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton"; import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu"; import React from "react"; import { ScreenshotUtils } from "content-src/lib/screenshot-utils"; @@ -27,11 +28,9 @@ export class _Card extends React.PureComponent { this.state = { activeCard: null, imageLoaded: false, - showContextMenu: false, cardImage: null, }; - this.onMenuButtonClick = this.onMenuButtonClick.bind(this); - this.onMenuUpdate = this.onMenuUpdate.bind(this); + this.onMenuButtonUpdate = this.onMenuButtonUpdate.bind(this); this.onLinkClick = this.onLinkClick.bind(this); } @@ -117,12 +116,12 @@ export class _Card extends React.PureComponent { return nextState; } - onMenuButtonClick(event) { - event.preventDefault(); - this.setState({ - activeCard: this.props.index, - showContextMenu: true, - }); + onMenuButtonUpdate(isOpen) { + if (isOpen) { + this.setState({ activeCard: this.props.index }); + } else { + this.setState({ activeCard: null }); + } } /** @@ -191,10 +190,6 @@ export class _Card extends React.PureComponent { } } - onMenuUpdate(showContextMenu) { - this.setState({ showContextMenu }); - } - componentDidMount() { this.maybeLoadImage(); } @@ -239,8 +234,7 @@ export class _Card extends React.PureComponent { } = this.props; const { props } = this; const title = link.title || link.hostname; - const isContextMenuOpen = - this.state.showContextMenu && this.state.activeCard === index; + const isContextMenuOpen = this.state.activeCard === index; // Display "now" as "trending" until we have new strings #3402 const { icon, fluentID } = cardContextTypes[link.type === "now" ? "trending" : link.type] || {}; @@ -329,25 +323,21 @@ export class _Card extends React.PureComponent { {!props.placeholder && ( -