Bug 842439 - Improve style and rearrange content of the about:privatebrowsing page. r=Neil, ui-r=stefanh

CLOSED TREE

suite/common/aboutPrivateBrowsing.xul

@@ -5,6 +5,7 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://global/skin/config.css" type="text/css"?>
+<?xml-stylesheet href="chrome://communicator/skin/aboutPrivateBrowsing.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
@@ -14,7 +15,6 @@
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        title="about:privatebrowsing"
         id="warningScreen"
         align="center"
         onload="onLoad();">
@@ -26,37 +26,49 @@
       if (window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                 .getInterface(Components.interfaces.nsIWebNavigation)
                 .QueryInterface(Components.interfaces.nsILoadContext)
-                .usePrivateBrowsing)
-        document.getElementById("normal").hidden = true;
-      else
-        document.getElementById("private").hidden = true;
+                .usePrivateBrowsing) {
+        document.getElementById("warningBox").className = "private";
+        document.title = document.getElementById("privateTitle").textContent;
+      }
+      else {
+        document.getElementById("warningBox").className = "normal";
+        document.title = document.getElementById("normalTitle").textContent;
+      }
     }
   </script>
   <spacer flex="1"/>
-  <vbox id="warningBox">
-    <label id="warningTitle">&privatebrowsingpage.experimental;</label>
-    <vbox id="warningInnerBox" align="start">
-      <vbox id="warningText">
-        <description>&privatebrowsingpage.description;</description>
-        <description>&privatebrowsingpage.moreinfo;</description>
+  <hbox id="warningBox" align="start">
+    <image id="warningBoxIcon"/>
+    <vbox id="warningOuterBox">
+      <vbox id="warningTitle">
+        <label id="privateTitle" class="private">&privatebrowsingpage.title.private;</label>
+        <label id="normalTitle" class="normal">&privatebrowsingpage.title.normal;</label>
       </vbox>
-      <button label="&privatebrowsingpage.learnmore.label;"
-              accesskey="&privatebrowsingpage.learnmore.accesskey;"
-              oncommand="openHelp('private-browsing', 'chrome://communicator/locale/help/suitehelp.rdf');"/>
-      <vbox id="private" align="start">
-        <description>&privatebrowsingpage.private;</description>
-        <button label="&privatebrowsingpage.switch.label;"
-                accesskey="&privatebrowsingpage.switch.accesskey;"
-                oncommand="toNavigator();"/>
+      <vbox id="warningStatus">
+        <label class="private">&privatebrowsingpage.status.private;</label>
+        <label class="normal">&privatebrowsingpage.status.normal;</label>
       </vbox>
-      <vbox id="normal" align="start">
-        <description>&privatebrowsingpage.normal;</description>
-        <button label="&privatebrowsingpage.private.label;"
+      <vbox id="warningInnerBox" align="start">
+        <description id="warningText">&privatebrowsingpage.common.description;</description>
+        <hbox id="trackWarnBox" class="private">
+          <image id="trackWarnIcon"/>
+          <description flex="1">&privatebrowsingpage.track.warn;</description>
+        </hbox>
+        <button label="&privatebrowsingpage.learnmore.label;"
+                accesskey="&privatebrowsingpage.learnmore.accesskey;"
+                oncommand="openHelp('private-browsing', 'chrome://communicator/locale/help/suitehelp.rdf');"/>
+        <description class="private">&privatebrowsingpage.close.info;</description>
+        <button class="private"
+                label="&privatebrowsingpage.close.label;"
+                accesskey="&privatebrowsingpage.close.accesskey;"
+                oncommand="window.close();"/>
+        <description class="normal">&privatebrowsingpage.start.info;</description>
+        <button class="normal"
+                label="&privatebrowsingpage.private.label;"
                 accesskey="&privatebrowsingpage.private.accesskey;"
                 oncommand="openNewPrivateWith(location.href);"/>
-        <description>&privatebrowsingpage.info;</description>
       </vbox>
     </vbox>
-  </vbox>
+  </hbox>
   <spacer flex="2"/>
 </window>

suite/locales/en-US/chrome/common/aboutPrivateBrowsing.dtd

@@ -2,17 +2,25 @@
    - 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">
-<!-- LOCALIZATION NOTE: The experimental title is temporary -->
-<!ENTITY privatebrowsingpage.experimental "&privatebrowsingpage.title; is currently an experimental feature.">
-<!ENTITY privatebrowsingpage.description  "In a &privatebrowsingpage.title; window, &brandShortName; won't keep any disk cache, cookies or browser, search, download or web form history. However downloaded files and bookmarks will still be saved.">
-<!ENTITY privatebrowsingpage.moreinfo     "While this computer won't have a record of your browsing history, your employer or Internet service provider might still be able to track the pages you visit.">
+<!-- LOCALIZATION NOTE: where ".private" and ".normal" variants exist,
+   - the former is shown in a private browsing window and the latter in
+   - a regular (non-private) browsing window. -->
+
+<!ENTITY privatebrowsingpage.title.private       "You are in a Private Browsing window">
+<!ENTITY privatebrowsingpage.title.normal        "Would you like to start Private Browsing?">
+
+<!ENTITY privatebrowsingpage.status.private      "&brandShortName; won't remember any history for this window.">
+<!ENTITY privatebrowsingpage.status.normal       "You are not currently in a private window.">
+
+<!ENTITY privatebrowsingpage.common.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, created bookmarks and downloaded files will be kept.">
+<!ENTITY privatebrowsingpage.track.warn          "While this computer won't have a record of your browsing history, your employer or Internet service provider might still be able to track the pages you visit.">
 <!ENTITY privatebrowsingpage.learnmore.label     "Learn more">
 <!ENTITY privatebrowsingpage.learnmore.accesskey "L">
-<!ENTITY privatebrowsingpage.private      "&brandShortName; won't remember any history for this window. Close the window to stop &privatebrowsingpage.title;.">
-<!ENTITY privatebrowsingpage.switch.label        "Switch to a normal window">
-<!ENTITY privatebrowsingpage.switch.accesskey    "S">
-<!ENTITY privatebrowsingpage.normal       "You are not currently using &privatebrowsingpage.title;.">
+
+<!ENTITY privatebrowsingpage.close.info          "Once done, close the window to stop Private Browsing.">
+<!ENTITY privatebrowsingpage.close.label         "Close this window now">
+<!ENTITY privatebrowsingpage.close.accesskey     "C">
+
+<!ENTITY privatebrowsingpage.start.info          "To start Private Browsing, click the button below or select File ▶ New ▶ Private Window from the menu.">
 <!ENTITY privatebrowsingpage.private.label       "Open a new private window">
 <!ENTITY privatebrowsingpage.private.accesskey   "O">
-<!ENTITY privatebrowsingpage.info         "To start &privatebrowsingpage.title;, you can also select File ― New ― Private Window.">

suite/themes/classic/communicator/aboutPrivateBrowsing.css

@@ -0,0 +1,62 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Hide selected items by default and display them based on the page status */
+
+#warningBox:not(.private) .private,
+#warningBox:not(.normal) .normal {
+  display: none;
+}
+
+/* Pick the desired icons depending on the window's context */
+
+#warningBox.private > #warningBoxIcon {
+  list-style-image: url("chrome://global/skin/icons/information-48.png");
+  width: 48px;
+  height: 48px;
+  -moz-margin-end: 3em;
+}
+
+#warningBox.normal > #warningBoxIcon {
+  list-style-image: url("chrome://global/skin/icons/question-48.png");
+  width: 48px;
+  height: 48px;
+  -moz-margin-end: 3em;
+}
+
+#trackWarnBox {
+  margin-top: 0.6em;
+  -moz-margin-end: 7em;
+  -moz-box-align: center;
+}
+
+#trackWarnIcon {
+  list-style-image: url("chrome://global/skin/icons/warning-24.png");
+  width: 24px;
+  height: 24px;
+}
+
+/* Define additional styles to look similar to the netError/certError pages */
+
+#warningTitle {
+  font-weight: bold;
+}
+
+#warningStatus {
+  margin: 0.4em 0 1.2em 0;
+  padding-bottom: 1.2em;
+  border-bottom: 1px solid ThreeDLightShadow;
+  font-size: 135%;
+}
+
+#warningInnerBox > button {
+  margin: 0.8em 0 1em 0;
+}
+
+#warningOuterBox > vbox > label,
+#warningInnerBox > description {
+  -moz-margin-start: 0;
+}

suite/themes/classic/jar.mn

@@ -14,6 +14,7 @@ classic.jar:
 % style chrome://global/content/customizeToolbar.xul chrome://messenger/skin/smime/msgCompSMIMEOverlay.css
 % style chrome://global/content/customizeToolbar.xul chrome://messenger/skin/addressbook/addressbook.css
 #ifdef XP_MACOSX
+  skin/classic/communicator/aboutPrivateBrowsing.css                    (mac/communicator/aboutPrivateBrowsing.css)
   skin/classic/communicator/aboutSessionRestore.css                     (mac/communicator/aboutSessionRestore.css)
   skin/classic/communicator/button.css                                  (mac/communicator/button.css)
   skin/classic/communicator/communicator.css                            (mac/communicator/communicator.css)
@@ -51,6 +52,7 @@ classic.jar:
   skin/classic/communicator/toolbar/toolbar-gradient22.png              (mac/communicator/toolbar/toolbar-gradient22.png)
   skin/classic/communicator/toolbar/toolbar-gradient34.png              (mac/communicator/toolbar/toolbar-gradient34.png)
 #else
+  skin/classic/communicator/aboutPrivateBrowsing.css                    (communicator/aboutPrivateBrowsing.css)
   skin/classic/communicator/aboutSessionRestore.css                     (communicator/aboutSessionRestore.css)
   skin/classic/communicator/button.css                                  (communicator/button.css)
   skin/classic/communicator/communicator.css                            (communicator/communicator.css)

suite/themes/classic/mac/communicator/aboutPrivateBrowsing.css

@@ -0,0 +1,63 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Hide selected items by default and display them based on the page status */
+
+#warningBox:not(.private) .private,
+#warningBox:not(.normal) .normal {
+  display: none;
+}
+
+/* Pick the desired icons depending on the window's context */
+
+#warningBox.private > #warningBoxIcon {
+  list-style-image: url("chrome://global/skin/icons/information-large.png");
+  width: 48px;
+  height: 48px;
+  -moz-margin-end: 1.5em;
+}
+
+#warningBox.normal > #warningBoxIcon {
+  list-style-image: url("chrome://global/skin/icons/question-large.png");
+  width: 48px;
+  height: 48px;
+  -moz-margin-end: 1.5em;
+}
+
+#trackWarnBox {
+  margin-top: 0.6em;
+  -moz-margin-end: 4em;
+  -moz-box-align: start;
+}
+
+#trackWarnIcon {
+  list-style-image: url("chrome://global/skin/icons/warning-24.png");
+  width: 24px;
+  height: 24px;
+  -moz-margin-end: 1em;
+}
+
+/* Define additional styles to look similar to the netError/certError pages */
+
+#warningTitle {
+  font-weight: bold;
+}
+
+#warningStatus {
+  margin: 0.4em 0 1.2em 0;
+  padding-bottom: 1.2em;
+  border-bottom: 1px solid ThreeDLightShadow;
+  font-size: 135%;
+}
+
+#warningInnerBox > button {
+  margin: 0.8em 0 1em 0;
+}
+
+#warningOuterBox > vbox > label,
+#warningInnerBox > description {
+  -moz-margin-start: 0;
+}

suite/themes/modern/communicator/aboutPrivateBrowsing.css

@@ -0,0 +1,62 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Hide selected items by default and display them based on the page status */
+
+#warningBox:not(.private) .private,
+#warningBox:not(.normal) .normal {
+  display: none;
+}
+
+/* Pick the desired icons depending on the window's context */
+
+#warningBox.private > #warningBoxIcon {
+  list-style-image: url("chrome://global/skin/icons/alert-message.gif");
+  width: 46px;
+  height: 39px;
+  -moz-margin-end: 3em;
+}
+
+#warningBox.normal > #warningBoxIcon {
+  list-style-image: url("chrome://global/skin/icons/alert-question.gif");
+  width: 46px;
+  height: 36px;
+  -moz-margin-end: 3em;
+}
+
+#trackWarnBox {
+  margin-top: 0.6em;
+  -moz-margin-end: 7em;
+  -moz-box-align: center;
+}
+
+#trackWarnIcon {
+  list-style-image: url("chrome://global/skin/icons/warning-24.png");
+  width: 24px;
+  height: 24px;
+}
+
+/* Define additional styles to look similar to the netError/certError pages */
+
+#warningTitle {
+  font-weight: bold;
+}
+
+#warningStatus {
+  margin: 0.4em 0 1.2em 0;
+  padding-bottom: 1.2em;
+  border-bottom: 1px solid #7A8490;
+  font-size: 135%;
+}
+
+#warningInnerBox > button {
+  margin: 0.8em 0 1em 0;
+}
+
+#warningOuterBox > vbox > label,
+#warningInnerBox > description {
+  -moz-margin-start: 0;
+}

suite/themes/modern/jar.mn

@@ -28,6 +28,7 @@ modern.jar:
   skin/modern/communicator/helpOverlay.css                         (communicator/helpOverlay.css)
   skin/modern/communicator/smileys.css                             (communicator/smileys.css)
   skin/modern/communicator/communicator.css                        (communicator/communicator.css)
+  skin/modern/communicator/aboutPrivateBrowsing.css                (communicator/aboutPrivateBrowsing.css)
   skin/modern/communicator/aboutSessionRestore.css                 (communicator/aboutSessionRestore.css)
   skin/modern/communicator/viewSourceOverlay.css                   (communicator/viewSourceOverlay.css)
   skin/modern/communicator/bookmarks/allBookmarks.png              (communicator/bookmarks/allBookmarks.png)
@@ -300,6 +301,7 @@ modern.jar:
   skin/modern/global/icons/search.gif                              (global/icons/search.gif)
   skin/modern/global/icons/sslWarning.png                          (global/icons/sslWarning.png)
   skin/modern/global/icons/warning-16.png                          (global/icons/warning-16.png)
+  skin/modern/global/icons/warning-24.png                          (global/icons/warning-24.png)
   skin/modern/global/icons/wrap.png                                (global/icons/wrap.png)
   skin/modern/global/media/clicktoplay-bgtexture.png               (/mozilla/toolkit/themes/windows/global/media/clicktoplay-bgtexture.png)
   skin/modern/global/media/error.png                               (/mozilla/toolkit/themes/windows/global/media/error.png)