Bug 1400326 - Preparing existing about:home for 57 if we decide not to ship activity stream on it draft
authorUrsula Sarracini
Fri, 06 Oct 2017 17:20:11 -0400
changeset 676234 fc07c057c2b28643db7c341487a15fd0950264b2
parent 675689 19b32a138d08f73961df878a29de6f0aad441683
child 734889 acf01fdfdae422005b18200856ac9549f98e0c69
push id83440
push userusarracini@mozilla.com
push dateFri, 06 Oct 2017 21:20:57 +0000
bugs1400326
milestone58.0a1
Bug 1400326 - Preparing existing about:home for 57 if we decide not to ship activity stream on it MozReview-Commit-ID: IprIOuZQJxL
browser/base/content/abouthome/aboutHome.css
browser/base/content/abouthome/aboutHome.js
browser/base/content/abouthome/aboutHome.xhtml
browser/base/content/abouthome/mozilla.svg
browser/base/content/test/about/browser_aboutHome_input.js
browser/base/jar.mn
--- a/browser/base/content/abouthome/aboutHome.css
+++ b/browser/base/content/abouthome/aboutHome.css
@@ -2,18 +2,18 @@
 /* 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/. */
 %endif
 
 html {
   font: message-box;
   font-size: 100%;
-  background-color: hsl(0,0%,95%);
-  color: #000;
+  background-color: #F9F9FA;
+  color: #0C0C0D;
   height: 100%;
 }
 
 body {
   margin: 0;
   display: -moz-box;
   -moz-box-orient: vertical;
   width: 100%;
@@ -32,137 +32,101 @@ a {
 }
 
 .spacer {
   -moz-box-flex: 1;
 }
 
 #topSection {
   text-align: center;
+  margin-top: -90px;
+  position: relative;
 }
 
 #brandLogo {
   height: 192px;
   width: 192px;
-  margin: 22px auto 31px;
+  margin: 0 auto 20px;
   background-image: url("chrome://branding/content/about-logo.png");
   background-size: 192px auto;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
-#searchIconAndTextContainer,
+#searchWrapper,
 #snippets {
   width: 470px;
 }
 
-#searchIconAndTextContainer {
-  display: -moz-box;
-  height: 36px;
+#searchWrapper {
+  cursor: default;
+  display: flex;
   position: relative;
-}
-
-#searchIcon {
-  border: 1px transparent;
-  padding: 0;
-  margin: 0;
-  width: 36px;
+  margin: 0 auto;
   height: 36px;
-  background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat;
-  position: absolute;
 }
 
 #searchText {
-  margin-left: 0;
-  -moz-box-flex: 1;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-inline-start: 34px;
-  padding-inline-end: 8px;
-  background: hsla(0,0%,100%,.9) padding-box;
-  border: 1px solid;
-  border-radius: 2px 0 0 2px;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
-  box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
-              0 0 2px hsla(210,65%,9%,.1) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
   color: inherit;
-  unicode-bidi: plaintext;
+  padding: 0;
+  padding-inline-end: 36px;
+  padding-inline-start: 35px;
+  width: 100%;
+  font-size: 15px;
 }
 
-#searchText:dir(rtl) {
-  border-radius: 0 2px 2px 0;
-}
-
-#searchText[aria-expanded="true"] {
-  border-radius: 2px 0 0 0;
+#searchText:active,
+#searchText:focus {
+  border-color: #0A84FF;
+  box-shadow: 0 0 0 2px #0A84FF;
 }
 
-#searchText[aria-expanded="true"]:dir(rtl) {
-  border-radius: 0 2px 0 0;
-}
-
-#searchText[keepfocus],
-#searchText:focus,
-#searchText[autofocus] {
-  border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
+#searchIcon {
+  background: url("chrome://browser/skin/search-glass.svg") no-repeat 12px center/16px;
+  fill: rgba(12, 12, 13, 0.4);
+  -moz-context-properties: fill;
+  position: absolute;
+  offset-inline-start: 0;
+  height: 35px;
+  width: 35px;
 }
 
 #searchSubmit {
-  margin-inline-start: -1px;
-  color: transparent;
-  background: url("chrome://browser/skin/search-arrow-go.svg") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
+  background: url("chrome://browser/skin/forward.svg") no-repeat center center;
+  border-radius: 0 3px 3px 0;
+  border: 0;
+  width: 36px;
+  fill: rgba(12, 12, 13, 0.4);
   -moz-context-properties: fill;
-  fill: #616366;
-  padding: 0;
-  border: 1px solid;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2) transparent;
-  border-radius: 0 2px 2px 0;
-  box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
+  background-size: 16px 16px;
+  height: 100%;
+  offset-inline-end: 0;
+  position: absolute;
+  color: transparent;
+}
+
+#searchSubmit:focus, #searchSubmit:hover {
+  background-color: rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-  width: 50px;
+}
+
+#searchSubmit:active {
+  background-color: rgba(12, 12, 13, 0.15);
 }
 
 #searchSubmit:dir(rtl) {
   transform: scaleX(-1);
 }
 
-#searchText:focus + #searchSubmit,
-#searchText[keepfocus] + #searchSubmit,
-#searchText + #searchSubmit:hover,
-#searchText[autofocus] + #searchSubmit {
-  border-color: #59b5fc #45a3e7 #3294d5;
-}
-
-#searchText:focus + #searchSubmit,
-#searchText[keepfocus] + #searchSubmit,
-#searchText[autofocus] + #searchSubmit {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg"), linear-gradient(#4cb1ff, #1793e5);
-  fill: white;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03);
-}
-
-#searchText + #searchSubmit:hover {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg"), linear-gradient(#66bdff, #0d9eff);
-  fill: white;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03),
-              0 0 4px hsla(206,100%,20%,.2);
-}
-
-#searchText + #searchSubmit:hover:active {
-  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
-              0 0 1px hsla(211,79%,6%,.2) inset;
-  transition-duration: 0ms;
+.contentSearchSuggestionTable {
+  border: 0;
+  transform: translateY(2px);
 }
 
 #defaultSnippet1,
 #defaultSnippet2,
 #rightsSnippet {
   display: block;
   min-height: 38px;
   background: 0 center no-repeat;
@@ -198,29 +162,29 @@ a {
      with Segoe UI on a default Windows 7 setup. The 15/12 multiplier approximately
      converts em from units of font-size to units of line-height. The goal is to
      preset the height of a three-line snippet to avoid visual moving/flickering as
      the snippets load. */
   min-height: calc(15/12 * 3em);
 }
 
 #launcher {
-  display: -moz-box;
+  display: none;
   -moz-box-align: center;
   -moz-box-pack: center;
   width: 100%;
   background-color: hsla(0,0%,0%,.03);
   border-top: 1px solid hsla(0,0%,0%,.03);
   box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset,
               0 -1px 0 hsla(0,0%,100%,.25);
 }
 
 #launcher:not([session]),
 body[narrow] #launcher[session] {
-  display: block; /* display separator and restore button on separate lines */
+  display: none; /* display separator and restore button on separate lines */
   text-align: center;
   white-space: nowrap; /* prevent navigational buttons from wrapping */
 }
 
 .launchButton {
   display: -moz-box;
   -moz-box-orient: vertical;
   margin: 16px 1px;
@@ -341,38 +305,16 @@ body[narrow] #restorePreviousSession {
 }
 
 body[narrow] #restorePreviousSession::before {
   content: url("chrome://browser/content/abouthome/restore.png");
   height: 32px;
   width: 32px;
 }
 
-#aboutMozilla {
-  display: block;
-  position: relative; /* pin wordmark to edge of document, not of viewport */
-  -moz-box-ordinal-group: 0;
-  opacity: .2;
-  transition: opacity 150ms;
-}
-
-#aboutMozilla:hover {
-  opacity: .6;
-}
-
-#aboutMozilla::before {
-  content: url("chrome://browser/content/abouthome/mozilla.svg");
-  display: block;
-  position: absolute;
-  top: 12px;
-  offset-inline-end: 12px;
-  width: 67px;
-  height: 19px;
-}
-
 /* [HiDPI]
  * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
  * rather than upscaling the original-size ones (bug 818940).
  */
 @media not all and (max-resolution: 1dppx) {
   #brandLogo {
     background-image: url("chrome://branding/content/about-logo@2x.png");
   }
@@ -432,8 +374,57 @@ body[narrow] #restorePreviousSession::be
     content: url("chrome://browser/content/abouthome/restore@2x.png");
   }
 
   #restorePreviousSession:dir(rtl)::before {
     transform: scale(-0.5, 0.5) translateX(24px);
     transform-origin: top center;
   }
 }
+
+/* Overrides for onboarding
+   These overrides hide the Firefox logo (since about:home has a
+   large logo already) and make the helper icon larger */
+
+#about-home #onboarding-notification-body,
+#about-home #onboarding-notification-tour-title {
+  color: #0C0C0D;
+}
+
+#about-home #onboarding-notification-body {
+  padding-inline-start: 46px;
+}
+
+#about-home #onboarding-notification-tour-message {
+  margin-bottom: 0;
+}
+
+#about-home #onboarding-notification-tour-icon {
+  display: none;
+}
+
+#about-home #onboarding-notification-tour-title::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+  height: 100%;
+  width: 42px;
+  background-size: 42px;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: #4A4A4F;
+}
+
+#about-home #onboarding-notification-bar {
+  z-index: 100;
+}
+
+/* Overrides for snippets
+   These changes make it so that snippets do not affect the height of the
+   main element, so that elements don't move around on page load. */
+#snippetContainer {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  margin-left: -235px;
+  width: 470px;
+}
--- a/browser/base/content/abouthome/aboutHome.js
+++ b/browser/base/content/abouthome/aboutHome.js
@@ -42,17 +42,16 @@ var gObserver = new MutationObserver(fun
     }
   }
 });
 
 window.addEventListener("pageshow", function() {
   // Delay search engine setup, cause browser.js::BrowserOnAboutPageLoad runs
   // later and may use asynchronous getters.
   window.gObserver.observe(document.documentElement, { attributes: true });
-  window.gObserver.observe(document.getElementById("launcher"), { attributes: true });
   fitToWidth();
   setupSearch();
   window.addEventListener("resize", fitToWidth);
 
   // Ask chrome to update snippets.
   var event = new CustomEvent("AboutHomeLoad", {bubbles: true});
   document.dispatchEvent(event);
 });
--- a/browser/base/content/abouthome/aboutHome.xhtml
+++ b/browser/base/content/abouthome/aboutHome.xhtml
@@ -29,22 +29,22 @@
           href="chrome://browser/content/abouthome/aboutHome.css"/>
 
     <script type="text/javascript"
             src="chrome://browser/content/abouthome/aboutHome.js"/>
     <script type="text/javascript"
             src="chrome://browser/content/contentSearchUI.js"/>
   </head>
 
-  <body dir="&locale.dir;">
+  <body id="about-home" dir="&locale.dir;">
     <div class="spacer"/>
     <div id="topSection">
       <div id="brandLogo"></div>
 
-      <div id="searchIconAndTextContainer">
+      <div id="searchWrapper">
         <div id="searchIcon"/>
         <input type="text" name="q" value="" id="searchText" maxlength="256"
                placeholder="&searchInput.placeholder;"
                aria-label="&contentSearchInput.label;" autofocus="autofocus"/>
         <input id="searchSubmit" type="button" onclick="onSearchSubmit(event)"
                title="&contentSearchSubmit.tooltip;"/>
       </div>
 
@@ -68,13 +68,10 @@
 #ifdef XP_WIN
       <button class="launchButton" id="settings">&abouthome.preferencesButtonWin.label;</button>
 #else
       <button class="launchButton" id="settings">&abouthome.preferencesButtonUnix.label;</button>
 #endif
       <div id="restorePreviousSessionSeparator"/>
       <button class="launchButton" id="restorePreviousSession">&historyRestoreLastSession.label;</button>
     </div>
-
-    <a id="aboutMozilla" href="https://www.mozilla.org/about/?utm_source=about-home&amp;utm_medium=Referral"
-       aria-label="&abouthome.aboutMozilla.label;"/>
   </body>
 </html>
deleted file mode 100644
--- a/browser/base/content/abouthome/mozilla.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134 38">
-<path d="M54.2,21.8c0,3.2-1.6,5.2-4.1,5.2s-3.9-2.2-3.9-5.1,1.5-4.9,3.9-4.9S54.2,18.4,54.2,21.8Zm61.1,3.5a1.7,1.7,0,0,0,2,1.9c1.7,0,3.5-1.2,3.6-4l-2.4-.2C116.8,23,115.3,23.4,115.3,25.3ZM134,0V38H0V0ZM39.2,26.6H37V19a5.4,5.4,0,0,0-5.7-5.8,5.6,5.6,0,0,0-5.4,3.6,5.4,5.4,0,0,0-5.4-3.6,5.5,5.5,0,0,0-5.1,2.8V13.6h-7v3.6h2.2v9.4H8.4v3.6H18.6V26.6H15.4V20.8c0-2.3.9-3.9,3.2-3.9s2.8,1.1,2.8,4v9.4h7V26.6H26.2V20.8c0-2.3.9-3.9,3.2-3.9s2.8,1.1,2.8,4v9.4h7Zm19.9-4.7c0-4.6-2.9-8.7-8.9-8.7s-8.9,4-8.9,8.9,3.5,8.4,8.7,8.4S59.1,27.2,59.1,21.9Zm18.7,2.5L74,24l-.8,2.6H67.9l9.2-10.5-.4-2.5H62.1l-.6,5.8,3.4.4.7-2.6h5.2L61.8,27.7l.5,2.5H76.8Zm8.5-.1h-5v6h5Zm0-10.7h-5v6h5ZM94,30.2l7.2-25.4H96.6L89.4,30.2Zm9.7,0,7.2-25.4h-4.7L99,30.2Zm23.8-.4V27.3h-.7c-.8,0-1.1-.3-1.1-1.3V18.9c0-3.8-3-5.6-6.6-5.6a16,16,0,0,0-7.1,1.5l-.6,3.8,3.8.4.5-1.9a5.2,5.2,0,0,1,2.5-.5c2.7,0,2.7,2,2.7,3.7v.6h-2.7c-3.8,0-7.7,1-7.7,5.1s2.7,4.8,5.1,4.8a6,6,0,0,0,5.3-3.3,3.4,3.4,0,0,0,3.6,3.3A6.4,6.4,0,0,0,127.5,29.8Z"/>
-</svg>
--- a/browser/base/content/test/about/browser_aboutHome_input.js
+++ b/browser/base/content/test/about/browser_aboutHome_input.js
@@ -10,16 +10,19 @@ ignoreAllUncaughtExceptions();
 add_task(async function setup() {
   // The following prefs would affect tests so make sure to disable them
   // before any tests start.
   await SpecialPowers.pushPrefEnv({set: [
     ["browser.newtabpage.activity-stream.aboutHome.enabled", false],
   ]});
 });
 
+// The following two tests need to be skipped for the time being, since we're
+// no longer showing the launcher options on about:home. When we remove about:home
+// and all of it's code, we can delete these tests
 add_task(async function() {
   info("Pressing Space while the Addons button is focused should activate it");
 
   // Skip this test on Mac, because Space doesn't activate the button there.
   if (AppConstants.platform == "macosx") {
     return;
   }
 
@@ -32,17 +35,17 @@ add_task(async function() {
       addOnsButton.focus();
     });
     await BrowserTestUtils.synthesizeKey(" ", {}, browser);
 
     await promiseTabLoaded;
     is(browser.currentURI.spec, "about:addons",
       "Should have seen the about:addons tab");
   });
-});
+}).skip();
 
 add_task(async function() {
   info("Sync button should open about:preferences#sync");
 
   await BrowserTestUtils.withNewTab({ gBrowser, url: "about:home" }, async function(browser) {
     let oldOpenPrefs = window.openPreferences;
     let openPrefsPromise = new Promise(resolve => {
       window.openPreferences = function(pane, params) {
@@ -54,17 +57,17 @@ add_task(async function() {
 
     let result = await openPrefsPromise;
     window.openPreferences = oldOpenPrefs;
 
     is(result.pane, "paneSync", "openPreferences should be called with paneSync");
     is(result.params.urlParams.entrypoint, "abouthome",
       "openPreferences should be called with abouthome entrypoint");
   });
-});
+}).skip();
 
 add_task(async function() {
   info("Pressing any key should focus the search box in the page, and send the key to it");
 
   await BrowserTestUtils.withNewTab({ gBrowser, url: "about:home" }, async function(browser) {
     await BrowserTestUtils.synthesizeMouseAtCenter("#brandLogo", {}, browser);
 
     await ContentTask.spawn(browser, null, async function() {
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -22,17 +22,16 @@ browser.jar:
         content/browser/abouthome/downloads.png       (content/abouthome/downloads.png)
         content/browser/abouthome/bookmarks.png       (content/abouthome/bookmarks.png)
         content/browser/abouthome/history.png         (content/abouthome/history.png)
         content/browser/abouthome/addons.png          (content/abouthome/addons.png)
         content/browser/abouthome/sync.png            (content/abouthome/sync.png)
         content/browser/abouthome/settings.png        (content/abouthome/settings.png)
         content/browser/abouthome/restore.png         (content/abouthome/restore.png)
         content/browser/abouthome/restore-large.png   (content/abouthome/restore-large.png)
-        content/browser/abouthome/mozilla.svg         (content/abouthome/mozilla.svg)
         content/browser/abouthome/snippet1@2x.png      (content/abouthome/snippet1@2x.png)
         content/browser/abouthome/snippet2@2x.png      (content/abouthome/snippet2@2x.png)
         content/browser/abouthome/downloads@2x.png     (content/abouthome/downloads@2x.png)
         content/browser/abouthome/bookmarks@2x.png     (content/abouthome/bookmarks@2x.png)
         content/browser/abouthome/history@2x.png       (content/abouthome/history@2x.png)
         content/browser/abouthome/addons@2x.png        (content/abouthome/addons@2x.png)
         content/browser/abouthome/sync@2x.png          (content/abouthome/sync@2x.png)
         content/browser/abouthome/settings@2x.png      (content/abouthome/settings@2x.png)