diff --git a/browser/components/newtab/content-src/asrouter/asrouter-content.jsx b/browser/components/newtab/content-src/asrouter/asrouter-content.jsx index 90a78d7d7e55..a657f59f677a 100644 --- a/browser/components/newtab/content-src/asrouter/asrouter-content.jsx +++ b/browser/components/newtab/content-src/asrouter/asrouter-content.jsx @@ -264,15 +264,7 @@ export class ASRouterUISurface extends React.PureComponent { return null; } const SnippetComponent = SnippetsTemplates[message.template]; - const { content, id: hasSnippet } = message; - const main = global.window.document.querySelector("main"); - if (main) { - if (hasSnippet) { - main.classList.add("has-snippet"); - } else { - main.classList.remove("has-snippet"); - } - } + const { content } = this.state.message; return ( v) .join(" "); - const hasSnippet = - enabledSections.snippetsEnabled && - this.props.adminContent && - this.props.adminContent.message && - this.props.adminContent.message.id; - return (
{canShowCustomizationMenu ? ( @@ -237,7 +231,7 @@ export class BaseContent extends React.PureComponent { )} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions*/}
-
+
{prefs.showSearch && (
diff --git a/browser/components/newtab/content-src/components/Base/_Base.scss b/browser/components/newtab/content-src/components/Base/_Base.scss index 031676207c95..97c1f50ccc54 100644 --- a/browser/components/newtab/content-src/components/Base/_Base.scss +++ b/browser/components/newtab/content-src/components/Base/_Base.scss @@ -26,7 +26,9 @@ main { margin: auto; width: $wrapper-default-width; - padding: 0; + // Offset the snippets container so things at the bottom of the page are still + // visible when snippets are visible. Adjust for other spacing. + padding-bottom: $snippets-container-height - $section-spacing - $base-gutter; section { margin-bottom: $section-spacing; @@ -48,12 +50,7 @@ main { @media (min-width: $break-point-widest) { width: $wrapper-max-width-widest; } -} -main.has-snippet { - // Offset the snippets container so things at the bottom of the page are still - // visible when snippets are visible. Adjust for other spacing. - padding-bottom: $snippets-container-height - $section-spacing - $base-gutter; } .below-search-snippet.withButton { @@ -72,7 +69,7 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override { main { width: 266px; - padding-bottom: 0; + padding-bottom: 68px; @media (min-width: $break-point-medium) { width: 510px; @@ -86,11 +83,6 @@ main.has-snippet { width: 986px; } } - main.has-snippet { - // Offset the snippets container so things at the bottom of the page are still - // visible when snippets are visible. Adjust for other spacing. - padding-bottom: $snippets-container-height - $section-spacing - $base-gutter; - } } .base-content-fallback { diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index 540a4a4f44bc..cc024ae03454 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -439,7 +439,7 @@ input[type='text'], input[type='search'] { main { margin: auto; width: 274px; - padding: 0; } + padding-bottom: 68px; } main section { margin-bottom: 20px; position: relative; } @@ -455,9 +455,6 @@ main { main { width: 1042px; } } -main.has-snippet { - padding-bottom: 68px; } - .below-search-snippet.withButton { margin: auto; width: 100%; } @@ -467,7 +464,7 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override main { width: 266px; - padding-bottom: 0; } + padding-bottom: 68px; } @media (min-width: 610px) { .ds-outer-wrapper-breakpoint-override main { width: 510px; } } @@ -478,9 +475,6 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override main { width: 986px; } } -.ds-outer-wrapper-breakpoint-override main.has-snippet { - padding-bottom: 68px; } - .base-content-fallback { height: 100vh; } diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index 40dc0edbbbf2..2bade1ccec6c 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -442,7 +442,7 @@ input[type='text'], input[type='search'] { main { margin: auto; width: 274px; - padding: 0; } + padding-bottom: 68px; } main section { margin-bottom: 20px; position: relative; } @@ -458,9 +458,6 @@ main { main { width: 1042px; } } -main.has-snippet { - padding-bottom: 68px; } - .below-search-snippet.withButton { margin: auto; width: 100%; } @@ -470,7 +467,7 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override main { width: 266px; - padding-bottom: 0; } + padding-bottom: 68px; } @media (min-width: 610px) { .ds-outer-wrapper-breakpoint-override main { width: 510px; } } @@ -481,9 +478,6 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override main { width: 986px; } } -.ds-outer-wrapper-breakpoint-override main.has-snippet { - padding-bottom: 68px; } - .base-content-fallback { height: 100vh; } diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index 981544319cd1..92f0a2ba4c9d 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -439,7 +439,7 @@ input[type='text'], input[type='search'] { main { margin: auto; width: 274px; - padding: 0; } + padding-bottom: 68px; } main section { margin-bottom: 20px; position: relative; } @@ -455,9 +455,6 @@ main { main { width: 1042px; } } -main.has-snippet { - padding-bottom: 68px; } - .below-search-snippet.withButton { margin: auto; width: 100%; } @@ -467,7 +464,7 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override main { width: 266px; - padding-bottom: 0; } + padding-bottom: 68px; } @media (min-width: 610px) { .ds-outer-wrapper-breakpoint-override main { width: 510px; } } @@ -478,9 +475,6 @@ main.has-snippet { .ds-outer-wrapper-breakpoint-override main { width: 986px; } } -.ds-outer-wrapper-breakpoint-override main.has-snippet { - padding-bottom: 68px; } - .base-content-fallback { height: 100vh; } diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js index 12df379cdcb9..4429cf3bc5fc 100644 --- a/browser/components/newtab/data/content/activity-stream.bundle.js +++ b/browser/components/newtab/data/content/activity-stream.bundle.js @@ -739,7 +739,6 @@ class BaseContent extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureCompo mayHaveSponsoredTopSites } = prefs; const outerClassName = ["outer-wrapper", isDiscoveryStream && pocketEnabled && "ds-outer-wrapper-search-alignment", isDiscoveryStream && "ds-outer-wrapper-breakpoint-override", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search", prefs["logowordmark.alwaysVisible"] && "visible-logo", newNewtabExperienceEnabled && "newtab-experience"].filter(v => v).join(" "); - const hasSnippet = enabledSections.snippetsEnabled && this.props.adminContent && this.props.adminContent.message && this.props.adminContent.message.id; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", null, canShowCustomizationMenu ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_CustomizeMenu_CustomizeMenu__WEBPACK_IMPORTED_MODULE_7__["CustomizeMenu"], { onClose: this.closeCustomizationMenu, onOpen: this.openCustomizationMenu, @@ -755,9 +754,7 @@ class BaseContent extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureCompo }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", { className: outerClassName, onClick: this.closeCustomizationMenu - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("main", { - className: hasSnippet ? "has-snippet" : "" - }, prefs.showSearch && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", { + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("main", null, prefs.showSearch && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", { className: "non-collapsible-section" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_ErrorBoundary_ErrorBoundary__WEBPACK_IMPORTED_MODULE_6__["ErrorBoundary"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_Search_Search__WEBPACK_IMPORTED_MODULE_9__["Search"], _extends({ showLogo: noSectionsEnabled || prefs["logowordmark.alwaysVisible"], @@ -2774,19 +2771,8 @@ class ASRouterUISurface extends react__WEBPACK_IMPORTED_MODULE_7___default.a.Pur const SnippetComponent = _templates_template_manifest__WEBPACK_IMPORTED_MODULE_9__["SnippetsTemplates"][message.template]; const { - content, - id: hasSnippet - } = message; - const main = global.window.document.querySelector("main"); - - if (main) { - if (hasSnippet) { - main.classList.add("has-snippet"); - } else { - main.classList.remove("has-snippet"); - } - } - + content + } = this.state.message; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(_components_ImpressionsWrapper_ImpressionsWrapper__WEBPACK_IMPORTED_MODULE_4__["ImpressionsWrapper"], { id: "NEWTAB_FOOTER_BAR", message: this.state.message,