1 files changed, 171 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
new file mode 100644
index 0000000000..a0767097c3
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
@@ -0,0 +1,171 @@
+/* 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;
+  overflow: auto;
+}
+
+.statistics-panel .back-button {
+  height: -moz-fit-content;
+  position: absolute;
+  padding: 7px 5px;
+  margin: 0px;
+  top: 8px;
+  inset-inline-start: 8px;
+}
+
+.theme-light .statistics-panel .back-button {
+  background-color: var(--grey-20);
+}
+
+.statistics-panel .splitter {
+  border-color: var(--theme-splitter-color);
+  cursor: default;
+  pointer-events: none;
+  height: 100%;
+}
+
+.statistics-panel .charts-container {
+  display: flex;
+  width: 100%;
+}
+
+.statistics-panel .charts,
+.statistics-panel .pie-table-chart-container {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+}
+
+.statistics-panel .learn-more-link {
+  font-weight: 400;
+}
+
+.statistics-panel .table-chart-title {
+  display: flex;
+  align-items: center;
+}
+
+.pie-table-chart-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.statistics-panel .pie-chart-container {
+  margin-inline-start: 3vw;
+  margin-inline-end: 1vw;
+}
+
+.statistics-panel .table-chart-container {
+  min-width: 240px;
+  margin-inline-start: 1vw;
+  margin-inline-end: 3vw;
+}
+
+tr[data-statistic-name] td:first-of-type {
+  border-inline-start: 15px solid var(--stat-color);
+}
+
+path[data-statistic-name] {
+  fill: var(--stat-color);
+}
+
+[data-statistic-name=html] {
+  --stat-color: var(--theme-highlight-bluegrey);
+}
+
+[data-statistic-name=css] {
+  --stat-color: var(--theme-highlight-blue);
+}
+
+[data-statistic-name=js] {
+  --stat-color: var(--theme-highlight-lightorange);
+}
+
+[data-statistic-name=xhr] {
+  --stat-color: var(--theme-highlight-orange);
+}
+
+[data-statistic-name=fonts] {
+  --stat-color: var(--theme-highlight-purple);
+}
+
+[data-statistic-name=images] {
+  --stat-color: var(--theme-highlight-pink);
+}
+
+[data-statistic-name=media] {
+  --stat-color: var(--theme-highlight-green);
+}
+
+/*
+ * Align cell text to the center by default.
+ */
+.table-chart-row-label {
+  text-align: center;
+}
+
+.table-chart-row-label[name=count] {
+  width: 3em;
+  text-align: end;
+}
+
+.table-chart-row-label[name=label] {
+  width: 7em;
+  text-align: start;
+}
+
+.table-chart-row-label[name=size] {
+  width: 7em;
+  text-align: start;
+}
+
+.table-chart-row-label[name=time] {
+  width: 7em;
+  text-align: start;
+}
+
+.table-chart-totals {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Responsive web design support */
+
+@media (max-width: 700px) {
+  .statistics-panel .charts-container {
+    flex-direction: column;
+    /* Minus 4em for statistics back button width */
+    width: calc(100% - 4em);
+  }
+
+  .statistics-panel .splitter {
+    width: 100%;
+    height: 1px;
+  }
+
+  .statistics-panel .table-chart-title {
+    margin-top: 3rem;
+  }
+
+  .statistics-panel .charts,
+  .statistics-panel .pie-table-chart-container{
+    margin-bottom: 2rem;
+  }
+}
+
+.offscreen{
+    position: absolute!important;
+    font-size: 0px;
+    overflow: hidden;
+    clip: rect(1px,1px,1px,1px);
+    clip-path: polygon(0 0,0 0,0 0,0 0);
+}