Bug 1527347 - Remove breakpoints for Discovery Stream. r=Mardak a=lizzard
authork88hudson <k88hudson@gmail.com>
Sat, 16 Feb 2019 00:49:53 +0200
changeset 515992 6462ee7b5df4a5c925ed0847755a9f22c4a4a9ca
parent 515991 86bd7fce23cdf0b425d4abb2e0f439f243291e1f
child 515993 2d417b1dda717354cebfabc45d4f0672a0d8be36
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak, lizzard
bugs1527347
milestone66.0
Bug 1527347 - Remove breakpoints for Discovery Stream. r=Mardak a=lizzard Reviewers: Mardak Reviewed By: Mardak Bug #: 1527347 Differential Revision: https://phabricator.services.mozilla.com/D19974
browser/components/newtab/content-src/components/Base/Base.jsx
browser/components/newtab/content-src/components/Base/_Base.scss
browser/components/newtab/css/activity-stream-linux.css
browser/components/newtab/css/activity-stream-mac.css
browser/components/newtab/css/activity-stream-windows.css
browser/components/newtab/data/content/activity-stream.bundle.js
--- a/browser/components/newtab/content-src/components/Base/Base.jsx
+++ b/browser/components/newtab/content-src/components/Base/Base.jsx
@@ -158,16 +158,17 @@ export class BaseContent extends React.P
 
     if (isDiscoveryStream) {
       this.disableDarkTheme();
     }
 
     const outerClassName = [
       "outer-wrapper",
       isDiscoveryStream && "ds-outer-wrapper-search-alignment",
+      isDiscoveryStream && "ds-outer-wrapper-breakpoint-override",
       shouldBeFixedToTop && "fixed-to-top",
       prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search",
       prefs.showSearch && noSectionsEnabled && "only-search",
     ].filter(v => v).join(" ");
 
     return (
       <div>
         <div className={outerClassName}>
--- a/browser/components/newtab/content-src/components/Base/_Base.scss
+++ b/browser/components/newtab/content-src/components/Base/_Base.scss
@@ -57,16 +57,31 @@ main {
 .ds-outer-wrapper-search-alignment {
   main {
     // This override is to ensure while Discovery Stream loads,
     // the search bar does not jump around. (it sticks to the top)
     margin: 0 auto;
   }
 }
 
+.ds-outer-wrapper-breakpoint-override {
+  main {
+    // Override Activity Stream breakpoints for Discovery Stream.
+    // Right now Discovery Stream doesn't have any breakpoints,
+    // and Activity Stream breakpoints do some wonky things.
+    width: 1042px;
+  }
+
+  &:not(.fixed-search) {
+    .search-wrapper .search-inner-wrapper {
+      width: $searchbar-width-large;
+    }
+  }
+}
+
 .base-content-fallback {
   // Make the error message be centered against the viewport
   height: 100vh;
 }
 
 .body-wrapper {
   // Hide certain elements so the page structure is fixed, e.g., placeholders,
   // while avoiding flashes of changing content, e.g., icons and text
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -357,16 +357,22 @@ main {
     margin-bottom: 20px;
     position: relative; }
   .hide-main main {
     visibility: hidden; }
 
 .ds-outer-wrapper-search-alignment main {
   margin: 0 auto; }
 
+.ds-outer-wrapper-breakpoint-override main {
+  width: 1042px; }
+
+.ds-outer-wrapper-breakpoint-override:not(.fixed-search) .search-wrapper .search-inner-wrapper {
+  width: 736px; }
+
 .base-content-fallback {
   height: 100vh; }
 
 
 .body-wrapper .section-title,
 .body-wrapper .sections-list .section:last-of-type,
 .body-wrapper .topics {
   opacity: 0; }
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -360,16 +360,22 @@ main {
     margin-bottom: 20px;
     position: relative; }
   .hide-main main {
     visibility: hidden; }
 
 .ds-outer-wrapper-search-alignment main {
   margin: 0 auto; }
 
+.ds-outer-wrapper-breakpoint-override main {
+  width: 1042px; }
+
+.ds-outer-wrapper-breakpoint-override:not(.fixed-search) .search-wrapper .search-inner-wrapper {
+  width: 736px; }
+
 .base-content-fallback {
   height: 100vh; }
 
 
 .body-wrapper .section-title,
 .body-wrapper .sections-list .section:last-of-type,
 .body-wrapper .topics {
   opacity: 0; }
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -357,16 +357,22 @@ main {
     margin-bottom: 20px;
     position: relative; }
   .hide-main main {
     visibility: hidden; }
 
 .ds-outer-wrapper-search-alignment main {
   margin: 0 auto; }
 
+.ds-outer-wrapper-breakpoint-override main {
+  width: 1042px; }
+
+.ds-outer-wrapper-breakpoint-override:not(.fixed-search) .search-wrapper .search-inner-wrapper {
+  width: 736px; }
+
 .base-content-fallback {
   height: 100vh; }
 
 
 .body-wrapper .section-title,
 .body-wrapper .sections-list .section:last-of-type,
 .body-wrapper .topics {
   opacity: 0; }
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -2391,17 +2391,17 @@ class BaseContent extends react__WEBPACK
     const noSectionsEnabled = !prefs["feeds.topsites"] && props.Sections.filter(section => section.enabled).length === 0;
     const isDiscoveryStream = props.DiscoveryStream.config && props.DiscoveryStream.config.enabled;
     const searchHandoffEnabled = prefs["improvesearch.handoffToAwesomebar"];
 
     if (isDiscoveryStream) {
       this.disableDarkTheme();
     }
 
-    const outerClassName = ["outer-wrapper", isDiscoveryStream && "ds-outer-wrapper-search-alignment", shouldBeFixedToTop && "fixed-to-top", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search"].filter(v => v).join(" ");
+    const outerClassName = ["outer-wrapper", isDiscoveryStream && "ds-outer-wrapper-search-alignment", isDiscoveryStream && "ds-outer-wrapper-breakpoint-override", shouldBeFixedToTop && "fixed-to-top", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search"].filter(v => v).join(" ");
 
     return react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(
       "div",
       null,
       react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(
         "div",
         { className: outerClassName },
         react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(