Bug 1378759 - Improve the readability of table in about:telemetry r=chutten
authorflyingrub <flyinggrub@gmail.com>
Thu, 06 Jul 2017 15:12:08 +0200
changeset 369229 05c454cb13f309efebdf07033c8efafd8b80b0de
parent 369228 bf03c3fe176cf36e8b7cedb49e5114bae640ab67
child 369230 25c4b42131276be014cc674720a58a0f061328ce
push id46617
push userryanvm@gmail.com
push dateMon, 17 Jul 2017 21:46:55 +0000
treeherderautoland@25c4b4213127 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerschutten
bugs1378759
milestone56.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 1378759 - Improve the readability of table in about:telemetry r=chutten Reduce the size of the sidebar to let more space available for the actual content. MozReview-Commit-ID: 5z1zwxC8Ys1
toolkit/content/aboutTelemetry.css
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -10,18 +10,18 @@ html {
 
 body {
   display: flex;
   align-items: stretch;
   height: 100%;
 }
 
 #categories {
+  min-width: 250px;
   padding-top: 0px;
-  min-width: 300px;
   overflow-y: auto;
 }
 
 #category-raw {
   border-top: 1px solid var(--in-content-header-border-color);
   box-sizing: border-box;
   background-color: inherit;
   min-width: inherit;
@@ -270,20 +270,40 @@ body[dir="rtl"] .bar {
   float: right;
 }
 
 .bar-inner {
   background-color: DeepSkyBlue;
   border: 1px solid #0000b0;
 }
 
+th, td, table {
+  text-align: start;
+  border-collapse: collapse;
+}
+
+table {
+  width: 100%;
+  font-size: 15px;
+}
+
+td {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--in-content-box-border-color);
+}
+
+tr:not(:first-child):hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
 th {
+  font-size: larger;
   font-weight: bold;
   white-space: nowrap;
-  text-align: left;
+  padding-bottom: 0.5em;
 }
 
 body[dir="rtl"] th {
   text-align: right;
 }
 
 caption {
   font-weight: bold;