From b16b0f360e6a15e0ed0c8674d4b5d74bc8f94d04 Mon Sep 17 00:00:00 2001 From: Itiel Date: Wed, 30 Oct 2019 18:35:37 +0000 Subject: [PATCH] Bug 1592694 - Cleanup aboutTelemetry.css to fix RTL and remove obsolete rules r=chutten Differential Revision: https://phabricator.services.mozilla.com/D51147 --HG-- extra : moz-landing-system : lando --- toolkit/content/aboutTelemetry.css | 86 ++++++++++-------------------- 1 file changed, 27 insertions(+), 59 deletions(-) diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css index ee9273a03f13..68fd131f50d4 100644 --- a/toolkit/content/aboutTelemetry.css +++ b/toolkit/content/aboutTelemetry.css @@ -14,7 +14,7 @@ body { } #categories { - padding-top: 0px; + padding-top: 0; overflow-y: auto; margin-bottom: 42px; -moz-user-select: none; @@ -37,11 +37,7 @@ body { background-color: var(--in-content-page-background); position: absolute; bottom: 0; - left: 0; -} - -body:dir(rtl) #category-raw{ - right: 0; + inset-inline-start: 0; } .heading { @@ -58,7 +54,7 @@ body:dir(rtl) #category-raw{ } .header select { - margin-left: 4px; + margin-inline-start: 4px; } #sectionTitle { @@ -71,14 +67,8 @@ body:dir(rtl) #category-raw{ } #stores { - padding-top: 5px; - padding-left: 5px; - padding-bottom: 5px; -} - -.heading > h3 { - margin: 0; - padding-bottom: 12px; + padding-block: 5px; + padding-inline-start: 5px; } #ping-type { @@ -88,7 +78,9 @@ body:dir(rtl) #category-raw{ cursor: pointer; } -#older-ping, #newer-ping, #ping-date { +#older-ping, +#newer-ping, +#ping-date { pointer-events: all; -moz-user-select: none; cursor: pointer; @@ -103,7 +95,7 @@ body:dir(rtl) #category-raw{ fill: currentColor; } -body:dir(rtl) .dropdown { +.dropdown:dir(rtl) { background-position-x: left 8px; } @@ -125,13 +117,13 @@ body:dir(rtl) .dropdown { } .category-name { - padding: 9px 0px; + padding: 9px 0; vertical-align: middle; } .category-subsection { color: var(--in-content-text-color); - padding: 8px 0px; + padding: 8px 0; padding-inline-start: 16px; display: none; } @@ -156,13 +148,6 @@ section:not(.active) { display: none; } -#page-description { - border: 1px solid threedshadow; - margin: 0px; - padding: 10px; - line-height: 1.2; -} - #ping-explanation > span { cursor: pointer; border-bottom-width: 2px; @@ -173,7 +158,7 @@ section:not(.active) { position: fixed; top: 50%; left: 50%; - transform: translate(-50%,-50%); + transform: translate(-50%, -50%); display: flex; align-items: center; flex-direction: column; @@ -206,23 +191,16 @@ section:not(.active) { flex-direction: column; background-color: var(--in-content-box-background); border: 1px solid var(--in-content-box-border-color); - margin: 12px 0px; -} - -#ping-picker:dir(ltr) { - left: 12px; -} - -#ping-picker:dir(rtl) { - right: 12px; + margin: 12px 0; + inset-inline-start: 12px; } #ping-picker .title { - margin: 4px 0px; + margin: 4px 0; } #ping-source-picker { - margin-left: 5px; + margin-inline-start: 5px; margin-bottom: 10px; } @@ -236,7 +214,7 @@ section:not(.active) { text-decoration: underline; } -#histograms, #thread-hang-stats>div { +#histograms { overflow: hidden; } @@ -245,11 +223,12 @@ section:not(.active) { white-space: nowrap; padding: 10px; position: relative; /* required for position:absolute of the contained .copy-node */ - padding: 12px 20px 12px 20px; + padding-block: 12px; + padding-inline: 20px; border: 1px solid var(--in-content-box-border-color); border-radius: 2px; margin-bottom: 24px; - margin-right: 24px; + margin-inline-end: 24px; min-height: 17.5em; } @@ -272,11 +251,11 @@ section:not(.active) { margin-bottom: 1em; } -.keyed-scalar, .sub-section { +.keyed-scalar, +.sub-section { margin-bottom: 1em; } - .keyed-title { text-overflow: ellipsis; margin: 12px 0; @@ -299,7 +278,7 @@ section:not(.active) { border-radius: 2px; } -.bar:nth-child(even) .long-label { +.bar:nth-child(even) .long-label { margin-bottom: 1em; } @@ -330,29 +309,18 @@ th { padding: 0.5em 0; } -body:dir(rtl) th { - text-align: right; -} - caption { - text-align: left; + text-align: start; font-size: 22px; - margin: 0.5em 0 0.5em 0; -} - -body:dir(rtl) caption { - text-align: right; + margin-block: 0.5em + margin-inline: 0; } .copy-node { visibility: hidden; position: absolute; bottom: 1px; - right: 1px; -} - -body:dir(rtl) .copy-node { - left: 1px; + inset-inline-end: 1px; } .histogram:hover .copy-node {