Bug 1426057 - Move chart style from skin/widgets.css StatisticsPanel.css r=Honza
authorRicky Chien <ricky060709@gmail.com>
Fri, 22 Dec 2017 15:55:10 +0800
changeset 449479 b2d620dbc30ca066809e73dca5227964f2ba6fd0
parent 449478 9fce9abe41c783a469fb87098e19483bf2854891
child 449480 b459383b56c1ff0265250c0e388c5b426be2f7df
push id8527
push userCallek@gmail.com
push dateThu, 11 Jan 2018 21:05:50 +0000
treeherdermozilla-beta@95342d212a7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1426057
milestone59.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 1426057 - Move chart style from skin/widgets.css StatisticsPanel.css r=Honza MozReview-Commit-ID: B08TtEdZ9h
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
devtools/client/styleeditor/styleeditor.xul
devtools/client/themes/chart.css
devtools/client/themes/widgets.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -123,16 +123,17 @@ devtools.jar:
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/images/controls.png (themes/images/controls.png)
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
     skin/images/performance-details-call-tree.svg (themes/images/performance-details-call-tree.svg)
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
+    skin/chart.css (themes/chart.css)
     skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
     skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
     skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
     skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
     skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
     skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
--- a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
@@ -1,14 +1,16 @@
 /* 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/. */
 
 /* Statistics panel */
 
+@import "chrome://devtools/skin/chart.css";
+
 .statistics-panel {
   display: flex;
   height: 100vh;
 }
 
 .statistics-panel .devtools-toolbarbutton.back-button {
   min-width: 4em;
   margin: 0;
@@ -189,9 +191,8 @@
     width: calc(100% - 4em);
   }
 
   .statistics-panel .splitter {
     width: 100%;
     height: 1px;
   }
 }
-
--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -11,16 +11,17 @@
  %sourceEditorStrings;
 <!ENTITY % csscoverageDTD SYSTEM "chrome://devtools-shared/locale/csscoverage.dtd">
  %csscoverageDTD;
 ]>
 
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/splitview.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/chart.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/splitview.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/styleeditor.css" type="text/css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns="http://www.w3.org/1999/xhtml"
         id="style-editor-chrome-window">
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/chart.css
@@ -0,0 +1,135 @@
+/* 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/. */
+
+/* Chart */
+
+.generic-chart-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.theme-dark .generic-chart-container {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .generic-chart-container {
+  color: var(--theme-body-color-alt);
+}
+
+.chart-colored-blob {
+  fill: var(--theme-content-color2);
+  background: var(--theme-content-color2);
+}
+
+/* Chart: Pie */
+
+.pie-chart-slice {
+  stroke-width: 1px;
+  cursor: pointer;
+}
+
+.theme-dark .pie-chart-slice {
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice {
+  stroke: rgba(255,255,255,0.8);
+}
+
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 2px;
+  stroke: #fff;
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke: #000;
+}
+
+.pie-chart-label {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.theme-dark .pie-chart-label {
+  fill: #000;
+}
+
+.theme-light .pie-chart-label {
+  fill: #fff;
+}
+
+.pie-chart-container[slices="1"] > .pie-chart-slice {
+  stroke-width: 0px;
+}
+
+.pie-chart-slice,
+.pie-chart-label {
+  transition: all 0.1s ease-out;
+}
+
+.pie-chart-slice:not(:hover):not([focused]),
+.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
+  transform: none !important;
+}
+
+/* Chart: Table */
+
+.table-chart-title {
+  padding-bottom: 10px;
+  font-size: 120%;
+  font-weight: 600;
+}
+
+.table-chart-row {
+  margin-top: 1px;
+  cursor: pointer;
+}
+
+.table-chart-grid:hover > .table-chart-row {
+  transition: opacity 0.1s ease-in-out;
+}
+
+.table-chart-grid:not(:hover) > .table-chart-row {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
+.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
+  opacity: 0.4;
+}
+
+.table-chart-row-box {
+  width: 8px;
+  height: 1.5em;
+  margin-inline-end: 10px;
+}
+
+.table-chart-row-label {
+  width: 8em;
+  padding-inline-end: 6px;
+  cursor: inherit;
+}
+
+.table-chart-totals {
+  margin-top: 8px;
+  padding-top: 6px;
+}
+
+.table-chart-totals {
+  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
+}
+
+.table-chart-summary-label {
+  font-weight: 600;
+  padding: 1px 0px;
+}
+
+.theme-dark .table-chart-summary-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .table-chart-summary-label {
+  color: var(--theme-body-color);
+}
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -784,148 +784,16 @@
 
 .bar-graph-widget-legend-item > [view="label"] {
   text-shadow: 1px  0px rgba(255,255,255,0.8),
               -1px  0px rgba(255,255,255,0.8),
                0px -1px rgba(255,255,255,0.8),
                0px  1px rgba(255,255,255,0.8);
 }
 
-/* Charts */
-
-.generic-chart-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.theme-dark .generic-chart-container {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .generic-chart-container {
-  color: var(--theme-body-color-alt);
-}
-
-.chart-colored-blob {
-  fill: var(--theme-content-color2);
-  background: var(--theme-content-color2);
-}
-
-/* Charts: Pie */
-
-.pie-chart-slice {
-  stroke-width: 1px;
-  cursor: pointer;
-}
-
-.theme-dark .pie-chart-slice {
-  stroke: rgba(0,0,0,0.2);
-}
-
-.theme-light .pie-chart-slice {
-  stroke: rgba(255,255,255,0.8);
-}
-
-.theme-dark .pie-chart-slice[largest] {
-  stroke-width: 2px;
-  stroke: #fff;
-}
-
-.theme-light .pie-chart-slice[largest] {
-  stroke: #000;
-}
-
-.pie-chart-label {
-  text-anchor: middle;
-  dominant-baseline: middle;
-  pointer-events: none;
-}
-
-.theme-dark .pie-chart-label {
-  fill: #000;
-}
-
-.theme-light .pie-chart-label {
-  fill: #fff;
-}
-
-.pie-chart-container[slices="1"] > .pie-chart-slice {
-  stroke-width: 0px;
-}
-
-.pie-chart-slice,
-.pie-chart-label {
-  transition: all 0.1s ease-out;
-}
-
-.pie-chart-slice:not(:hover):not([focused]),
-.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
-  transform: none !important;
-}
-
-/* Charts: Table */
-
-.table-chart-title {
-  padding-bottom: 10px;
-  font-size: 120%;
-  font-weight: 600;
-}
-
-.table-chart-row {
-  margin-top: 1px;
-  cursor: pointer;
-}
-
-.table-chart-grid:hover > .table-chart-row {
-  transition: opacity 0.1s ease-in-out;
-}
-
-.table-chart-grid:not(:hover) > .table-chart-row {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
-.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
-  opacity: 0.4;
-}
-
-.table-chart-row-box {
-  width: 8px;
-  height: 1.5em;
-  margin-inline-end: 10px;
-}
-
-.table-chart-row-label {
-  width: 8em;
-  padding-inline-end: 6px;
-  cursor: inherit;
-}
-
-.table-chart-totals {
-  margin-top: 8px;
-  padding-top: 6px;
-}
-
-.table-chart-totals {
-  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
-}
-
-.table-chart-summary-label {
-  font-weight: 600;
-  padding: 1px 0px;
-}
-
-.theme-dark .table-chart-summary-label {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .table-chart-summary-label {
-  color: var(--theme-body-color);
-}
-
 /* Table Widget */
 
 /* Table body */
 
 .table-widget-body > .devtools-side-splitter {
   background-color: transparent;
 }