Bug 1579944 - Align elements matching grids. r=johannh a=RyanVM
authorErica Wright <ewright@mozilla.com>
Tue, 17 Sep 2019 13:42:14 +0000
changeset 555166 bc37281c97350764998d8477db94b39b727d59bc
parent 555165 9062431b57ca2d068141031bdb4628c85527eaee
child 555167 023ff6b1144f6c2dfde39a52f1c63a99c7b8fa1e
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh, RyanVM
bugs1579944
milestone70.0
Bug 1579944 - Align elements matching grids. r=johannh a=RyanVM Differential Revision: https://phabricator.services.mozilla.com/D45451
browser/components/protections/content/protections.css
browser/components/protections/content/protections.html
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -17,22 +17,27 @@
   --cryptominer-highlight-color: #9292A0;
 
   --tab-highlight: var(--social-color); /* start with social selected */
   --column-width: 16px;
   --graph-empty: #CECECF;
 
   /* Colors for the loading indicator */
   --protection-report-loader-color-stop: #AEAEAE3D;
-  --protection-report-loader-gradient-opacity: .95;
+  --protection-report-loader-gradient-opacity: 0.95;
 }
 
 body {
   margin-top: 40px;
   margin-bottom: 80px;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
 }
 
 body[focuseddatatype=social] {
   --tab-highlight: var(--social-color);
 }
 
 body[focuseddatatype=cookie] {
   --tab-highlight: var(--cookie-color);
@@ -60,34 +65,44 @@ h2 {
   margin-bottom: 22px;
 }
 
 #report-content {
   width: 763px;
   margin: 0 auto;
 }
 
+.card-header .wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  align-items: center;
+}
+
 .card-header > button,
-#sign-up-for-monitor-link,
-#get-proxy-extension-link {
+#get-proxy-extension-link,
+#open-about-logins-button,
+#sign-up-for-monitor-link {
+  grid-area: 1 / 5 / 1 / -1;
+  margin: 0;
+  height: 38px;
   font-size: 0.95em;
   cursor: pointer;
-  margin-inline-end: 15px;
-  margin-inline-start: 15px;
   padding: 10px;
-  align-self: center;
   text-align: center;
+  line-height: initial;
 }
 
-.card.lockwise-card .card-header,
-.card.monitor-card.no-logins .card-header,
-.card.proxy-card .card-header {
-  grid-template-columns: 2fr 6fr 7fr;
+.card:not(.has-logins) .wrapper div:nth-child(1) {
+  grid-area: 1 / 1 / 1 / 5;
+  padding-inline-end: 15px;
 }
 
+.card.has-logins .wrapper div:nth-child(1) {
+  grid-area: 1 / 1 / 1 / -1;
+}
 
 /* We want to hide certain components depending on its state. */
 .etp-card .icon.dark,
 a.hidden,
 .loading .card-body.hidden,
 .lockwise-card.hidden,
 #lockwise-body-content .has-logins.hidden,
 #lockwise-body-content .no-logins.hidden,
@@ -153,35 +168,34 @@ a.hidden,
 .card .card-title {
   font-size: inherit;
   line-height: 1.25;
   margin: 0;
   cursor: default;
 }
 
 .card .content {
-  margin-bottom: 24px;
+  margin-bottom: 0px;
   margin-top: 5px;
   font-size: .93em;
   cursor: default;
   color: var(--in-content-deemphasized-text);
 }
 
 #protection-details {
-  padding: 4px;
   padding-inline-start: 24px;
-}
-
-#protection-details {
+  padding-inline-end: 3px;
   -moz-context-properties: fill;
   fill: currentColor;
   background: url("chrome://browser/skin/settings.svg") no-repeat 3px 3px;
   font-size: 0.75em;
-  display: inline;
   cursor: default;
+  width: max-content;
+  margin-top: 24px;
+  margin-bottom: 0;
 }
 
 #protection-details:hover,
 #protection-details:focus {
   background-color: var(--in-content-button-background);
 }
 
 #protection-details:hover:active {
@@ -212,17 +226,17 @@ a.hidden,
 }
 
 #graph-week-summary {
   font-weight: bold;
 }
 
 #graph-wrapper {
   width: 100%;
-  margin-top: 30px;
+  margin-top: 33px;
   margin-bottom: 25px;
 }
 
 #graph {
   display: grid;
   grid: repeat(10, 1fr) max-content / repeat(7, 1fr);
   height: 130px;
   margin-bottom: 10px;
@@ -298,18 +312,18 @@ a.hidden,
 .column-label {
   margin-top: 5px;
   font-size: 0.9em;
   width: var(--column-width);
 }
 
 .bar-count {
   position: absolute;
-  top: -25px;
-  font-size: .8em;
+  top: -21px;
+  font-size: 0.8em;
 }
 
 /* Legend */
 #graphLegendDescription {
   position: absolute;
   opacity: 0;
   z-index: -1;
 }
@@ -525,75 +539,77 @@ label[for="tab-cryptominer"]:hover ~ #hi
 
 #lockwise-body-content .has-logins a {
   margin-inline-start: 10px;
 }
 
 /* Monitor card */
 
 #monitor-body-content .monitor-breached-passwords {
-  grid: 1fr / minmax(70px, auto) 1fr;
+  grid: 1fr / repeat(7, 1fr);
   grid-row: 3;
+  grid-column: 1 / -1;
   display: grid;
   align-items: center;
   font-size: 0.85em;
   border-top: 1px solid var(--in-content-border-color);
   padding-top: 20px;
   line-height: 18px;
-  grid-column-gap: 10px;
   margin-bottom: 20px;
 }
 
-.monitor-info-wrapper {
-  display: grid;
-  grid: 1fr / 1fr 1fr 1fr;
-  grid-gap: 10px;
-}
-
-.monitor-scanned-text {
+.monitor-scanned-wrapper {
+  margin-top: 24px;
   font-size: 0.85em;
+  display: block;
 }
 
 .monitor-card #monitor-header-content > a {
   display: block;
   margin-block-start: 5px;
   width: max-content;
 }
 
 .monitor-card.has-logins #monitor-body-content {
   display: grid;
-  grid: 1fr 50px auto / 1fr 100px;
-  grid-column-gap: 12px;
+  grid: 1fr 50px auto / repeat(7, 1fr);
   align-items: center;
 }
 
 .monitor-block {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
   color: #FFFFFF;
   text-align: center;
-  padding: 25px 5px 25px 5px;
+  padding: 25px 10px;
+  margin-inline-end: 15px;
 }
 
 .email {
   background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
+  grid-column-start: 1;
+  grid-column-end: 3;
 }
 
 .breaches {
   background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
+  grid-column-start: 3;
+  grid-column-end: 5;
 }
 
 .passwords {
   background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
+  grid-column-start: 5;
+  grid-column-end: 7;
 }
 
 .monitor-view-full-report {
   grid-row: 2;
-  grid-column: span 2;
+  grid-column: span 7;
   font-size: 0.85em;
   color: var(--in-content-deemphasized-text);
 }
 
 .monitor-stat {
   display: flex;
   font-size: 1.75em;
   font-weight: bold;
@@ -615,26 +631,32 @@ label[for="tab-cryptominer"]:hover ~ #hi
   fill-opacity: 0.65;
   display: block;
   padding: 5px;
   display: inline-block;
   vertical-align: middle;
 }
 
 .info-text {
-  font-size: .75em;
+  font-size: 0.75em;
   line-height: 13px;
   margin-block-start: 5px;
 }
 
 .number-of-breaches.block {
   font-size: 1.45em;
-  color: var(--grey-90);
   background-color: var(--orange-50);
   padding: 15px;
+  grid-column: 1 / 2;
+  width: 70px;
+  height: 48px;
+}
+
+#password-warning {
+  grid-column: 2 / -1;
 }
 
 #sign-up-for-monitor-link,
 #get-proxy-extension-link {
   -moz-appearance: button;
   background-color: var(--blue-60);
   border-radius: 2px;
   text-decoration: none;
@@ -675,15 +697,15 @@ label[for="tab-cryptominer"]:hover ~ #hi
 
 @keyframes loading {
   0% {
     background-position-x: -300px;
   }
 
   100% {
     background-position-x: 700px;
-    opacity: .02;
+    opacity: 0.02;
   }
 }
 
 .monitor-card.has-logins .card-body {
   padding-block-end: 0;
 }
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -25,17 +25,17 @@
 
   <body>
     <div id="report-content">
       <h1 id="report-title" data-l10n-id="protection-report-content-title"></h1>
       <div class="card card-no-hover etp-card">
         <div class="card-header">
           <img class="icon light" src="chrome://browser/content/logos/tracking-protection.svg"/>
           <img class="icon dark" src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"/>
-          <div class="wrapper">
+          <div>
             <h2 class="card-title" data-l10n-id="etp-card-title"></h2>
             <p class="content" data-l10n-id="etp-card-content"></p>
             <p id="protection-details" role="link" tabindex="0" data-l10n-title="go-to-privacy-settings"></p>
           </div>
         </div>
         <div class="card-body">
           <div class="body-wrapper">
             <p id="graph-week-summary"></p>
@@ -110,62 +110,64 @@
           </div>
         </div>
       </div>
      <!-- Markup for Monitor card. -->
       <section class="card card-no-hover monitor-card hidden">
           <div class="card-header">
             <img class="icon" src="chrome://browser/content/logos/monitor.svg"/>
             <div class="wrapper">
-              <h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2>
-              <p id="monitor-header-content" class="content">
-                <span>
-                  <!-- Insert Monitor header content here. -->
-                </span>
-                <a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a>
-              </p>
-              <img class="icon-small" src="chrome://browser/skin/reload.svg"/>
-              <span class="monitor-scanned-text" data-l10n-id="auto-scan"></span>
+              <div>
+                <h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2>
+                <p id="monitor-header-content" class="content">
+                  <span>
+                    <!-- Insert Monitor header content here. -->
+                  </span>
+                  <a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a>
+                </p>
+                <div class="monitor-scanned-wrapper">
+                  <img class="icon-small" src="chrome://browser/skin/reload.svg"/>
+                  <span class="monitor-scanned-text" data-l10n-id="auto-scan"></span>
+                </div>
+              </div>
+              <a target="_blank" id="sign-up-for-monitor-link">
+                <!-- Insert Monitor link content here. -->
+              </a>
             </div>
-            <a target="_blank" id="sign-up-for-monitor-link">
-              <!-- Insert Monitor link content here. -->
-            </a>
           </div>
           <div class="card-body hidden">
             <div class="body-wrapper">
               <div id="monitor-body-content">
-                <div class="monitor-info-wrapper">
-                  <div class="monitor-block email">
-                      <span class="monitor-stat">
-                        <img class="icon-med" src="chrome://browser/skin/mail.svg"/>
-                        <span data-type="stored-emails">
-                          <!-- Display number of stored emails here. -->
-                        </span>
+                <div class="monitor-block email">
+                    <span class="monitor-stat">
+                      <img class="icon-med" src="chrome://browser/skin/mail.svg"/>
+                      <span data-type="stored-emails">
+                        <!-- Display number of stored emails here. -->
                       </span>
-                      <span id="info-monitored-addresses" class="info-text"></span>
-                    </div>
-                    <div class="monitor-block breaches">
-                      <span class="monitor-stat">
-                        <img class="icon-med" src="chrome://browser/skin/fxa/avatar.svg"/>
-                        <span data-type="known-breaches">
-                          <!-- Display number of known breaches here. -->
-                        </span>
+                    </span>
+                    <span id="info-monitored-addresses" class="info-text"></span>
+                  </div>
+                  <div class="monitor-block breaches">
+                    <span class="monitor-stat">
+                      <img class="icon-med" src="chrome://browser/skin/fxa/avatar.svg"/>
+                      <span data-type="known-breaches">
+                        <!-- Display number of known breaches here. -->
                       </span>
-                      <span id="info-known-breaches" class="info-text"></span>
-                    </div>
-                    <div class="monitor-block passwords">
-                      <span class="monitor-stat">
-                          <img class="icon-med" src="chrome://browser/skin/login.svg"/>
-                          <span data-type="exposed-passwords">
-                            <!-- Display number of exposed passwords here. -->
-                          </span>
-                      </span>
-                      <span id="info-exposed-passwords" class="info-text"></span>
-                    </div>
-                </div>
+                    </span>
+                    <span id="info-known-breaches" class="info-text"></span>
+                  </div>
+                  <div class="monitor-block passwords">
+                    <span class="monitor-stat">
+                        <img class="icon-med" src="chrome://browser/skin/login.svg"/>
+                        <span data-type="exposed-passwords">
+                          <!-- Display number of exposed passwords here. -->
+                        </span>
+                    </span>
+                    <span id="info-exposed-passwords" class="info-text"></span>
+                  </div>
                 <div id="full-report-link" class="monitor-view-full-report" data-l10n-id="full-report-link">
                   <a target="_blank" id="monitor-inline-link" data-l10n-name="monitor-inline-link" href=""></a>
                 </div>
                 <div class="monitor-breached-passwords hidden">
                   <span data-type="breached-lockwise-passwords" class="number-of-breaches block">
                     <!-- Display number of exposed stored passwords here. -->
                   </span>
                   <span id="password-warning">
@@ -176,24 +178,26 @@
             </div>
           </div>
       </section>
       <!-- Markup for Lockwise card. -->
       <section class="card card-no-hover lockwise-card hidden">
         <div class="card-header">
           <img class="icon" src="chrome://browser/content/logos/lockwise.svg"/>
           <div class="wrapper">
-            <h2 id="lockwise-title" class="card-title">
-              <!-- Insert Lockwise card title here. -->
-            </h2>
-            <p id="lockwise-header-content" class="content">
-              <!-- Insert Lockwise header content here. -->
-            </p>
+            <div>
+              <h2 id="lockwise-title" class="card-title">
+                <!-- Insert Lockwise card title here. -->
+              </h2>
+              <p id="lockwise-header-content" class="content">
+                <!-- Insert Lockwise header content here. -->
+              </p>
+            </div>
+            <button id="open-about-logins-button" class="primary" data-l10n-id="about-logins-view-logins-button" data-l10n-title="go-to-saved-logins"></button>
           </div>
-          <button id="open-about-logins-button" class="primary" data-l10n-id="about-logins-view-logins-button" data-l10n-title="go-to-saved-logins"></button>
         </div>
         <div class="card-body hidden">
           <div id="lockwise-body-content" class="body-wrapper">
             <div class="no-logins hidden">
                 <img class="lockwise-mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile-app.svg"/>
                 <span data-l10n-id="lockwise-no-logins-content">
                   <a target="_blank" id="lockwise-inline-link" data-l10n-name="lockwise-inline-link" href=""></a>
                 </span>
@@ -224,17 +228,19 @@
           </div>
         </div>
       </section>
       <!-- Markup for Proxy card -->
       <section class="card card-no-hover proxy-card hidden">
         <div class="card-header">
           <img class="icon" src="chrome://browser/content/logos/proxy.svg" />
           <div class="wrapper">
-            <h3 class="card-title" data-l10n-id="proxy-title"></h3>
-            <p class="content" data-l10n-id="proxy-header-content"></p>
+            <div>
+              <h3 class="card-title" data-l10n-id="proxy-title"></h3>
+              <p class="content" data-l10n-id="proxy-header-content"></p>
+            </div>
+            <a target="_blank" id="get-proxy-extension-link" data-l10n-id="get-proxy-extension-link"></a>
           </div>
-          <a target="_blank" id="get-proxy-extension-link" data-l10n-id="get-proxy-extension-link"></a>
          </div>
        </section>
     </div>
   </body>
 </html>