Bug 1163290 - Fix up CSS coverage layout and make its text selectable. r=gl a=kwierso CLOSED TREE
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 22 Jul 2016 00:49:50 +0200
changeset 346191 7ba94e0c5daa48d7667519c930eca31d98648512
parent 346190 f055f19a78292d4e848ab64b67769b0a30e1efa8
child 346192 0c5094d6f5d13d671cccee6c343f87cab54243e3
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl, kwierso
bugs1163290
milestone50.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 1163290 - Fix up CSS coverage layout and make its text selectable. r=gl a=kwierso CLOSED TREE MozReview-Commit-ID: BaKc4zsyHSY
devtools/client/styleeditor/styleeditor.css
devtools/client/themes/styleeditor.css
--- a/devtools/client/styleeditor/styleeditor.css
+++ b/devtools/client/styleeditor/styleeditor.css
@@ -126,26 +126,8 @@ li:hover > hgroup > .stylesheet-more > h
     -moz-box-orient: horizontal;
     -moz-box-flex: 1;
   }
 
   .stylesheet-more > spacer {
     -moz-box-flex: 0;
   }
 }
-
-.csscoverage-report-container {
-  -moz-box-flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.csscoverage-report-content > * {
-  display: inline-block;
-}
-
-.csscoverage-report {
-  -moz-box-orient: horizontal;
-}
-
-.csscoverage-report .pie-table-chart-container {
-  -moz-box-orient: vertical;
-}
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -198,29 +198,58 @@ h3 {
     -moz-box-align: baseline;
   }
 
   .stylesheet-sidebar {
     width: 180px;
   }
 }
 
+/* CSS coverage */
 .csscoverage-report {
   background-color: var(--theme-toolbar-background);
+  -moz-box-orient: horizontal;
 }
 
 .csscoverage-report-container {
   height: 100vh;
-  padding: 0 30px;
+  padding: 0 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -moz-box-flex: 1;
 }
 
 .csscoverage-report-content {
   margin: 20px auto;
   -moz-column-width: 300px;
   font-size: 13px;
+  -moz-user-select: text;
+}
+
+.csscoverage-report-summary,
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  display: inline-block;
+}
+
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 950px) {
+  .csscoverage-report-content {
+    display: block;
+  }
+
+  .csscoverage-report-summary {
+    display: block;
+    text-align: center;
+  }
 }
 
 .csscoverage-report h1 {
   font-size: 120%;
 }
 
 .csscoverage-report h2 {
   font-size: 110%;
@@ -228,16 +257,22 @@ h3 {
 
 .csscoverage-report h1,
 .csscoverage-report h2,
 .csscoverage-report h3 {
   font-weight: bold;
   margin: 10px 0;
 }
 
+.csscoverage-report code,
+.csscoverage-report textarea {
+  font-family: var(--monospace-font-family);
+  font-size: inherit;
+}
+
 .csscoverage-list:after {
   content: ', ';
 }
 
 .csscoverage-list:last-child:after {
   display: none;
 }
 
@@ -263,19 +298,24 @@ h3 {
   margin: 0;
   padding: 0;
   border-radius: 0;
   border-top: none;
   border-bottom: none;
   border-inline-start: none;
 }
 
+.csscoverage-report .pie-table-chart-container {
+  -moz-box-orient: vertical;
+  text-align: start;
+}
+
 .chart-colored-blob[name="Used Preload"] {
   fill: var(--theme-highlight-pink);
-  background: var(--theme-highlight-pink);;
+  background: var(--theme-highlight-pink);
 }
 
 .chart-colored-blob[name=Used] {
   fill: var(--theme-highlight-green);
   background: var(--theme-highlight-green);
 }
 
 .chart-colored-blob[name=Unused] {
@@ -294,10 +334,10 @@ h3 {
   stroke: rgba(255,255,255,0.8);
 }
 
 .csscoverage-report .pie-chart-slice {
   cursor: default;
 }
 
 .csscoverage-report-chart {
-  margin: 0 50px;
+  margin: 0 20px;
 }