Bug 1009370 - Part 2: Implement new visual style for about:privatebrowsing. r=Unfocused ui-r=phlsa

This commit is contained in:
Birunthan Mohanathas 2014-08-26 07:11:07 -07:00
parent 6737eb669c
commit 24493de68f
13 changed files with 98 additions and 190 deletions

View File

@ -0,0 +1,56 @@
%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
@import url("chrome://global/skin/in-content/common.css");
body {
display: flex;
box-sizing: padding-box;
min-height: 100vh;
padding: 0 48px;
align-items: center;
justify-content: center;
}
#pageContainer {
min-width: 320px;
max-width: 512px;
}
.titleText {
background: url("chrome://browser/skin/mask.png") left 0 no-repeat;
background-size: 45px;
-moz-margin-start: -2em;
-moz-padding-start: 2em;
}
.titleText:-moz-dir(rtl) {
background-position: right 0;
}
@media (min-resolution: 2dppx) {
.titleText {
background-image: url("chrome://browser/skin/mask@2x.png");
}
}
@media (max-width: 675px) {
.titleText {
padding-top: 0;
background-image: none;
-moz-margin-start: 0;
-moz-padding-start: 0;
}
}
a {
font-size: 1rem;
}
button {
margin-top: 1.2em;
-moz-margin-start: 0;
}

View File

@ -13,14 +13,13 @@
%brandDTD;
<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
%browserDTD;
<!ENTITY % privatebrowsingpageDTD SYSTEM "chrome://browser/locale/aboutPrivateBrowsing.dtd">
%privatebrowsingpageDTD;
<!ENTITY % aboutPrivateBrowsingDTD SYSTEM "chrome://browser/locale/aboutPrivateBrowsing.dtd">
%aboutPrivateBrowsingDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="chrome://global/skin/netError.css" type="text/css" media="all"/>
<link rel="stylesheet" href="chrome://browser/skin/aboutPrivateBrowsing.css" type="text/css" media="all"/>
<link rel="stylesheet" href="chrome://browser/content/aboutPrivateBrowsing.css" type="text/css" media="all"/>
<style type="text/css"><![CDATA[
body.normal .showPrivate,
body.private .showNormal {
@ -34,11 +33,11 @@
Components.utils.import("resource://gre/modules/PrivateBrowsingUtils.jsm");
if (!PrivateBrowsingUtils.isWindowPrivate(window)) {
document.title = "]]>&privatebrowsingpage.title.normal;<![CDATA[";
document.title = "]]>&aboutPrivateBrowsing.title.normal;<![CDATA[";
setFavIcon("chrome://global/skin/icons/question-16.png");
} else {
#ifndef XP_MACOSX
document.title = "]]>&privatebrowsingpage.title;<![CDATA[";
document.title = "]]>&aboutPrivateBrowsing.title;<![CDATA[";
#endif
setFavIcon("chrome://browser/skin/Privacy-16.png");
}
@ -83,12 +82,12 @@
class="private">
<!-- PAGE CONTAINER (for styling purposes only) -->
<div id="errorPageContainer">
<div id="pageContainer">
<!-- Error Title -->
<div id="errorTitle">
<h1 id="errorTitleText" class="showPrivate">&privatebrowsingpage.title;</h1>
<h1 id="errorTitleTextNormal" class="showNormal">&privatebrowsingpage.title.normal;</h1>
<h1 class="titleText showPrivate">&aboutPrivateBrowsing.title;</h1>
<h1 class="titleText showNormal">&aboutPrivateBrowsing.title.normal;</h1>
</div>
<!-- LONG CONTENT (the section most likely to require scrolling) -->
@ -96,36 +95,31 @@
<!-- Short Description -->
<div id="errorShortDesc">
<p id="errorShortDescText" class="showPrivate">&privatebrowsingpage.perwindow.issueDesc;</p>
<p id="errorShortDescTextNormal" class="showNormal">&privatebrowsingpage.perwindow.issueDesc.normal;</p>
<p id="errorShortDescText" class="showPrivate">&aboutPrivateBrowsing.subtitle;</p>
<p id="errorShortDescTextNormal" class="showNormal">&aboutPrivateBrowsing.subtitle.normal;</p>
</div>
<!-- Long Description -->
<div id="errorLongDesc">
<p id="errorLongDescText">&privatebrowsingpage.perwindow.description;</p>
<p id="errorLongDescText">&aboutPrivateBrowsing.description;</p>
</div>
<p class="showNormal">&aboutPrivateBrowsing.notPrivate;</p>
<!-- Start Private Browsing -->
<div id="startPrivateBrowsingDesc" class="showNormal">
<button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="startPrivateBrowsing" label="&privatebrowsingpage.openPrivateWindow.label;"
accesskey="&privatebrowsingpage.openPrivateWindow.accesskey;"
oncommand="openPrivateWindow();"/>
</div>
<!-- Footer -->
<div id="footerDesc">
<p id="footerText" class="showPrivate">&privatebrowsingpage.howToStop3;</p>
<p id="footerTextNormal" class="showNormal">&privatebrowsingpage.howToStart4;</p>
</div>
<button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="startPrivateBrowsing" class="showNormal"
label="&privatebrowsingpage.openPrivateWindow.label;"
accesskey="&privatebrowsingpage.openPrivateWindow.accesskey;"
oncommand="openPrivateWindow();"/>
<!-- More Info -->
<div id="moreInfo" class="showPrivate">
<p id="moreInfoText">
&privatebrowsingpage.moreInfo;
&aboutPrivateBrowsing.moreInfo;
</p>
<p id="moreInfoLinkContainer">
<a id="moreInfoLink" target="_blank">&privatebrowsingpage.learnMore;</a>
<a id="moreInfoLink" target="_blank">&aboutPrivateBrowsing.learnMore;</a>
</p>
</div>
</div>

View File

@ -3,4 +3,5 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
browser.jar:
* content/browser/aboutPrivateBrowsing.css (content/aboutPrivateBrowsing.css)
* content/browser/aboutPrivateBrowsing.xhtml (content/aboutPrivateBrowsing.xhtml)

View File

@ -24,7 +24,7 @@ function test() {
if (isOSX) {
page_with_title = test_title;
page_without_title = app_name;
about_pb_title = "Would you like to start Private Browsing?";
about_pb_title = "Open a private window?";
pb_page_with_title = test_title + " - (Private Browsing)";
pb_page_without_title = app_name + " - (Private Browsing)";
pb_about_pb_title = pb_page_without_title;
@ -32,10 +32,10 @@ function test() {
else {
page_with_title = test_title + " - " + app_name;
page_without_title = app_name;
about_pb_title = "Would you like to start Private Browsing?" + " - " + app_name;
about_pb_title = "Open a private window?" + " - " + app_name;
pb_page_with_title = test_title + " - " + app_name + " (Private Browsing)";
pb_page_without_title = app_name + " (Private Browsing)";
pb_about_pb_title = "Private Browsing - " + app_name + " (Private Browsing)";
pb_about_pb_title = "You're browsing privately - " + app_name + " (Private Browsing)";
}
function testTabTitle(aWindow, url, insidePB, expected_title, funcNext) {

View File

@ -2,25 +2,22 @@
- 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/. -->
<!ENTITY privatebrowsingpage.title "Private Browsing">
<!ENTITY privatebrowsingpage.title.normal "Would you like to start Private Browsing?">
<!ENTITY aboutPrivateBrowsing.title "You're browsing privately">
<!ENTITY aboutPrivateBrowsing.title.normal "Open a private window?">
<!ENTITY privatebrowsingpage.perwindow.issueDesc "&brandShortName; won't remember any history for this window.">
<!ENTITY privatebrowsingpage.perwindow.issueDesc.normal "You are not currently in a private window.">
<!ENTITY aboutPrivateBrowsing.subtitle "&brandShortName; won't remember any history for this window.">
<!ENTITY aboutPrivateBrowsing.subtitle.normal "&brandShortName; won't remember any history for private windows.">
<!ENTITY privatebrowsingpage.perwindow.description "In a Private Browsing window, &brandShortName; won't keep any browser history, search history, download history, web form history, cookies, or temporary internet files. However, files you download and bookmarks you make will be kept.">
<!ENTITY aboutPrivateBrowsing.description "That includes browsing history, search history, download history, web form history, cookies, and temporary internet files. However, files you download and bookmarks you make will be kept.">
<!ENTITY aboutPrivateBrowsing.notPrivate "You are currently not in a private window.">
<!ENTITY aboutPrivateBrowsing.moreInfo "While this computer won't have a record of your browsing history, your employer or internet service provider can still track the pages you visit.">
<!ENTITY aboutPrivateBrowsing.learnMore "Learn More.">
<!ENTITY privatebrowsingpage.openPrivateWindow.label "Open a Private Window">
<!ENTITY privatebrowsingpage.openPrivateWindow.accesskey "P">
<!-- LOCALIZATION NOTE (privatebrowsingpage.howToStart4): please leave &newPrivateWindow.label; intact in the translation -->
<!ENTITY privatebrowsingpage.howToStart4 "To start Private Browsing, you can also select &newPrivateWindow.label; from the menu.">
<!ENTITY privatebrowsingpage.howToStop3 "To stop Private Browsing, you can close this window.">
<!ENTITY privatebrowsingpage.moreInfo "While this computer won't have a record of your browsing history, your internet service provider or employer can still track the pages you visit.">
<!ENTITY privatebrowsingpage.learnMore "Learn More">
<!-- TO BE REMOVED POST-AUSTRALIS -->
<!-- LOCALIZATION NOTE (privatebrowsingpage.howToStart3): please leave &basePBMenu.label; intact in the translation -->
<!ENTITY privatebrowsingpage.howToStart3 "To start Private Browsing, you can also select &basePBMenu.label; &gt; &newPrivateWindow.label;.">

View File

@ -1,47 +0,0 @@
%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
body.private > #errorPageContainer {
background-image: url("chrome://browser/skin/Privacy-48.png");
}
body.normal > #errorPageContainer {
background-image: url("moz-icon://stock/gtk-dialog-question?size=dialog");
}
#clearRecentHistoryDesc {
margin-top: 2em;
}
#clearRecentHistoryDesc > p {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
}
#startPrivateBrowsingDesc > button {
-moz-margin-start: 0;
}
#footerDesc > p {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
}
#moreInfo {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-moz-padding-start: 25px;
background: url("moz-icon://stock/gtk-dialog-info?size=menu") no-repeat top left;
}
#moreInfo:-moz-dir(rtl) {
background-position: top right;
}
#moreInfoText {
margin-bottom: 0;
}
#moreInfoLinkContainer {
margin-top: 0.5em;
}

View File

@ -6,7 +6,6 @@ browser.jar:
% skin browser classic/1.0 %skin/classic/browser/
% override chrome://global/skin/icons/warning-16.png moz-icon://stock/gtk-dialog-warning?size=menu
skin/classic/browser/sanitizeDialog.css
* skin/classic/browser/aboutPrivateBrowsing.css
* skin/classic/browser/aboutSessionRestore.css
skin/classic/browser/aboutSessionRestore-window-icon.png
skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css)
@ -35,6 +34,8 @@ browser.jar:
skin/classic/browser/identity-icons-https-mixed-active.png
skin/classic/browser/identity-icons-https-mixed-display.png
skin/classic/browser/Info.png
skin/classic/browser/mask.png (../shared/mask.png)
skin/classic/browser/mask@2x.png (../shared/mask@2x.png)
skin/classic/browser/menuPanel.png
skin/classic/browser/menuPanel-customize.png
skin/classic/browser/menuPanel-exit.png
@ -55,7 +56,6 @@ browser.jar:
skin/classic/browser/pointerLock-16.png
skin/classic/browser/pointerLock-64.png
skin/classic/browser/Privacy-16.png
skin/classic/browser/Privacy-48.png
skin/classic/browser/privatebrowsing-mask.png
skin/classic/browser/reload-stop-go.png
skin/classic/browser/searchbar.css

View File

@ -1,47 +0,0 @@
%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
body.private > #errorPageContainer {
background-image: url("chrome://browser/skin/Privacy-48.png");
}
body.normal > #errorPageContainer {
background-image: url("chrome://global/skin/icons/question-64.png");
}
#clearRecentHistoryDesc {
margin-top: 2em;
}
#clearRecentHistoryDesc > p {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
}
#startPrivateBrowsingDesc > button {
-moz-margin-start: 0;
}
#footerDesc > p {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
}
#moreInfo {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-moz-padding-start: 25px;
background: url("chrome://global/skin/icons/information-16.png") no-repeat top left;
}
#moreInfo:-moz-dir(rtl) {
background-position: top right;
}
#moreInfoText {
margin-bottom: 0;
}
#moreInfoLinkContainer {
margin-top: 0.5em;
}

View File

@ -5,7 +5,6 @@
browser.jar:
% skin browser classic/1.0 %skin/classic/browser/
skin/classic/browser/sanitizeDialog.css (sanitizeDialog.css)
* skin/classic/browser/aboutPrivateBrowsing.css (aboutPrivateBrowsing.css)
* skin/classic/browser/aboutSessionRestore.css (aboutSessionRestore.css)
skin/classic/browser/aboutSessionRestore-window-icon.png
skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css)
@ -53,6 +52,8 @@ browser.jar:
skin/classic/browser/notification-16@2x.png
skin/classic/browser/notification-64.png
skin/classic/browser/notification-64@2x.png
skin/classic/browser/mask.png (../shared/mask.png)
skin/classic/browser/mask@2x.png (../shared/mask@2x.png)
skin/classic/browser/menuPanel.png
skin/classic/browser/menuPanel@2x.png
skin/classic/browser/menuPanel-customize.png
@ -86,7 +87,6 @@ browser.jar:
skin/classic/browser/pointerLock-64.png
skin/classic/browser/pointerLock-64@2x.png
skin/classic/browser/Privacy-16.png
skin/classic/browser/Privacy-48.png
skin/classic/browser/privatebrowsing-mask.png
skin/classic/browser/privatebrowsing-mask@2x.png
skin/classic/browser/privatebrowsing-mask-short.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -1,47 +0,0 @@
%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
body.private > #errorPageContainer {
background-image: url("chrome://browser/skin/Privacy-48.png");
}
body.normal > #errorPageContainer {
background-image: url("chrome://global/skin/icons/question-48.png");
}
#clearRecentHistoryDesc {
margin-top: 2em;
}
#clearRecentHistoryDesc > p {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
}
#startPrivateBrowsingDesc > button {
-moz-margin-start: 0;
}
#footerDesc > p {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
}
#moreInfo {
font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-moz-padding-start: 25px;
background: url("chrome://global/skin/icons/information-16.png") no-repeat top left;
}
#moreInfo:-moz-dir(rtl) {
background-position: top right;
}
#moreInfoText {
margin-bottom: 0;
}
#moreInfoLinkContainer {
margin-top: 0.5em;
}

View File

@ -8,7 +8,6 @@ browser.jar:
# NOTE: If you add a new file here, you'll need to add it to the aero
# section at the bottom of this file
skin/classic/browser/sanitizeDialog.css
* skin/classic/browser/aboutPrivateBrowsing.css
* skin/classic/browser/aboutSessionRestore.css
skin/classic/browser/aboutSessionRestore-window-icon.png (preferences/application.png)
skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css)
@ -40,6 +39,8 @@ browser.jar:
skin/classic/browser/keyhole-forward-mask.svg
skin/classic/browser/KUI-background.png
skin/classic/browser/livemark-folder.png
skin/classic/browser/mask.png (../shared/mask.png)
skin/classic/browser/mask@2x.png (../shared/mask@2x.png)
skin/classic/browser/menu-back.png
skin/classic/browser/menu-forward.png
skin/classic/browser/menuPanel.png
@ -416,7 +417,6 @@ browser.jar:
browser.jar:
% skin browser classic/1.0 %skin/classic/aero/browser/ os=WINNT osversion>=6
skin/classic/aero/browser/sanitizeDialog.css (sanitizeDialog.css)
* skin/classic/aero/browser/aboutPrivateBrowsing.css (aboutPrivateBrowsing.css)
* skin/classic/aero/browser/aboutSessionRestore.css (aboutSessionRestore.css)
skin/classic/aero/browser/aboutSessionRestore-window-icon.png (aboutSessionRestore-window-icon-aero.png)
skin/classic/aero/browser/aboutCertError.css
@ -448,6 +448,8 @@ browser.jar:
skin/classic/aero/browser/keyhole-forward-mask.svg
skin/classic/aero/browser/KUI-background.png
skin/classic/aero/browser/livemark-folder.png (livemark-folder-aero.png)
skin/classic/aero/browser/mask.png (../shared/mask.png)
skin/classic/aero/browser/mask@2x.png (../shared/mask@2x.png)
skin/classic/aero/browser/menu-back.png (menu-back-aero.png)
skin/classic/aero/browser/menu-forward.png (menu-forward-aero.png)
skin/classic/aero/browser/menuPanel.png
@ -476,7 +478,6 @@ browser.jar:
skin/classic/aero/browser/pointerLock-64.png
skin/classic/aero/browser/Privacy-16.png (Privacy-16-aero.png)
skin/classic/aero/browser/Privacy-32.png (Privacy-32-aero.png)
skin/classic/aero/browser/Privacy-48.png (Privacy-48-aero.png)
skin/classic/aero/browser/privatebrowsing-mask-tabstrip.png
skin/classic/aero/browser/privatebrowsing-mask-tabstrip-XPVista7.png
skin/classic/aero/browser/privatebrowsing-mask-titlebar.png