--- 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&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)