Backed out changeset 2c19c6b038a4 (bug 1705855) for Newtab failures in content-src/components/Base/_Base.scss. CLOSED TREE

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 { content } = this.state.message;
-    const main = global.window.document.querySelector("main");
-    if (main) {
-      if (hasSnippet) {
-        main.classList.add("has-snippet");
-      } else {
-        main.classList.remove("has-snippet");
-      }
-    }
 
     return (
       <ImpressionsWrapper

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

@@ -213,12 +213,6 @@ export class BaseContent extends React.PureComponent {
       .filter(v => v)
       .join(" ");
 
-    const hasSnippet =
-      enabledSections.snippetsEnabled &&
-      this.props.adminContent &&
-      this.props.adminContent.message &&
-      this.props.adminContent.message.id;
-
     return (
       <div>
         {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*/}
         <div className={outerClassName} onClick={this.closeCustomizationMenu}>
-          <main className={hasSnippet ? "has-snippet" : ""}>
+          <main>
             {prefs.showSearch && (
               <div className="non-collapsible-section">
                 <ErrorBoundary>

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 {

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; }
 

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; }
 

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; }
 

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", {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("main", null, prefs.showSearch && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", {
-      className: hasSnippet ? "has-snippet" : ""
-    }, 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,
+      content
-      id: hasSnippet
+    } = this.state.message;
-    } = message;
-    const main = global.window.document.querySelector("main");
-
-    if (main) {
-      if (hasSnippet) {
-        main.classList.add("has-snippet");
-      } else {
-        main.classList.remove("has-snippet");
-      }
-    }
-
     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,