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 331225 7ba94e0c5daa48d7667519c930eca31d98648512
parent 331224 f055f19a78292d4e848ab64b67769b0a30e1efa8
child 331226 0c5094d6f5d13d671cccee6c343f87cab54243e3
push id9858
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 14:37:10 +0000
treeherdermozilla-aurora@203106ef6cb6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl, kwierso
bugs1163290
milestone50.0a1
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;
 }