diff options
Diffstat (limited to 'application/basilisk/base/content/abouthome')
19 files changed, 552 insertions, 0 deletions
diff --git a/application/basilisk/base/content/abouthome/aboutHome.css b/application/basilisk/base/content/abouthome/aboutHome.css new file mode 100644 index 000000000..c40235c9e --- /dev/null +++ b/application/basilisk/base/content/abouthome/aboutHome.css @@ -0,0 +1,371 @@ +%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: hsl(0,0%,95%); + 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; +} + +#searchIconAndTextContainer { + width: 470px; +} + +#searchIconAndTextContainer { + display: -moz-box; + height: 36px; + position: relative; +} + +#searchIcon { + border: 1px transparent; + padding: 0; + margin: 0; + width: 36px; + 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); + color: inherit; + unicode-bidi: plaintext; +} + +#searchText:dir(rtl) { + border-radius: 0 2px 2px 0; +} + +#searchText[aria-expanded="true"] { + border-radius: 2px 0 0 0; +} + +#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); +} + +#searchSubmit { + margin-inline-start: -1px; + color: transparent; + background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box; + padding: 0; + border: 1px solid; + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); + border-radius: 0 2px 2px 0; + border-inline-start: 1px solid transparent; + box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, + 0 1px 0 hsla(0,0%,100%,.2); + cursor: pointer; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + width: 50px; +} + +#searchSubmit:dir(rtl) { + border-radius: 2px 0 0 2px; + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl"), linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.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#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5); + 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:focus + #searchSubmit:dir(rtl), +#searchText[keepfocus] + #searchSubmit:dir(rtl), +#searchText[autofocus] + #searchSubmit:dir(rtl) { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#4cb1ff, #1793e5); +} + +#searchText + #searchSubmit:hover { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#66bdff, #0d9eff); + 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:dir(rtl):hover { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#66bdff, #0d9eff); +} + +#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; +} + +#launcher { + display: -moz-box; + -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 */ + 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: 2px; + 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"); +} + +#sync::before { + content: url("chrome://browser/content/abouthome/sync.png"); +} + +#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: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, + #aboutMozilla::before { + transform: scale(.5); + transform-origin: 0 0; + } + + .launchButton:dir(rtl)::before, + #aboutMozilla:dir(rtl)::before { + transform: scale(.5) translateX(32px); + } + + #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"); + } + + #sync::before { + content: url("chrome://browser/content/abouthome/sync@2x.png"); + } + + #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"); + } + + #restorePreviousSession:dir(rtl)::before { + transform: scale(-0.5, 0.5) translateX(24px); + transform-origin: top center; + } +} + diff --git a/application/basilisk/base/content/abouthome/aboutHome.js b/application/basilisk/base/content/abouthome/aboutHome.js new file mode 100644 index 000000000..f7fdaee81 --- /dev/null +++ b/application/basilisk/base/content/abouthome/aboutHome.js @@ -0,0 +1,113 @@ +/* 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/. */ + +"use strict"; + +/* import-globals-from ../contentSearchUI.js */ + +var searchText; + +// 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) { + // The addition of the restore session button changes our width: + if (mutation.attributeName == "session") { + fitToWidth(); + } + } +}); + +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); +}); + +window.addEventListener("pagehide", function() { + window.gObserver.disconnect(); + window.removeEventListener("resize", fitToWidth); +}); + +window.addEventListener("keypress", ev => { + if (ev.defaultPrevented) { + return; + } + + // don't focus the search-box on keypress if something other than the + // body or document element has focus - don't want to steal input from other elements + // Make an exception for <a> and <button> elements (and input[type=button|submit]) + // which don't usefully take keypresses anyway. + // (except space, which is handled below) + if (document.activeElement && document.activeElement != document.body && + document.activeElement != document.documentElement && + !["a", "button"].includes(document.activeElement.localName) && + !document.activeElement.matches("input:-moz-any([type=button],[type=submit])")) { + return; + } + + let modifiers = ev.ctrlKey + ev.altKey + ev.metaKey; + // ignore Ctrl/Cmd/Alt, but not Shift + // also ignore Tab, Insert, PageUp, etc., and Space + if (modifiers != 0 || ev.charCode == 0 || ev.charCode == 32) + return; + + searchText.focus(); + // need to send the first keypress outside the search-box manually to it + searchText.value += ev.key; +}); + +function onSearchSubmit(aEvent) { + gContentSearchController.search(aEvent); +} + + +var gContentSearchController; + +function setupSearch() { + // Set submit button label for when CSS background are disabled (e.g. + // high contrast mode). + document.getElementById("searchSubmit").value = + document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0"; + + // 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. + searchText = document.getElementById("searchText"); + searchText.addEventListener("blur", function searchText_onBlur() { + searchText.removeEventListener("blur", searchText_onBlur); + searchText.removeAttribute("autofocus"); + }); + + if (!gContentSearchController) { + gContentSearchController = + new ContentSearchUIController(searchText, searchText.parentNode, + "abouthome", "homepage"); + } +} + +/** + * Inform the test harness that we're done loading the page. + */ +function loadCompleted() { + var event = new CustomEvent("AboutHomeLoadSnippetsCompleted", {bubbles:true}); + document.dispatchEvent(event); +} + +function fitToWidth() { + if (document.documentElement.scrollWidth > window.innerWidth) { + document.body.setAttribute("narrow", "true"); + } else if (document.body.hasAttribute("narrow")) { + document.body.removeAttribute("narrow"); + fitToWidth(); + } +} diff --git a/application/basilisk/base/content/abouthome/aboutHome.xhtml b/application/basilisk/base/content/abouthome/aboutHome.xhtml new file mode 100644 index 000000000..d98b2d1b1 --- /dev/null +++ b/application/basilisk/base/content/abouthome/aboutHome.xhtml @@ -0,0 +1,68 @@ +<?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/contentSearchUI.css"/> + <link rel="stylesheet" type="text/css" media="all" defer="defer" + href="chrome://browser/content/abouthome/aboutHome.css"/> + + <script type="text/javascript;version=1.8" + src="chrome://browser/content/abouthome/aboutHome.js"/> + <script type="text/javascript;version=1.8" + src="chrome://browser/content/contentSearchUI.js"/> + </head> + + <body dir="&locale.dir;"> + <div class="spacer"/> + <div id="topSection"> + <div id="brandLogo"></div> + + <div id="searchIconAndTextContainer"> + <div id="searchIcon"/> + <input type="text" name="q" value="" id="searchText" maxlength="256" + aria-label="&contentSearchInput.label;" autofocus="autofocus"/> + <input id="searchSubmit" type="button" onclick="onSearchSubmit(event)" + title="&contentSearchSubmit.tooltip;"/> + </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> + <button class="launchButton" id="sync">&abouthome.syncButton.label;</button> +#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> + </body> +</html> diff --git a/application/basilisk/base/content/abouthome/addons.png b/application/basilisk/base/content/abouthome/addons.png Binary files differnew file mode 100644 index 000000000..41519ce49 --- /dev/null +++ b/application/basilisk/base/content/abouthome/addons.png diff --git a/application/basilisk/base/content/abouthome/addons@2x.png b/application/basilisk/base/content/abouthome/addons@2x.png Binary files differnew file mode 100644 index 000000000..d4d04ee8c --- /dev/null +++ b/application/basilisk/base/content/abouthome/addons@2x.png diff --git a/application/basilisk/base/content/abouthome/bookmarks.png b/application/basilisk/base/content/abouthome/bookmarks.png Binary files differnew file mode 100644 index 000000000..5c7e194a6 --- /dev/null +++ b/application/basilisk/base/content/abouthome/bookmarks.png diff --git a/application/basilisk/base/content/abouthome/bookmarks@2x.png b/application/basilisk/base/content/abouthome/bookmarks@2x.png Binary files differnew file mode 100644 index 000000000..7ede00744 --- /dev/null +++ b/application/basilisk/base/content/abouthome/bookmarks@2x.png diff --git a/application/basilisk/base/content/abouthome/downloads.png b/application/basilisk/base/content/abouthome/downloads.png Binary files differnew file mode 100644 index 000000000..3d4d10e7a --- /dev/null +++ b/application/basilisk/base/content/abouthome/downloads.png diff --git a/application/basilisk/base/content/abouthome/downloads@2x.png b/application/basilisk/base/content/abouthome/downloads@2x.png Binary files differnew file mode 100644 index 000000000..d384a22c6 --- /dev/null +++ b/application/basilisk/base/content/abouthome/downloads@2x.png diff --git a/application/basilisk/base/content/abouthome/history.png b/application/basilisk/base/content/abouthome/history.png Binary files differnew file mode 100644 index 000000000..ae742b1aa --- /dev/null +++ b/application/basilisk/base/content/abouthome/history.png diff --git a/application/basilisk/base/content/abouthome/history@2x.png b/application/basilisk/base/content/abouthome/history@2x.png Binary files differnew file mode 100644 index 000000000..696902e7c --- /dev/null +++ b/application/basilisk/base/content/abouthome/history@2x.png diff --git a/application/basilisk/base/content/abouthome/restore-large.png b/application/basilisk/base/content/abouthome/restore-large.png Binary files differnew file mode 100644 index 000000000..ef593e6e1 --- /dev/null +++ b/application/basilisk/base/content/abouthome/restore-large.png diff --git a/application/basilisk/base/content/abouthome/restore-large@2x.png b/application/basilisk/base/content/abouthome/restore-large@2x.png Binary files differnew file mode 100644 index 000000000..d5c71d0b0 --- /dev/null +++ b/application/basilisk/base/content/abouthome/restore-large@2x.png diff --git a/application/basilisk/base/content/abouthome/restore.png b/application/basilisk/base/content/abouthome/restore.png Binary files differnew file mode 100644 index 000000000..5c3d6f437 --- /dev/null +++ b/application/basilisk/base/content/abouthome/restore.png diff --git a/application/basilisk/base/content/abouthome/restore@2x.png b/application/basilisk/base/content/abouthome/restore@2x.png Binary files differnew file mode 100644 index 000000000..5acb63052 --- /dev/null +++ b/application/basilisk/base/content/abouthome/restore@2x.png diff --git a/application/basilisk/base/content/abouthome/settings.png b/application/basilisk/base/content/abouthome/settings.png Binary files differnew file mode 100644 index 000000000..4b0c30990 --- /dev/null +++ b/application/basilisk/base/content/abouthome/settings.png diff --git a/application/basilisk/base/content/abouthome/settings@2x.png b/application/basilisk/base/content/abouthome/settings@2x.png Binary files differnew file mode 100644 index 000000000..c77cb9a92 --- /dev/null +++ b/application/basilisk/base/content/abouthome/settings@2x.png diff --git a/application/basilisk/base/content/abouthome/sync.png b/application/basilisk/base/content/abouthome/sync.png Binary files differnew file mode 100644 index 000000000..11e40cc93 --- /dev/null +++ b/application/basilisk/base/content/abouthome/sync.png diff --git a/application/basilisk/base/content/abouthome/sync@2x.png b/application/basilisk/base/content/abouthome/sync@2x.png Binary files differnew file mode 100644 index 000000000..6354f5bf9 --- /dev/null +++ b/application/basilisk/base/content/abouthome/sync@2x.png |
