summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css')
-rw-r--r--devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css171
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);
+}