Bug 704588 - New design for about: = about:firefox = about:fennec to match about:home. ui-spec by ibarlow, r=mfinkle

This commit is contained in:
Steffen Wilberg 2011-12-21 11:40:31 +00:00
parent 748306a820
commit 858ebcd006
13 changed files with 116 additions and 120 deletions

View File

@ -1,11 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
<!DOCTYPE html [
<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
%brandDTD;
<!ENTITY % aboutDTD SYSTEM "chrome://global/locale/about.dtd" >
%aboutDTD;
<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
%globalDTD;
<!ENTITY % fennecDTD SYSTEM "chrome://browser/locale/about.dtd">
@ -58,34 +55,40 @@
<head>
<meta name="viewport" content="width=480; initial-scale=.6667; user-scalable=no"/>
<title>&aboutPage.title;</title>
<link rel="stylesheet" href="chrome://browser/skin/header.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/skin/aboutPage.css" type="text/css"/>
</head>
<body dir="&locale.dir;">
<div id="wrapper">
<div id="aboutLogoContainer">
<img src="about:logo" alt="&brandShortName;"/>
#expand <p id="version">&about.version; __MOZ_APP_VERSION__</p>
</div>
<div id="header">
<div id="wordmark"></div>
#expand <p id="version">__MOZ_APP_VERSION__</p>
</div>
<div id="banner">
<div id="logo"></div>
#ifdef MOZ_UPDATER
<button id="update" onclick="checkForUpdates();">&aboutPage.checkForUpdates.button;</button>
<span id="update-message-checking">&aboutPage.checkForUpdates.checking;</span>
<span id="update-message-none">&aboutPage.checkForUpdates.none;</span>
<span id="update-message-found">&aboutPage.checkForUpdates.found;</span>
<div id="updateBox">
<a id="updateLink" href="" onclick="checkForUpdates();">&aboutPage.checkForUpdates.link;</a>
<span id="update-message-checking">&aboutPage.checkForUpdates.checking;</span>
<span id="update-message-none">&aboutPage.checkForUpdates.none;</span>
<span id="update-message-found">&aboutPage.checkForUpdates.found;</span>
</div>
#endif
</div>
<ul id="aboutLinks">
<div class="top-border"></div>
<li><a id="faqURL">&aboutPage.faq.label;</a></li>
<li><a id="supportURL">&aboutPage.support.label;</a></li>
<li><a id="privacyURL">&aboutPage.privacyPolicy.label;</a></li>
<li><a href="about:rights">&aboutPage.rights.label;</a></li>
<li><a id="releaseNotesURL">&aboutPage.relNotes.label;</a></li>
<li><a id="creditsURL">&aboutPage.credits.label;</a></li>
<div class="bottom-border"></div>
</ul>
<div id="aboutDetails">
<p id="license"><a href="about:license">&aboutPage.licenseLink;</a>&aboutPage.licenseLinkSuffix; &logoTrademark;</p>
<p id="license"><b><a href="about:license">&aboutPage.licenseLink;</a>&aboutPage.licenseLinkSuffix;</b> &logoTrademark;</p>
<p id="aboutUA"/>
</div>
@ -130,7 +133,7 @@
return Services.prefs.getBoolPref("app.update.enabled");
}
catch (e) { }
return false; // Mobile default is false
return true; // Mobile default is true
},
startUpdate: function() {
@ -192,7 +195,7 @@
};
if (!Updater.updateEnabled)
document.getElementById("update").style.display = "none";
document.getElementById("updateBox").style.display = "none";
function checkForUpdates() {
Updater.isChecking = true;
@ -201,20 +204,20 @@
Updater.checker.checkForUpdates(UpdateCheckListener, true);
}
let updateButton = document.getElementById("update");
let updateLink = document.getElementById("updateLink");
let checkingSpan = document.getElementById("update-message-checking");
let noneSpan = document.getElementById("update-message-none");
let foundSpan = document.getElementById("update-message-found");
function showCheckingMessage() {
updateButton.style.display = "none";
updateLink.style.display = "none";
noneSpan.style.display = "none";
foundSpan.style.display = "none";
checkingSpan.style.display = "block";
}
function showUpdateMessage(aHasUpdate) {
updateButton.style.display = "none";
updateLink.style.display = "none";
checkingSpan.style.display = "none";
if (aHasUpdate) {
noneSpan.style.display = "none";
@ -228,11 +231,10 @@
noneSpan.style.display = "none";
foundSpan.style.display = "none";
checkingSpan.style.display = "none";
updateButton.style.display = "block";
updateLink.style.display = "block";
}, 2000);
}
#endif
]]></script>
</div>
</body>
</html>

View File

@ -5,7 +5,7 @@
<!ENTITY aboutPage.rights.label "Know Your Rights">
<!ENTITY aboutPage.relNotes.label "Release Notes">
<!ENTITY aboutPage.credits.label "Credits">
<!ENTITY aboutPage.checkForUpdates.button "Check for Updates">
<!ENTITY aboutPage.checkForUpdates.link "Check for Updates »">
<!ENTITY aboutPage.checkForUpdates.checking "Looking for updates…">
<!ENTITY aboutPage.checkForUpdates.none "No updates available">
<!ENTITY aboutPage.checkForUpdates.found "Update available">

View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Gavin Sharp <gavin@gavinsharp.com>
* Steffen Wilberg <steffen.wilberg@web.de>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,71 +36,102 @@
*
* ***** END LICENSE BLOCK ***** */
#aboutLogoContainer {
width: 300px;
body {
-moz-text-size-adjust: none;
font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
font-size: 23px;
color: #222222;
background-image: url("chrome://browser/skin/about-bg-lightblue.png");
}
#header {
height: 80px;
}
#wordmark {
margin: 30px 0 0 15px;
width: 123px;
height: 36px;
background: url("chrome://browser/skin/wordmark-hdpi.png") no-repeat;
}
#version {
font-weight: bold;
color: #909090;
margin: -24px 20px 0 118px;
margin: 0 0 0 15px;
font-size: 15px;
}
#update {
float: right;
padding: 8px;
margin-top: -32px;
#banner {
margin: 0 -10px;
height: 150px;
background-image: url("chrome://browser/skin/about-bg-darkblue.png");
}
body[dir="rtl"] #update {
float: left;
#logo {
position: absolute;
top: 0;
right: 0;
width: 375px;
height: 300px;
background: url("chrome://browser/skin/logo-hdpi.png") no-repeat;
}
#updateBox {
position: relative;
top: 40px;
margin: 0 auto;
width: 60%; /* looks much larger!? */
padding: 20px 1em;
text-align: center;
background-image: url("chrome://browser/skin/about-btn-darkgrey.png");
background-size: contain;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #3A3F44;
border-radius: 8px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
#update-message-checking,
#update-message-none,
#update-message-found {
display: none;
float: right;
padding: 8px;
margin-top: -32px;
}
body[dir="rtl"] #update-message-checking,
body[dir="rtl"] #update-message-none,
body[dir="rtl"] #update-message-found {
float: left;
}
#aboutLinks {
background-color: white;
padding: 5px;
border: 2px solid #e6e5e3;
font-size: 24px;
margin: 0 -10px 15px -10px;
padding: 0;
}
#aboutLinks > li {
clear: both;
border-bottom: 2px solid #e6e5e3;
list-style: none;
-moz-padding-end: 16px;
}
#aboutLinks > li:last-child {
border-bottom: 0;
line-height: 3;
border-top: 1px solid white;
border-bottom: 1px solid #C1C7CC;
}
#aboutLinks > li > a {
padding: 16px;
padding-left: 25px;
display: block;
color: #3a3834;
background: url("images/arrowright-16.png") right center no-repeat;
}
body[dir="rtl"] #aboutLinks > li > a {
background: url("images/arrowleft-16.png") left center no-repeat;
}
#aboutDetails {
margin-top: 15px;
font-size: 18px;
padding-left: 15px;
font-size: 15px;
}
.top-border {
border-bottom: 1px solid #C1C7CC;
}
.bottom-border {
border-top: 1px solid white;
}
a, span {
text-decoration: none;
color: #222222;
}
#updateBox > a,
#updateBox > span {
color: #e5f2ff;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

View File

@ -1,47 +0,0 @@
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is Mozilla Mobile Browser.
*
* The Initial Developer of the Original Code is
* Mozilla Corporation.
* Portions created by the Initial Developer are Copyright (C) 2008
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Gavin Sharp <gavin@gavinsharp.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
body {
font-family: helvetica,arial,clean,sans-serif;
color: #69645c;
background: white url("images/aboutBackground.jpg") top center repeat-x;
}
#wrapper {
max-width: 600px;
margin: 0 auto;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -12,14 +12,12 @@ chrome.jar:
* skin/browser.css (browser.css)
* skin/content.css (content.css)
skin/config.css (config.css)
skin/header.css (header.css)
skin/touchcontrols.css (touchcontrols.css)
skin/netError.css (netError.css)
% override chrome://global/skin/about.css chrome://browser/skin/about.css
% override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
skin/images/aboutBackground.jpg (images/aboutBackground.jpg)
skin/images/addons-32.png (images/addons-32.png)
skin/images/arrowleft-16.png (images/arrowleft-16.png)
skin/images/arrowright-16.png (images/arrowright-16.png)
@ -32,7 +30,7 @@ chrome.jar:
skin/images/throbber.png (images/throbber.png)
skin/images/alert-addons-30.png (images/alert-addons-30.png)
skin/images/alert-downloads-30.png (images/alert-downloads-30.png)
skin/images/forward-default-hdpi.png (images/forward-default-hdpi.png)
skin/images/forward-default-hdpi.png (images/forward-default-hdpi.png)
skin/images/remotetabs-32.png (images/remotetabs-32.png)
skin/images/sidebarbutton-active-hdpi.png (images/sidebarbutton-active-hdpi.png)
skin/images/search-clear-30.png (images/search-clear-30.png)
@ -41,6 +39,11 @@ chrome.jar:
skin/images/mute-hdpi.png (images/mute-hdpi.png)
skin/images/unmute-hdpi.png (images/unmute-hdpi.png)
skin/images/scrubber-hdpi.png (images/scrubber-hdpi.png)
skin/images/about-bg-lightblue.png (images/about-bg-lightblue.png)
skin/images/about-bg-darkblue.png (images/about-bg-darkblue.png)
skin/images/about-btn-darkgrey.png (images/about-btn-darkgrey.png)
skin/images/logo-hdpi.png (images/logo-hdpi.png)
skin/images/wordmark-hdpi.png (images/wordmark-hdpi.png)
chrome.jar:
% skin browser classic/1.0 %skin/gingerbread/ os=Android osversion=2.3 osversion=2.3.3 osversion=2.3.4 osversion=2.3.5 osversion=2.3.6 osversion=2.3.7
@ -51,14 +54,12 @@ chrome.jar:
* skin/gingerbread/browser.css (gingerbread/browser.css)
* skin/gingerbread/content.css (gingerbread/content.css)
skin/gingerbread/config.css (config.css)
skin/gingerbread/header.css (header.css)
skin/gingerbread/touchcontrols.css (touchcontrols.css)
skin/gingerbread/netError.css (netError.css)
% override chrome://global/skin/about.css chrome://browser/skin/about.css
% override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
skin/gingerbread/images/aboutBackground.jpg (gingerbread/images/aboutBackground.jpg)
skin/gingerbread/images/urlbar-bg.png (gingerbread/images/urlbar-bg.png)
skin/gingerbread/images/addons-32.png (images/addons-32.png)
skin/gingerbread/images/arrowleft-16.png (gingerbread/images/arrowleft-16.png)
@ -68,7 +69,7 @@ chrome.jar:
skin/gingerbread/images/throbber.png (gingerbread/images/throbber.png)
skin/gingerbread/images/alert-addons-30.png (gingerbread/images/alert-addons-30.png)
skin/gingerbread/images/alert-downloads-30.png (gingerbread/images/alert-downloads-30.png)
skin/gingerbread/images/forward-default-hdpi.png (gingerbread/images/forward-default-hdpi.png)
skin/gingerbread/images/forward-default-hdpi.png (gingerbread/images/forward-default-hdpi.png)
skin/gingerbread/images/remotetabs-32.png (gingerbread/images/remotetabs-32.png)
skin/gingerbread/images/search-clear-30.png (gingerbread/images/search-clear-30.png)
skin/gingerbread/images/play-hdpi.png (gingerbread/images/play-hdpi.png)
@ -79,6 +80,11 @@ chrome.jar:
skin/gingerbread/images/errorpage-warning.png (images/errorpage-warning.png)
skin/gingerbread/images/errorpage-larry-white.png (images/errorpage-larry-white.png)
skin/gingerbread/images/errorpage-larry-black.png (images/errorpage-larry-black.png)
skin/gingerbread/about-bg-lightblue.png (images/about-bg-lightblue.png)
skin/gingerbread/about-bg-darkblue.png (images/about-bg-darkblue.png)
skin/gingerbread/about-btn-darkgrey.png (images/about-btn-darkgrey.png)
skin/gingerbread/logo-hdpi.png (images/logo-hdpi.png)
skin/gingerbread/wordmark-hdpi.png (images/wordmark-hdpi.png)
chrome.jar:
% skin browser classic/1.0 %skin/honeycomb/ os=Android osversion>=3.0
@ -89,14 +95,12 @@ chrome.jar:
* skin/honeycomb/browser.css (honeycomb/browser.css)
* skin/honeycomb/content.css (content.css)
skin/honeycomb/config.css (config.css)
skin/honeycomb/header.css (header.css)
skin/honeycomb/touchcontrols.css (touchcontrols.css)
skin/honeycomb/netError.css (netError.css)
% override chrome://global/skin/about.css chrome://browser/skin/about.css
% override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
skin/honeycomb/images/aboutBackground.jpg (honeycomb/images/aboutBackground.jpg)
skin/honeycomb/images/addons-32.png (images/addons-32.png)
skin/honeycomb/images/arrowleft-16.png (honeycomb/images/arrowleft-16.png)
skin/honeycomb/images/arrowright-16.png (honeycomb/images/arrowright-16.png)
@ -105,7 +109,7 @@ chrome.jar:
skin/honeycomb/images/throbber.png (honeycomb/images/throbber.png)
skin/honeycomb/images/alert-addons-30.png (honeycomb/images/alert-addons-30.png)
skin/honeycomb/images/alert-downloads-30.png (honeycomb/images/alert-downloads-30.png)
skin/honeycomb/images/forward-default-hdpi.png (honeycomb/images/forward-default-hdpi.png)
skin/honeycomb/images/forward-default-hdpi.png (honeycomb/images/forward-default-hdpi.png)
skin/honeycomb/images/remotetabs-32.png (honeycomb/images/remotetabs-32.png)
skin/honeycomb/images/sidebarbutton-active-hdpi.png (honeycomb/images/sidebarbutton-active-hdpi.png)
skin/honeycomb/images/search-clear-30.png (honeycomb/images/search-clear-30.png)
@ -117,3 +121,8 @@ chrome.jar:
skin/honeycomb/images/errorpage-warning.png (images/errorpage-warning.png)
skin/honeycomb/images/errorpage-larry-white.png (images/errorpage-larry-white.png)
skin/honeycomb/images/errorpage-larry-black.png (images/errorpage-larry-black.png)
skin/honeycomb/about-bg-lightblue.png (images/about-bg-lightblue.png)
skin/honeycomb/about-bg-darkblue.png (images/about-bg-darkblue.png)
skin/honeycomb/about-btn-darkgrey.png (images/about-btn-darkgrey.png)
skin/honeycomb/logo-hdpi.png (images/logo-hdpi.png)
skin/honeycomb/wordmark-hdpi.png (images/wordmark-hdpi.png)