Bug 1594808 - Fix loading direction of the monitor and lockwise cards in about:protections for RTL r=ewright
authorItiel <itiel_yn8@walla.com>
Thu, 07 Nov 2019 21:06:26 +0000
changeset 501198 1be5155585ae975d6b400f9776f1f7d193ab1509
parent 501197 ec5a8a6a37d41c4447eb2e71004c5f07893959a3
child 501199 573654d340bce73cb4f90b777b86cffc79fe0280
push id36782
push usernbeleuzu@mozilla.com
push dateFri, 08 Nov 2019 09:59:36 +0000
treeherdermozilla-central@d7bee8f2fa9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersewright
bugs1594808
milestone72.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 1594808 - Fix loading direction of the monitor and lockwise cards in about:protections for RTL r=ewright Also improve code style/quality, merge rules and convert the file to use logical properties for block, margin and padding Differential Revision: https://phabricator.services.mozilla.com/D52195
browser/components/protections/content/protections.css
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -1,11 +1,12 @@
 /* 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/. */
+
 :root {
   --card-padding: 24px;
   --social-color: #9059FF;
   --cookie-color: #0090F4;
   --tracker-color: #2AC3A2;
   --fingerprinter-color: #FFA436;
   --cryptominer-color: #ADADBC;
 
@@ -22,18 +23,17 @@
   --graph-curve: cubic-bezier(.66,.75,.59,.91);
 
   /* Colors for the loading indicator */
   --protection-report-loader-color-stop: #AEAEAE3D;
   --protection-report-loader-gradient-opacity: 0.95;
 }
 
 body {
-  margin-top: 40px;
-  margin-bottom: 80px;
+  margin-block: 40px 80px;
   box-sizing: border-box;
 }
 
 *, *:before, *:after {
   box-sizing: inherit;
 }
 
 body[focuseddatatype=social] {
@@ -58,17 +58,17 @@ body[focuseddatatype=cryptominer] {
 
 h2 {
   font-weight: 700;
 }
 
 #report-title {
   font-size: 20px;
   font-weight: 300;
-  margin-bottom: 22px;
+  margin-block-end: 22px;
 }
 
 #report-content {
   width: 763px;
   margin: 0 auto;
 }
 
 .card-header .wrapper {
@@ -150,17 +150,17 @@ a.hidden,
   }
 }
 
 .card {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 20% auto;
   padding: 0;
-  margin-bottom: 25px;
+  margin-block-end: 25px;
   line-height: 1.6em;
 }
 
 .card-header,
 .card-body {
   display: grid;
   grid-template-columns: 1fr 7fr;
   padding: var(--card-padding);
@@ -170,47 +170,44 @@ a.hidden,
 .card .card-title {
   font-size: inherit;
   line-height: 1.25;
   margin: 0;
   cursor: default;
 }
 
 .card .content {
-  margin-bottom: 0px;
-  margin-top: 5px;
+  margin-block: 5px 0;
   font-size: .93em;
   cursor: default;
   color: var(--in-content-deemphasized-text);
 }
 
 .custom-not-blocking .content {
-  margin-bottom: 5px;
+  margin-block-end: 5px;
 }
 
 .etp-card.custom-not-blocking .card-body,
 .etp-card.custom-not-blocking #protection-details {
   display: none;
 }
 
 .etp-card.custom-not-blocking #manage-protections {
   display: block;
 }
 
 #protection-details {
-  padding-inline-start: 24px;
-  padding-inline-end: 3px;
+  padding-inline: 24px 3px;
   -moz-context-properties: fill;
   fill: currentColor;
   background: url("chrome://browser/skin/settings.svg") no-repeat 3px 3px;
   font-size: 0.75em;
   cursor: default;
   width: max-content;
-  margin-top: 24px;
-  margin-bottom: 0;
+  margin-block: 24px 0;
 }
 
 #protection-details:dir(rtl) {
   background-position-x: right 3px;
 }
 
 #protection-details:hover,
 #protection-details:focus {
@@ -225,17 +222,17 @@ a.hidden,
   outline: none;
 }
 
 #protection-details span {
   font-weight: bold;
 }
 
 .card .card-body {
-  border-top: 1px solid var(--in-content-border-color);
+  border-block-start: 1px solid var(--in-content-border-color);
   grid-column: span 2;
   grid-row: 2;
 }
 
 .body-wrapper {
   grid-column: 2;
 }
 
@@ -245,25 +242,24 @@ a.hidden,
 }
 
 #graph-week-summary {
   font-weight: bold;
 }
 
 #graph-wrapper {
   width: 100%;
-  margin-top: 33px;
-  margin-bottom: 25px;
+  margin-block: 33px 25px;
 }
 
 #graph {
   display: grid;
   grid: repeat(10, 1fr) max-content / repeat(7, 1fr);
   height: 130px;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 /* Graph Bars */
 .graph-bar {
   grid-row: 1 / -2;
   align-self: flex-end;
   width: var(--column-width);
   position: relative;
@@ -326,17 +322,17 @@ a.hidden,
   background-color: var(--cryptominer-color);
 }
 
 .hover-cryptominer .cryptominer-bar {
   background-color: var(--cryptominer-highlight-color);
 }
 
 .column-label {
-  margin-top: 5px;
+  margin-block-start: 5px;
   font-size: 0.9em;
   width: var(--column-width);
 }
 
 .bar-count {
   position: absolute;
   top: -21px;
   font-size: 0.8em;
@@ -352,21 +348,17 @@ a.hidden,
 #graphLegendDescription {
   position: absolute;
   opacity: 0;
   z-index: -1;
 }
 
 input[type="radio"] {
   position: absolute;
-  left: -100px;
-}
-
-[dir="rtl"] input[type="radio"] {
-  right: -100px;
+  inset-inline-start: -100px;
 }
 
 #legend input:focus + label {
   outline: solid 1px;
   outline-offset: -1px;
   outline-color: var(--tab-highlight);
 }
 
@@ -393,18 +385,18 @@ input[type="radio"] {
   position: absolute;
   height: 4px;
   width: 100%;
   bottom: -1px;
   align-self: end;
 }
 
 #legend label {
-  margin-bottom: -1px;
-  padding: 15px 0px;
+  margin-block-end: -1px;
+  padding: 15px 0;
   padding-inline-end: 5px;
   border: 3px solid transparent;
   -moz-context-properties: fill;
   display: inline-block;
 }
 
 #legend label:-moz-focusring {
   outline: none;
@@ -452,17 +444,17 @@ label[data-type="cryptominer"] .icon-sma
 .hover-cryptominer label[for="tab-cryptominer"],
 label:hover {
   cursor: pointer;
 }
 
 .tab-content {
   display: none;
   padding: 22px 20px 20px;
-  border-top: 1px solid var(--tab-highlight);
+  border-block-start: 1px solid var(--tab-highlight);
   background-color: var(--in-content-box-background-odd);
   font-size: 0.8em;
   line-height: 1.75;
 }
 
 .tab-content .content-title {
   font-weight: bold;
 }
@@ -572,31 +564,31 @@ label[for="tab-cryptominer"]:hover ~ #hi
 
 #monitor-body-content .monitor-breached-passwords {
   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;
+  border-block-start: 1px solid var(--in-content-border-color);
+  padding-block-start: 20px;
   line-height: 18px;
-  margin-bottom: 20px;
+  margin-block-end: 20px;
 }
 
 .monitor-info-wrapper {
   display: grid;
   grid: 1fr / 1fr 1fr 1fr;
   grid-column-start: 1;
   grid-column-end: 7;
 }
 
 .monitor-scanned-wrapper {
-  margin-top: 24px;
+  margin-block-start: 24px;
   font-size: 0.85em;
   display: block;
 }
 
 .monitor-card #monitor-header-content > a {
   display: block;
   margin-block-start: 5px;
   width: max-content;
@@ -726,22 +718,39 @@ label[for="tab-cryptominer"]:hover ~ #hi
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-name: loading;
   animation-timing-function: cubic-bezier(.07,.95,1,1);
   background-size: 700px 100%;
   opacity: var(--protection-report-loader-gradient-opacity);
 }
 
+.monitor-card.loading:dir(rtl)::after,
+.lockwise-card.loading:dir(rtl)::after {
+  background-image: linear-gradient(to left, var(--in-content-box-background) 0%, var(--protection-report-loader-color-stop) 30%, var(--in-content-box-background) 40%, var(--in-content-box-background) 100%);
+  animation-name: loading-rtl;
+}
+
 @keyframes loading {
   0% {
     background-position-x: -300px;
   }
 
   100% {
     background-position-x: 700px;
     opacity: 0.02;
   }
 }
 
+@keyframes loading-rtl {
+  0% {
+    background-position-x: right -300px;
+  }
+
+  100% {
+    background-position-x: right 700px;
+    opacity: 0.02;
+  }
+}
+
 .monitor-card.has-logins .card-body {
   padding-block-end: 0;
 }