Bug 1505687 - Visual tweaks to about:privatebrowsing; r=johannh
authorFlorens Verschelde <florens@fvsch.com>
Mon, 12 Nov 2018 13:35:38 +0000
changeset 445879 46dabf9308d8b7ae555f7f416fd744ff0d22d240
parent 445878 ef29af431afb61f2f775a3271d2d170d86a36d84
child 445880 744ccc0fb73dfa5147ea696227c05b5931e2c2a3
push id35028
push usercsabou@mozilla.com
push dateMon, 12 Nov 2018 21:54:15 +0000
treeherdermozilla-central@05331fb8f533 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1505687
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1505687 - Visual tweaks to about:privatebrowsing; r=johannh - Fix bullet list margins. - Improve :hover:active style for links. - Improve narrow width layout: flexible list item width, more reasonable line-heights, move content blocking icon inline. Differential Revision: https://phabricator.services.mozilla.com/D11579
browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -32,32 +32,28 @@
             class="showNormal"
             accesskey="&privatebrowsingpage.openPrivateWindow.accesskey;">&privatebrowsingpage.openPrivateWindow.label;</button>
     <div class="showPrivate container">
       <h1 class="title">
         <span id="title">&privateBrowsing.title;</span>
       </h1>
       <section class="section-main">
         <p>&aboutPrivateBrowsing.info.notsaved.before;<strong>&aboutPrivateBrowsing.info.notsaved.emphasize;</strong>&aboutPrivateBrowsing.info.notsaved.after;</p>
-        <div class="list-row">
-          <ul>
-            <li>&aboutPrivateBrowsing.info.visited;</li>
-            <li>&aboutPrivateBrowsing.info.cookies;</li>
-            <li>&aboutPrivateBrowsing.info.searches;</li>
-            <li>&aboutPrivateBrowsing.info.temporaryFiles;</li>
-          </ul>
-        </div>
+        <ul class="list-row">
+          <li>&aboutPrivateBrowsing.info.visited;</li>
+          <li>&aboutPrivateBrowsing.info.cookies;</li>
+          <li>&aboutPrivateBrowsing.info.searches;</li>
+          <li>&aboutPrivateBrowsing.info.temporaryFiles;</li>
+        </ul>
         <p>&aboutPrivateBrowsing.info.saved.before;<strong>&aboutPrivateBrowsing.info.saved.emphasize;</strong>&aboutPrivateBrowsing.info.saved.after2;</p>
-        <div class="list-row">
-          <ul>
-            <li>&aboutPrivateBrowsing.info.bookmarks;</li>
-            <li>&aboutPrivateBrowsing.info.downloads;</li>
-            <li>&aboutPrivateBrowsing.info.clipboard;</li>
-          </ul>
-        </div>
+        <ul class="list-row">
+          <li>&aboutPrivateBrowsing.info.bookmarks;</li>
+          <li>&aboutPrivateBrowsing.info.downloads;</li>
+          <li>&aboutPrivateBrowsing.info.clipboard;</li>
+        </ul>
         <p>&aboutPrivateBrowsing.note.before;<strong>&aboutPrivateBrowsing.note.emphasize;</strong>&aboutPrivateBrowsing.note.after;</p>
       </section>
 
       <h2 id="tpSubHeader" class="about-subheader">
         <span id="cbTitle">&contentBlocking.title;</span>
       </h2>
 
       <section id="tpSection" class="section-main">
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -3,16 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://global/skin/in-content/info-pages.css");
 
 html.private {
   --in-content-page-color: white;
   --in-content-text-color: white;
   --in-content-page-background: #25003e;
+  --in-content-link-color-hover: white;
+  --in-content-link-color-active: white;
 }
 
 a:link {
   color: inherit;
   text-decoration: underline;
 }
 
 .container {
@@ -27,65 +29,77 @@ a:link {
   margin-bottom: 0;
 }
 
 p {
   line-height: 1.5em;
 }
 
 .list-row {
-  overflow: auto;
+  display: grid;
+  column-gap: 2em;
+  grid-template-columns: repeat(auto-fill, minmax(10em, 16em));
+  margin-inline-start: 3em;
 }
 
-.list-row > ul > li {
-  float: inline-start;
-  width: 16em;
-  line-height: 2em;
-  margin-inline-start: 1em;
+.list-row li {
   margin-bottom: 0;
+  padding: .25em 0;
+  line-height: 1.5;
 }
 
 .title {
   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
   background-position: left center;
   background-size: 2em;
-  line-height: 2em;
+  line-height: 1.4;
+  padding-top: 0.3em;
+  padding-bottom: 0.3em;
   margin-inline-start: calc(-2em - 10px);
   padding-inline-start: calc(2em + 10px);
 }
 
 .title:dir(rtl) {
   background-position: right center;
 }
 
 .about-subheader {
+  --icon-size: 1.5em;
   display: flex;
   align-items: center;
   font-size: 1.5em;
   font-weight: lighter;
   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
   background-repeat: no-repeat;
   background-position: left center;
-  background-size: 1.5em;
+  background-size: var(--icon-size);
   line-height: 1.5em;
-  margin-inline-start: calc(-1.5em - 10px);
-  padding-inline-start: calc(1.5em + 10px);
+  margin-inline-start: calc((var(--icon-size) + 10px) * -1);
+  padding-inline-start: calc(var(--icon-size) + 10px);
 }
 
 .about-subheader:dir(rtl) {
   background-position: right;
 }
 
+@media (max-width: 970px) {
+  .about-subheader {
+    --icon-size: 1em;
+    margin-inline-start: 0;
+  }
+}
+
 .about-info {
   font-size: .9em;
 }
 
-#cbTitle {
-  margin-inline-end: 12px;
-}
-
 a.button {
   padding: 3px 20px;
   background-color: #8000d7;
   border: 1px solid #6000a1;
   text-decoration: none;
   display: inline-block;
 }
+
+a.button:hover:active {
+  color: inherit;
+  background-color: #6000a1;
+}