diff options
Diffstat (limited to 'browser/components/abouthome')
21 files changed, 571 insertions, 0 deletions
diff --git a/browser/components/abouthome/aboutHome.css b/browser/components/abouthome/aboutHome.css new file mode 100644 index 000000000..bb730b489 --- /dev/null +++ b/browser/components/abouthome/aboutHome.css @@ -0,0 +1,349 @@ +%if 0 +/* 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: #eee; + color: #000; + height: 100%; +} + +body { + margin: 0; + display: -moz-box; + -moz-box-orient: vertical; + width: 100%; + height: 100%; +} + +input, +button { + font-size: inherit; + font-family: inherit; +} + +a { + color: -moz-nativehyperlinktext; + text-decoration: none; +} + +.spacer { + -moz-box-flex: 1; +} + +#topSection { + text-align: center; +} + +#brandLogo { + height: 192px; + width: 192px; + margin: 22px auto 31px; + background-image: url("chrome://branding/content/about-logo.png"); + background-size: 192px auto; + background-position: center center; + background-repeat: no-repeat; +} + +/* SEARCH */ +#searchContainer { + display: -moz-box; + position: relative; + -moz-box-pack: center; + margin: 10px 0 15px; +} + +#searchForm { + width: 470px; + display: -moz-box; + position: relative; + height: 36px; /* 32 px logo + 2*1px pad + 2*1px border */ + -moz-box-flex: 1; + max-width: 600px; +} + +#searchEngineLogo { + border: 1px transparent; + padding: 4px; + margin: 0; + width: 28px; + height: 28px; + position: absolute; +} + +#searchText { + -moz-box-flex: 1; + padding-top: 6px; + padding-bottom: 6px; + padding-inline-start: 38px; /* room for logo */ + padding-inline-end: 8px; + background: rgba(255, 255, 255, 0.9) padding-box; + border: 1px solid; + border-color: rgba(37, 46, 65, 0.15) rgba(37, 46, 65, 0.17) rgba(37, 46, 65, 0.2); + box-shadow: 0 1px 0 rgba(37, 46, 65, 0.02) inset, + 0 0 2px rgba(37, 46, 65, 0.1) inset, + 0 1px 0 rgba(255, 255, 255, 0.2); + border-radius: 2.5px 0 0 2.5px; +} + +#searchText:-moz-dir(rtl) { + border-radius: 0 2.5px 2.5px 0; +} + +#searchText:focus, +#searchText[autofocus] { + border-color: rgba(92, 133, 214, 0.6) rgba(78, 114, 188, 0.6) rgba(41, 82, 163, 0.6); +} + +#searchText::placeholder { + font-style: italic; + opacity: 0.3; +} + +#searchSubmit { + margin-inline-start: -1px; + background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) padding-box; + padding: 0 9px; + border: 1px solid; + border-color: rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2); + border-inline-start: 1px solid transparent; + border-radius: 0 2.5px 2.5px 0; + box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset, + 0 1px 0 rgba(255, 255, 255, 0.2); + cursor: pointer; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; +} + +#searchSubmit:-moz-dir(rtl) { + border-radius: 2.5px 0 0 2.5px; +} + +#searchText:focus + #searchSubmit, +#searchText + #searchSubmit:hover, +#searchText[autofocus] + #searchSubmit { + border-color: #8da1c8 #768bb5 #6579a2; + color: white; +} + +#searchText:focus + #searchSubmit, +#searchText[autofocus] + #searchSubmit { + background-image: linear-gradient(#85a8e0, #3d75cf); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, + 0 0 0 1px rgba(255, 255, 255, 0.1) inset, + 0 1px 0 rgba(23, 46, 67, 0.03); +} + +#searchText + #searchSubmit:hover { + background-image: linear-gradient(#85a8e0, #3d75cf); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, + 0 0 0 1px rgba(255, 255, 255, 0.1) inset, + 0 1px 0 rgba(23, 42, 79, 0.03), + 0 0 4px rgba(0, 34, 102, 0.2);} + +#searchText + #searchSubmit:hover:active { + box-shadow: 0 1px 1px rgba(3, 11, 27, 0.1) inset, + 0 0 1px rgba(3, 11, 27, 0.2) inset; + transition-duration: 0ms; +} + +/* LAUNCHER */ +#launcher { + display: -moz-box; + -moz-box-align: center; + -moz-box-pack: center; + width: 100%; + background-color: rgba(0, 0, 0, 0.03); + border-top: 1px solid rgba(0, 0, 0, 0.03); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset, + 0 -1px 0 rgba(255, 255, 255, 0.25); +} + +#launcher:not([session]), +body[narrow] #launcher[session] { + display: block; /* 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; + padding: 14px 6px; + min-width: 88px; + max-width: 176px; + max-height: 85px; + vertical-align: top; + white-space: normal; + background: transparent padding-box; + border: 1px solid transparent; + border-radius: 2.5px; + color: #525c66; + font-size: 75%; + cursor: pointer; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; +} + +body[narrow] #launcher[session] > .launchButton { + margin: 4px 1px; +} + +.launchButton:hover { + background-color: hsla(211,79%,6%,.03); + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); +} + +.launchButton:hover:active { + background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05)); + border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25); + box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset, + 0 0 1px hsla(211,79%,6%,.1) inset; + transition-duration: 0ms; +} + +.launchButton[hidden], +#launcher:not([session]) > #restorePreviousSessionSeparator, +#launcher:not([session]) > #restorePreviousSession { + display: none; +} + +#restorePreviousSessionSeparator { + width: 3px; + height: 116px; + margin: 0 10px; + background-image: linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)), + linear-gradient(hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)), + linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)); + background-position: left top, center, right bottom; + background-size: 1px auto; + background-repeat: no-repeat; +} + +body[narrow] #restorePreviousSessionSeparator { + margin: 0 auto; + width: 512px; + height: 3px; + background-image: linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)), + linear-gradient(to right, hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)), + linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)); + background-size: auto 1px; +} + +#restorePreviousSession { + max-width: none; + font-size: 90%; +} + +body[narrow] #restorePreviousSession { + font-size: 80%; +} + +.launchButton::before { + display: block; + width: 32px; + height: 32px; + margin: 0 auto 6px; + line-height: 0; /* remove extra vertical space due to non-zero font-size */ +} + +#downloads::before { + content: url("chrome://browser/content/abouthome/downloads.png"); +} + +#bookmarks::before { + content: url("chrome://browser/content/abouthome/bookmarks.png"); +} + +#history::before { + content: url("chrome://browser/content/abouthome/history.png"); +} + +#addons::before { + content: url("chrome://browser/content/abouthome/addons.png"); +} + +%ifdef MOZ_SERVICES_SYNC +#sync::before { + content: url("chrome://browser/content/abouthome/sync.png"); +} +%endif + +#settings::before { + content: url("chrome://browser/content/abouthome/settings.png"); +} + +#restorePreviousSession::before { + content: url("chrome://browser/content/abouthome/restore-large.png"); + height: 48px; + width: 48px; + display: inline-block; /* display on same line as text label */ + vertical-align: middle; + margin-bottom: 0; + margin-inline-end: 8px; +} + +#restorePreviousSession:-moz-dir(rtl)::before { + transform: scaleX(-1); +} + +body[narrow] #restorePreviousSession::before { + content: url("chrome://browser/content/abouthome/restore.png"); + height: 32px; + width: 32px; +} + +/* [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"); + } + + .launchButton::before { + transform: scale(.5); + transform-origin: 0 0; + } + + #downloads::before { + content: url("chrome://browser/content/abouthome/downloads@2x.png"); + } + + #bookmarks::before { + content: url("chrome://browser/content/abouthome/bookmarks@2x.png"); + } + + #history::before { + content: url("chrome://browser/content/abouthome/history@2x.png"); + } + + #addons::before { + content: url("chrome://browser/content/abouthome/addons@2x.png"); + } + +%ifdef MOZ_SERVICES_SYNC + #sync::before { + content: url("chrome://browser/content/abouthome/sync@2x.png"); + } +%endif + + #settings::before { + content: url("chrome://browser/content/abouthome/settings@2x.png"); + } + + #restorePreviousSession::before { + content: url("chrome://browser/content/abouthome/restore-large@2x.png"); + } + + body[narrow] #restorePreviousSession::before { + content: url("chrome://browser/content/abouthome/restore@2x.png"); + } +} + diff --git a/browser/components/abouthome/aboutHome.js b/browser/components/abouthome/aboutHome.js new file mode 100644 index 000000000..686644673 --- /dev/null +++ b/browser/components/abouthome/aboutHome.js @@ -0,0 +1,125 @@ +/* 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/. */ + +#include ../shared/searchenginelogos.js + +// This global tracks if the page has been set up before, to prevent double inits +var gInitialized = false; +var gObserver = new MutationObserver(function (mutations) { + for (let mutation of mutations) { + if (mutation.attributeName == "searchEngineURL") { + setupSearchEngine(); + if (!gInitialized) { + gInitialized = true; + } + return; + } + } +}); + +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 }); + fitToWidth(); + window.addEventListener("resize", fitToWidth); +}); + +window.addEventListener("pagehide", function() { + window.gObserver.disconnect(); + window.removeEventListener("resize", fitToWidth); +}); + +function onSearchSubmit(aEvent) +{ + let searchTerms = document.getElementById("searchText").value; + let searchURL = document.documentElement.getAttribute("searchEngineURL"); + + if (searchURL && searchTerms.length > 0) { + // Send an event that a search was performed. This was originally + // added so Firefox Health Report could record that a search from + // about:home had occurred. + let engineName = document.documentElement.getAttribute("searchEngineName"); + let event = new CustomEvent("AboutHomeSearchEvent", {detail: engineName}); + document.dispatchEvent(event); + + const SEARCH_TOKEN = "_searchTerms_"; + let searchPostData = document.documentElement.getAttribute("searchEnginePostData"); + if (searchPostData) { + // Check if a post form already exists. If so, remove it. + const POST_FORM_NAME = "searchFormPost"; + let form = document.forms[POST_FORM_NAME]; + if (form) { + form.parentNode.removeChild(form); + } + + // Create a new post form. + form = document.body.appendChild(document.createElement("form")); + form.setAttribute("name", POST_FORM_NAME); + // Set the URL to submit the form to. + form.setAttribute("action", searchURL.replace(SEARCH_TOKEN, searchTerms)); + form.setAttribute("method", "post"); + + // Create new <input type=hidden> elements for search param. + searchPostData = searchPostData.split("&"); + for (let postVar of searchPostData) { + let [name, value] = postVar.split("="); + if (value == SEARCH_TOKEN) { + value = searchTerms; + } + let input = document.createElement("input"); + input.setAttribute("type", "hidden"); + input.setAttribute("name", name); + input.setAttribute("value", value); + form.appendChild(input); + } + // Submit the form. + form.submit(); + } else { + searchURL = searchURL.replace(SEARCH_TOKEN, encodeURIComponent(searchTerms)); + window.location.href = searchURL; + } + } + + aEvent.preventDefault(); +} + + +function setupSearchEngine() +{ + // The "autofocus" attribute doesn't focus the form element + // immediately when the element is first drawn, so the + // attribute is also used for styling when the page first loads. + let searchText = document.getElementById("searchText"); + searchText.addEventListener("blur", function searchText_onBlur() { + searchText.removeEventListener("blur", searchText_onBlur); + searchText.removeAttribute("autofocus"); + }); + + let searchEngineName = document.documentElement.getAttribute("searchEngineName"); + let searchEngineInfo = SEARCH_ENGINES[searchEngineName]; + let logoElt = document.getElementById("searchEngineLogo"); + + // Add search engine logo. + if (searchEngineInfo && searchEngineInfo.image) { + logoElt.parentNode.hidden = false; + logoElt.src = searchEngineInfo.image; + logoElt.alt = searchEngineName; + searchText.placeholder = ""; + } else { + logoElt.parentNode.hidden = false; + logoElt.src = SEARCH_ENGINES['generic'].image; + searchText.placeholder = searchEngineName; + } + +} + +function fitToWidth() { + if (window.scrollMaxX) { + document.body.setAttribute("narrow", "true"); + } else if (document.body.hasAttribute("narrow")) { + document.body.removeAttribute("narrow"); + fitToWidth(); + } +} diff --git a/browser/components/abouthome/aboutHome.xhtml b/browser/components/abouthome/aboutHome.xhtml new file mode 100644 index 000000000..d72ec492e --- /dev/null +++ b/browser/components/abouthome/aboutHome.xhtml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<!-- 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/. --> + +<!DOCTYPE html [ + <!ENTITY % htmlDTD + PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "DTD/xhtml1-strict.dtd"> + %htmlDTD; + <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> + %globalDTD; + <!ENTITY % aboutHomeDTD SYSTEM "chrome://browser/locale/aboutHome.dtd"> + %aboutHomeDTD; + <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd" > + %browserDTD; +]> + +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>&abouthome.pageTitle;</title> + + <link rel="icon" type="image/png" id="favicon" + href="chrome://branding/content/icon32.png"/> + <link rel="stylesheet" type="text/css" media="all" + href="chrome://browser/content/abouthome/aboutHome.css"/> + + <script type="text/javascript;version=1.8" + src="chrome://browser/content/abouthome/aboutHome.js"/> + </head> + + <body dir="&locale.dir;"> + <div class="spacer"/> + <div id="topSection"> + <div id="brandLogo"></div> + + <div id="searchContainer"> + <form name="searchForm" id="searchForm" onsubmit="onSearchSubmit(event)"> + <div id="searchLogoContainer"><img id="searchEngineLogo"/></div> + <input type="text" name="q" value="" id="searchText" maxlength="256" + autofocus="autofocus"/> + <input id="searchSubmit" type="submit" value="&abouthome.searchEngineButton.label;"/> + </form> + </div> + </div> + <div class="spacer"/> + + <div id="launcher"> + <button class="launchButton" id="downloads">&abouthome.downloadsButton.label;</button> + <button class="launchButton" id="bookmarks">&abouthome.bookmarksButton.label;</button> + <button class="launchButton" id="history">&abouthome.historyButton.label;</button> + <button class="launchButton" id="addons">&abouthome.addonsButton.label;</button> +#ifdef MOZ_SERVICES_SYNC + <button class="launchButton" id="sync">&abouthome.syncButton.label;</button> +#endif + <button class="launchButton" id="settings">&abouthome.settingsButton.label;</button> + <div id="restorePreviousSessionSeparator"/> + <button class="launchButton" id="restorePreviousSession">&historyRestoreLastSession.label;</button> + </div> + </body> +</html> diff --git a/browser/components/abouthome/addons.png b/browser/components/abouthome/addons.png Binary files differnew file mode 100644 index 000000000..41519ce49 --- /dev/null +++ b/browser/components/abouthome/addons.png diff --git a/browser/components/abouthome/addons@2x.png b/browser/components/abouthome/addons@2x.png Binary files differnew file mode 100644 index 000000000..d4d04ee8c --- /dev/null +++ b/browser/components/abouthome/addons@2x.png diff --git a/browser/components/abouthome/bookmarks.png b/browser/components/abouthome/bookmarks.png Binary files differnew file mode 100644 index 000000000..5c7e194a6 --- /dev/null +++ b/browser/components/abouthome/bookmarks.png diff --git a/browser/components/abouthome/bookmarks@2x.png b/browser/components/abouthome/bookmarks@2x.png Binary files differnew file mode 100644 index 000000000..7ede00744 --- /dev/null +++ b/browser/components/abouthome/bookmarks@2x.png diff --git a/browser/components/abouthome/downloads.png b/browser/components/abouthome/downloads.png Binary files differnew file mode 100644 index 000000000..3d4d10e7a --- /dev/null +++ b/browser/components/abouthome/downloads.png diff --git a/browser/components/abouthome/downloads@2x.png b/browser/components/abouthome/downloads@2x.png Binary files differnew file mode 100644 index 000000000..d384a22c6 --- /dev/null +++ b/browser/components/abouthome/downloads@2x.png diff --git a/browser/components/abouthome/history.png b/browser/components/abouthome/history.png Binary files differnew file mode 100644 index 000000000..ae742b1aa --- /dev/null +++ b/browser/components/abouthome/history.png diff --git a/browser/components/abouthome/history@2x.png b/browser/components/abouthome/history@2x.png Binary files differnew file mode 100644 index 000000000..696902e7c --- /dev/null +++ b/browser/components/abouthome/history@2x.png diff --git a/browser/components/abouthome/jar.mn b/browser/components/abouthome/jar.mn new file mode 100644 index 000000000..d9499347c --- /dev/null +++ b/browser/components/abouthome/jar.mn @@ -0,0 +1,28 @@ +# 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/. + +browser.jar: +* content/browser/abouthome/aboutHome.xhtml +* content/browser/abouthome/aboutHome.js +* content/browser/abouthome/aboutHome.css + content/browser/abouthome/downloads.png + content/browser/abouthome/bookmarks.png + content/browser/abouthome/history.png + content/browser/abouthome/addons.png +#ifdef MOZ_SERVICES_SYNC + content/browser/abouthome/sync.png +#endif + content/browser/abouthome/settings.png + content/browser/abouthome/restore.png + content/browser/abouthome/restore-large.png + content/browser/abouthome/downloads@2x.png + content/browser/abouthome/bookmarks@2x.png + content/browser/abouthome/history@2x.png + content/browser/abouthome/addons@2x.png +#ifdef MOZ_SERVICES_SYNC + content/browser/abouthome/sync@2x.png +#endif + content/browser/abouthome/settings@2x.png + content/browser/abouthome/restore@2x.png + content/browser/abouthome/restore-large@2x.png
\ No newline at end of file diff --git a/browser/components/abouthome/moz.build b/browser/components/abouthome/moz.build new file mode 100644 index 000000000..8267a660d --- /dev/null +++ b/browser/components/abouthome/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*- +# 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/. + +JAR_MANIFESTS += ['jar.mn'] + diff --git a/browser/components/abouthome/restore-large.png b/browser/components/abouthome/restore-large.png Binary files differnew file mode 100644 index 000000000..ef593e6e1 --- /dev/null +++ b/browser/components/abouthome/restore-large.png diff --git a/browser/components/abouthome/restore-large@2x.png b/browser/components/abouthome/restore-large@2x.png Binary files differnew file mode 100644 index 000000000..d5c71d0b0 --- /dev/null +++ b/browser/components/abouthome/restore-large@2x.png diff --git a/browser/components/abouthome/restore.png b/browser/components/abouthome/restore.png Binary files differnew file mode 100644 index 000000000..5c3d6f437 --- /dev/null +++ b/browser/components/abouthome/restore.png diff --git a/browser/components/abouthome/restore@2x.png b/browser/components/abouthome/restore@2x.png Binary files differnew file mode 100644 index 000000000..5acb63052 --- /dev/null +++ b/browser/components/abouthome/restore@2x.png diff --git a/browser/components/abouthome/settings.png b/browser/components/abouthome/settings.png Binary files differnew file mode 100644 index 000000000..4b0c30990 --- /dev/null +++ b/browser/components/abouthome/settings.png diff --git a/browser/components/abouthome/settings@2x.png b/browser/components/abouthome/settings@2x.png Binary files differnew file mode 100644 index 000000000..c77cb9a92 --- /dev/null +++ b/browser/components/abouthome/settings@2x.png diff --git a/browser/components/abouthome/sync.png b/browser/components/abouthome/sync.png Binary files differnew file mode 100644 index 000000000..11e40cc93 --- /dev/null +++ b/browser/components/abouthome/sync.png diff --git a/browser/components/abouthome/sync@2x.png b/browser/components/abouthome/sync@2x.png Binary files differnew file mode 100644 index 000000000..6354f5bf9 --- /dev/null +++ b/browser/components/abouthome/sync@2x.png |
