summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/src/assets/styles
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /devtools/client/netmonitor/src/assets/styles
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/netmonitor/src/assets/styles')
-rw-r--r--devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css181
-rw-r--r--devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css379
-rw-r--r--devtools/client/netmonitor/src/assets/styles/HeadersPanel.css210
-rw-r--r--devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css11
-rw-r--r--devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css574
-rw-r--r--devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css184
-rw-r--r--devtools/client/netmonitor/src/assets/styles/RequestList.css653
-rw-r--r--devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css171
-rw-r--r--devtools/client/netmonitor/src/assets/styles/StatusBar.css62
-rw-r--r--devtools/client/netmonitor/src/assets/styles/StatusCode.css100
-rw-r--r--devtools/client/netmonitor/src/assets/styles/Toolbar.css102
-rw-r--r--devtools/client/netmonitor/src/assets/styles/UrlPreview.css100
-rw-r--r--devtools/client/netmonitor/src/assets/styles/messages.css165
-rw-r--r--devtools/client/netmonitor/src/assets/styles/netmonitor.css84
-rw-r--r--devtools/client/netmonitor/src/assets/styles/search.css155
-rw-r--r--devtools/client/netmonitor/src/assets/styles/variables.css45
16 files changed, 3176 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
new file mode 100644
index 0000000000..9549985326
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
@@ -0,0 +1,181 @@
+/* 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/. */
+
+.network-monitor .custom-method-and-url .custom-method-value-label {
+ grid-column: 1 / 1;
+ grid-row: 1 / 1;
+}
+
+.network-monitor .custom-method-and-url .custom-url-value {
+ grid-column: 2 / 2;
+ grid-row: 2 / 2;
+ margin-inline-start: 12px;
+}
+
+.network-monitor .custom-method-and-url .custom-method-value {
+ grid-column: 1 / 1;
+ grid-row: 2 / 2;
+}
+
+.network-monitor .custom-method-and-url .custom-url-value-label {
+ grid-column: 2 / 2;
+ grid-row: 1 / 1 ;
+ margin-inline-start: 12px;
+}
+
+.network-monitor .tabpanel-summary-container.custom-method-and-url {
+ display: grid;
+ grid-template-columns: auto 1fr;
+}
+
+.network-monitor .custom-method-and-url input {
+ font-weight: 400;
+ margin-top: 4px;
+ min-width: 9ch;
+ padding: 2px 3px;
+}
+
+.network-monitor .custom-request-panel textarea {
+ font-weight: 400;
+ margin-top: 4px;
+ padding: 8px;
+ direction: ltr;
+}
+
+.network-monitor .custom-request-panel {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.network-monitor .custom-request-panel .custom-request-panel-content {
+ flex: 1 1 auto;
+ height: auto;
+ overflow: auto;
+}
+
+.network-monitor .custom-request-panel-content > div:not(.custom-request) {
+ margin-bottom: 12px;
+ padding-inline: 16px;
+}
+
+.network-monitor .custom-request {
+ display: block;
+ padding: 0;
+}
+
+.network-monitor .custom-request .custom-request-button-container {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ gap: 8px;
+ margin-block: 16px 12px;
+ margin-inline: 16px;
+}
+
+.network-monitor .custom-request-panel .custom-request-label {
+ font-weight: 400;
+ white-space: nowrap;
+}
+
+.network-monitor .custom-request button {
+ height: 24px;
+ margin-bottom: 4px;
+ padding-inline: 8px;
+ width: auto;
+}
+
+.network-monitor .custom-request button:focus {
+ box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
+ 0 0 0 4px rgba(10,132,255,0.3)
+}
+
+.network-monitor .custom-request #custom-request-send-button {
+ background-color: var(--blue-60);
+ color: white;
+}
+
+.network-monitor .custom-request #custom-request-send-button:active {
+ background-color: var(--blue-80);
+}
+
+.network-monitor .custom-request #custom-request-send-button:hover {
+ background-color: var(--blue-70);
+}
+
+.network-monitor .custom-request #custom-request-close-button {
+ margin-inline-end: 4px;
+}
+
+.network-monitor .custom-header {
+ border-style: solid;
+ border-width: 0;
+ flex: none;
+ height: calc(var(--theme-toolbar-height) + 1px);
+ padding: 4px 16px;
+}
+
+:root.theme-dark .network-details-bar .custom-request-panel {
+ background-color: var(--grey-85);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button {
+ background-color: var(--toolbarbutton-background);
+ border: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button:hover:active {
+ background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button:focus {
+ background-color: var(--theme-selection-focus-background);
+}
+
+:root.theme-dark .network-monitor .custom-request-label.custom-header {
+ background-color: var(--grey-80);
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-details-bar .custom-request-panel input,
+:root.theme-dark .network-details-bar .custom-request-panel textarea {
+ background-color: var(--grey-70);
+ border: 1px solid var(--grey-85);
+ color: white;
+}
+
+:root.theme-dark .network-monitor .custom-request-label {
+ color: var(--grey-40);
+}
+
+:root.theme-light .network-details-bar .custom-request-label.custom-header {
+ background-color: var(--grey-10);
+ border-bottom: 1px solid var(--grey-25);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button {
+ background-color: var(--grey-20);
+ border: var(--theme-splitter-color);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button:hover:active {
+ background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button:focus {
+ outline: 2px solid var(--blue-50);
+ outline-offset: -2px;
+ box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
+ border-radius: 2px;
+}
+
+:root.theme-light .network-details-bar .custom-request-panel input,
+:root.theme-light .network-details-bar .custom-request-panel textarea {
+ background-color: white;
+ border: 1px solid var(--grey-25);
+ color: var(--grey-90);
+}
+
+:root.theme-light .network-monitor .custom-request-label {
+ color: var(--grey-60);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
new file mode 100644
index 0000000000..cd0f269bc6
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
@@ -0,0 +1,379 @@
+/* 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/. */
+
+.network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input ) {
+ padding-inline-start: 0;
+ margin: 0;
+}
+
+.network-monitor .tabpanel-summary-container.http-custom-method-and-url {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ width: 100%;
+}
+
+.network-monitor .http-custom-method-and-url .http-custom-method-value {
+ grid-column: 1 / 1;
+ grid-row: 1 / 1;
+ align-self: start;
+ margin-inline-start: 10px;
+ padding-top: 4px;
+ font-size: 11px;
+ line-height: 13px;
+}
+
+.auto-growing-textarea {
+ display: grid;
+ width: 100%;
+}
+
+.auto-growing-textarea:focus-within::after {
+ content: attr(data-replicated-value) " ";
+ white-space: pre-wrap;
+ visibility: hidden;
+ word-wrap: break-word;
+}
+
+.auto-growing-textarea > textarea {
+ resize: none;
+ overflow: hidden;
+ /* Force the content in a single line */
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* When editing a textarea, restore the multiline display */
+.auto-growing-textarea > textarea:focus {
+ text-overflow: unset;
+ white-space: unset;
+}
+
+.auto-growing-textarea > textarea,
+.auto-growing-textarea:focus-within::after {
+ grid-area: 1 / 1 / 2 / 2;
+ border: 0;
+ font-weight: normal;
+ min-width: 9ch;
+ padding: 4px;
+ padding-inline-start: 7px;
+ /* Adding this to have maximo 5 lines */
+ max-height: 70px;
+ overflow-y: auto;
+}
+
+.network-monitor .http-custom-method-and-url .http-custom-method-value,
+.tabpanel-summary-container.http-custom-section .tabpanel-summary-input {
+ border: 0;
+}
+
+.tabpanel-summary-container .http-custom-section .tabpanel-summary-input-value {
+ font-weight: normal;
+ min-width: 9ch;
+ padding: 4px;
+ padding-inline-start: 7px;
+}
+
+.network-monitor .http-custom-method-and-url input ::placeholder {
+ color: var(--grey-50);
+ font-size: 11px;
+ line-height: 13px;
+ margin-inline-end: 8px;
+}
+
+.network-monitor .tabpanel-summary-container .http-custom-request-label {
+ padding: 6px 13px;
+ font-size: 12px;
+ line-height: 14px;
+}
+
+.network-monitor .http-custom-request-panel textarea {
+ color: var(--grey-50);
+ font-weight: normal;
+ font-size: 11px;
+ line-height: 13px;
+ direction: ltr;
+}
+
+.network-monitor .http-custom-request-panel {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.network-monitor .http-custom-request-panel .http-custom-request-panel-content {
+ flex: 1 1 auto;
+ height: auto;
+ overflow: auto;
+}
+
+.network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) {
+ position: relative;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ width: 100%;
+ overflow: hidden;
+ padding: 0px 13px;
+ padding-inline-end: 0;
+}
+
+.network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-name {
+ width: 25%;
+ align-self: stretch;
+ min-width: min-content;
+}
+
+.network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-value {
+ width: 75%;
+ align-self: stretch;
+}
+
+.map-add-new-inputs {
+ padding-bottom: 2px;
+}
+
+#http-custom-postdata-value.tabpanel-summary-input {
+ padding-inline-start: 14px;
+}
+
+.http-custom-delete-button {
+ opacity: 0;
+ flex: none;
+ width: 20px;
+ height: 20px;
+ margin: 0;
+ padding: 2px;
+ border: none;
+ outline: none;
+ background-color: transparent;
+ position: absolute;
+ right: 0;
+}
+
+.tabpanel-summary-container.http-custom-input .http-custom-delete-button::-moz-focus-inner {
+ border: none;
+}
+
+.tabpanel-summary-container.http-custom-input:hover .http-custom-delete-button {
+ opacity: 1;
+}
+
+.tabpanel-summary-container.http-custom-input .http-custom-delete-button::before {
+ content: "";
+ display: block;
+ width: 16px;
+ height: 16px;
+ border-radius: 2px;
+ background: url("chrome://devtools/skin/images/close.svg") no-repeat center;
+ background-size: 12px;
+ -moz-context-properties: fill;
+ fill: var(--theme-icon-color);
+}
+
+.tabpanel-summary-container.http-custom-input .http-custom-delete-button:hover::before {
+ fill: var(--theme-selection-color);
+ background-color: var(--theme-selection-background);
+}
+
+.network-monitor .http-custom-request-button-container {
+ display: flex;
+ justify-content: end;
+ flex-wrap: wrap-reverse;
+ gap: 8px;
+ padding: 10px 16px;
+ border-block-start: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .http-custom-request-panel .http-custom-request-label {
+ font-weight: 400;
+ white-space: nowrap;
+}
+
+.network-monitor .http-custom-request-button-container button {
+ height: 24px;
+ padding-inline: 8px;
+ width: auto;
+}
+
+.network-monitor .http-custom-request-button-container button:focus {
+ box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
+ 0 0 0 4px rgba(10,132,255,0.3)
+}
+
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button {
+ background-color: var(--blue-60);
+ color: white;
+}
+
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button:active {
+ background-color: var(--blue-80);
+}
+
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button:hover {
+ background-color: var(--blue-70);
+}
+
+.network-monitor .http-custom-header {
+ border-style: solid;
+ border-width: 0;
+ flex: none;
+ height: calc(var(--theme-toolbar-height) + 1px);
+ padding: 4px 16px;
+}
+
+/* Dark theme */
+:root.theme-dark .network-details-bar .http-custom-request-panel {
+ background-color: var(--grey-85);
+}
+
+:root.theme-dark .network-monitor .tabpanel-summary-container:is(.http-custom-method-and-url, .http-custom-section),
+:root.theme-dark .network-monitor .tabpanel-summary-container .http-custom-request-label {
+ border-bottom: 1px solid var(--grey-60);
+}
+
+:root.theme-dark .network-monitor .http-custom-method-and-url :is(.http-custom-method-value, .http-custom-url-value),
+:root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value {
+ background-color: var(--grey-85);
+ color: white;
+}
+
+:root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) #http-custom-input-value {
+ border-inline-start: 1px solid var(--grey-60);
+}
+
+:root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value:focus {
+ outline: 2px solid var(--blue-50);
+ width: calc(100% - 8px);
+}
+
+:root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input:focus {
+ outline: 2px solid var(--blue-50);
+ margin-inline-start: 2px;
+ width: calc(100% - 5px);
+}
+
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
+ outline: 2px solid var(--blue-50);
+ margin-inline-end: 1px;
+}
+
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
+ outline: 2px solid var(--blue-50);
+ width: calc(100% - 20px);
+}
+
+:root.theme-dark .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value,
+:root.theme-dark #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
+ margin-inline-end: 1px;
+}
+
+:root.theme-dark .network-monitor #http-custom-request-clear-button {
+ background-color: var(--toolbarbutton-background);
+ border: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-monitor #http-custom-request-clear-button:hover:active {
+ background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-dark .network-monitor #http-custom-request-clear-button:focus {
+ background-color: var(--theme-selection-focus-background);
+}
+
+:root.theme-dark .network-monitor .http-custom-request-label.http-custom-header {
+ background-color: var(--grey-80);
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-details-bar .http-custom-request-panel input,
+:root.theme-dark .network-details-bar .http-custom-request-panel textarea {
+ background-color: var(--grey-70);
+ border: 1px solid var(--grey-85);
+ color: white;
+}
+
+:root.theme-dark .network-monitor .http-custom-request-label {
+ color: var(--grey-40);
+}
+
+/* Light theme */
+:root.theme-light .network-monitor .tabpanel-summary-container:is(.http-custom-method-and-url, .http-custom-section),
+:root.theme-light .network-monitor .tabpanel-summary-container .http-custom-request-label {
+ border-bottom: 1px solid var(--grey-30);
+}
+
+:root.theme-light .network-monitor .http-custom-method-and-url .http-custom-method-value {
+ background-color: white;
+}
+
+:root.theme-light .network-monitor .http-custom-method-and-url .http-custom-url-value,
+:root.theme-light .tabpanel-summary-container .tabpanel-summary-input-value {
+ border-inline-start: 1px solid var(--grey-30);
+}
+
+:root.theme-light .network-monitor .http-custom-method-and-url .http-custom-url-value:focus {
+ outline: 2px solid var(--blue-50);
+ width: calc(100% - 8px);
+}
+
+:root.theme-light .network-monitor .tabpanel-summary-container .tabpanel-summary-input:focus {
+ outline: 2px solid var(--blue-50);
+ margin-inline-start: 2px;
+ width: calc(100% - 5px);
+}
+
+:root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
+ outline: 2px solid var(--blue-50);
+ margin-inline-end: 1px;
+}
+
+:root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
+ outline: 2px solid var(--blue-50);
+ width: calc(100% - 20px);
+}
+
+:root.theme-light .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value:focus,
+:root.theme-light #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
+ margin-inline-end: 3px;
+}
+
+:root.theme-light .network-monitor .tabpanel-summary-container .http-custom-request-label {
+ background-color: var(--grey-10);
+ color: var(--grey-90);
+}
+
+:root.theme-light .network-details-bar .http-custom-request-label.http-custom-header {
+ background-color: var(--grey-10);
+ border-bottom: 1px solid var(--grey-25);
+}
+
+:root.theme-light .network-monitor #http-custom-request-clear-button {
+ background-color: var(--grey-25);
+ border: var(--theme-splitter-color);
+}
+
+:root.theme-light .network-monitor #http-custom-request-clear-button:hover:active {
+ background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-light .network-monitor #http-custom-request-clear-button:focus {
+ outline: 2px solid var(--blue-50);
+ outline-offset: -2px;
+ box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
+ border-radius: 2px;
+}
+
+:root.theme-light .network-details-bar .http-custom-request-panel input,
+:root.theme-light .network-details-bar .http-custom-request-panel textarea {
+ background-color: white;
+ border: 1px solid var(--grey-25);
+ color: var(--grey-90);
+}
+
+:root.theme-light .network-monitor .http-custom-request-label {
+ color: var(--grey-60);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
new file mode 100644
index 0000000000..f62ec166e1
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
@@ -0,0 +1,210 @@
+/* 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/. */
+
+/* Headers tabpanel */
+
+.network-monitor .headers-panel-container {
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+}
+
+.network-monitor .headers-panel-container .treeTable {
+ overflow: hidden;
+}
+
+.network-monitor .headers-panel-container .panel-container {
+ position: absolute;
+ top: calc(var(--theme-toolbar-height) + 1px);
+ bottom: 0;
+ right: 0;
+ left: 0;
+ height: auto;
+}
+
+.network-monitor .headers-panel-container .devtools-button {
+ padding: 0;
+}
+.network-monitor .headers-panel-container .devtools-dropdown-button {
+ padding: 0;
+}
+
+.network-monitor .headers-panel-container .devtools-button:is(#block-button, #edit-resend-button) {
+ height: 19px;
+ padding: 0 2px;
+}
+
+.network-monitor .headers-panel-container .devtools-button:not(:hover) {
+ background-color: transparent;
+}
+
+.network-monitor .headers-overview {
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .headers-overview .summary {
+ padding: 6px 16px 2px;
+}
+
+.network-monitor .headers-summary,
+.network-monitor .response-summary {
+ display: flex;
+ align-items: center;
+}
+
+.network-monitor .raw-headers-toggle {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: center;
+ cursor: pointer;
+}
+
+.network-monitor .raw-headers-toggle .headers-summary-label {
+ color: var(--theme-toolbar-color);
+}
+
+.network-monitor .raw-headers-toggle-input > input {
+ display: inline-block;
+ width: 2em;
+ vertical-align: bottom;
+ font-size: 12px;
+}
+
+.network-monitor .properties-view .tree-container .treeTable .treeValueCell .devtools-checkbox-toggle {
+ margin-block: 2px;
+}
+
+.network-monitor .properties-view .raw-headers-container .raw-headers {
+ display: block;
+ overflow: hidden;
+ width: 100%;
+ padding: 2px 12px;
+ white-space: pre;
+ overflow-wrap: normal;
+ overflow-x: auto;
+ border: none;
+}
+
+.network-monitor .accordion-item .treeTable .objectBox-string {
+ color: var(--theme-body-color);
+}
+
+.network-monitor .accordion-item .treeTable tr.treeRow.selected .objectBox-string {
+ color: var(--theme-selection-color);
+}
+
+.network-monitor .properties-view .raw-headers-container td {
+ display: block;
+}
+
+.network-monitor .properties-view .raw-headers-container textarea {
+ width: 100%;
+ font-family: var(--monospace-font-family);
+ font-size: var(--theme-body-font-size);
+ resize: none;
+}
+
+.theme-light .network-monitor .properties-view textarea {
+ background-color: white;
+ border: 1px solid var(--grey-25);
+ color: var(--grey-90);
+}
+
+.theme-dark .network-monitor .properties-view textarea {
+ background-color: var(--grey-70);
+ border: 1px solid var(--grey-85);
+ color: white;
+}
+
+.network-monitor .properties-view .raw-headers .tabpanel-summary-label {
+ padding: 0 0 4px;
+}
+
+.headers-summary .textbox-input {
+ margin-inline-end: 2px;
+}
+
+.network-monitor .headers-summary .status-text {
+ width: auto !important;
+ margin-inline-start: 4px;
+}
+
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow {
+ padding: 1px 0 2px;
+}
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeLabelCell {
+ float: left;
+ margin-right: -33px;
+ margin-left: 5px;
+ padding: 0;
+
+}
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeValueCell {
+ display: inline;
+ word-break: break-all;
+ box-decoration-break: clone;
+ padding-left: 39px;
+ padding-right: 20px;
+}
+
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeValueCell div {
+ display: inline;
+}
+
+/* Cookies */
+
+.network-monitor .cookies-panel-container .accordion .properties-view tr.treeRow .treeLabelCell {
+ padding-inline-start: 0;
+}
+
+/* Summary tabpanel */
+
+.network-monitor .tabpanel-summary-container {
+ flex-wrap: wrap;
+ padding-inline-start: 4px;
+ margin-bottom: 5px;
+}
+
+.network-monitor .tabpanel-summary-container .tracking-resource {
+ margin-inline: -2px 2px;
+ vertical-align: text-bottom;
+ fill: var(--theme-icon-color);
+}
+
+.network-monitor .tabpanel-summary-label {
+ display: inline-block;
+ padding-inline-end: 3px;
+ min-width: 90px;
+ color: var(--theme-icon-dimmed-color);
+}
+
+.network-monitor .tabpanel-summary-value {
+ color: inherit;
+ padding-inline-start: 3px;
+ unicode-bidi: plaintext;
+}
+
+.network-monitor .tabpanel-summary-value strong {
+ margin-right: 3px;
+}
+
+.theme-dark .network-monitor .tabpanel-summary-value {
+ color: var(--theme-selection-color);
+}
+
+.network-monitor .tracking-protection {
+ color: var(--theme-icon-dimmed-color);
+ max-width: 200px;
+}
+
+.network-monitor .tracking-protection .learn-more-link:not(:hover)::before {
+ color: var(--theme-icon-dimmed-color);
+}
+
+.network-monitor .headers-summary-label,
+.network-monitor .tree-container .objectBox {
+ white-space: nowrap;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
new file mode 100644
index 0000000000..a2d46ed522
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
@@ -0,0 +1,11 @@
+/* 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/. */
+
+ .network-monitor .network-action-bar {
+ width: 100%;
+ }
+
+ .network-monitor .network-action-bar .tabs-menu-item {
+ width: 50%;
+ }
diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
new file mode 100644
index 0000000000..0f17d4cc64
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
@@ -0,0 +1,574 @@
+/* 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/. */
+
+/* Network details panel */
+
+.network-monitor .network-details-bar {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.network-monitor .panel-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.network-monitor .panel-container .tree-container .objectBox {
+ white-space: normal;
+ word-wrap: break-word;
+ unicode-bidi: plaintext;
+}
+
+.network-monitor .properties-view {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ height: 100%;
+ overflow: auto;
+}
+
+.network-monitor .properties-view .searchbox-section {
+ flex: 0 1 auto;
+}
+
+.network-monitor .properties-view .devtools-searchbox {
+ padding: 0;
+}
+
+.network-monitor .properties-view .devtools-searchbox input {
+ margin: 1px 3px;
+}
+
+/* Empty notices in tab panels */
+
+.network-monitor .empty-notice {
+ color: var(--theme-text-color-inactive);
+ padding: 3px 8px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ font-size: 24px;
+}
+
+/* Accordions in the tab panels */
+
+.network-monitor .accordion-content .treeIcon {
+ margin-left: 16px;
+}
+
+.network-monitor .accordion {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.network-monitor .accordion-item:last-child {
+ position: relative;
+ height: 100%;
+}
+
+.network-monitor .accordion-item:last-child .accordion-header {
+ position: relative;
+}
+
+.network-monitor .accordion-item:last-child .accordion-content {
+ position: relative;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow: inherit;
+}
+
+
+/* Text inputs in tab panels */
+
+.network-monitor .textbox-input {
+ text-overflow: ellipsis;
+ border: none;
+ background: none;
+ color: inherit;
+ width: 100%;
+}
+
+.network-monitor .textbox-input:focus {
+ outline: 0;
+ box-shadow: var(--theme-focus-box-shadow-textbox);
+}
+
+/* Tree table in tab panels */
+
+.network-monitor .tree-container, .tree-container .treeTable {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ overflow: auto;
+ flex: 1;
+}
+
+.network-monitor .tree-container .treeTable,
+.network-monitor .tree-container .treeTable tbody {
+ display: flex;
+ flex-direction: column;
+}
+
+.network-monitor .tree-container .treeTable tbody {
+ height: 100%;
+}
+
+.network-monitor .tree-container .treeTable tr {
+ display: block;
+ position: relative;
+}
+
+/* Make right td fill available horizontal space */
+.network-monitor .tree-container .treeTable td:last-child {
+ width: 100%;
+}
+
+.network-monitor .tree-container .treeTable .tree-section,
+.network-monitor .properties-view .raw-headers-container {
+ width: 100%;
+ background-color: var(--theme-toolbar-background);
+}
+
+.network-monitor .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
+ border-top: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .tree-container .treeTable .tree-section > * {
+ vertical-align: middle;
+}
+
+.network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
+.network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover,
+.network-monitor .tree-container .treeTable .treeRow.tree-section > .treeValueCell:not(:hover) * {
+ color: var(--theme-toolbar-color);
+}
+
+/* Force the twisty icon to gray even if the treeRow has the selected class */
+.network-monitor .tree-container .treeTable .treeRow.tree-section .theme-twisty {
+ fill: var(--theme-icon-dimmed-color);
+}
+
+/* Make the twisties rotate to the right in code-only sections on RTL. */
+.network-monitor .tab-panel.panel-with-code tr:not(.tree-section).hasChildren .theme-twisty:not(.open):dir(rtl) {
+ transform: rotate(-90deg);
+}
+
+.network-monitor .tree-container .treeTable .treeValueCell {
+ /* FIXME: Make value cell can be reduced to shorter width */
+ max-width: 0;
+ padding-inline-end: 5px;
+}
+
+.network-monitor .tree-container .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
+ text-decoration: none;
+}
+
+.network-monitor .tab-panel.panel-with-code .tree-container .treeTable tr:not(.tree-section):dir(rtl) {
+ direction: ltr;
+ text-align: left;
+}
+
+/* Source editor in tab panels */
+
+/* If there is a source editor shows up in the last row of TreeView,
+ * it should occupy the available vertical space.
+ */
+.network-monitor .editor-row-container,
+.network-monitor .tree-container .treeTable tr:last-child td[colspan="2"] {
+ display: block;
+ height: 100%;
+ flex: 1;
+ overflow-x: auto;
+}
+
+.network-monitor .responseTextContainer {
+ overflow-x: auto;
+ width: 100%;
+ height: 100%;
+ padding-left: 5px;
+}
+
+/* If there is a source editor shows up in the last row of TreeView,
+ * its height should not collapse into zero
+ */
+.network-monitor .tree-container .treeTable tr:last-child.editor-row-container {
+ overflow: visible;
+}
+
+.network-monitor .source-editor-mount {
+ width: 100%;
+ height: 100%;
+}
+
+.network-monitor .headers-summary-label,
+.network-monitor .tree-container .objectBox {
+ white-space: nowrap;
+}
+
+/* Params and Response error messages */
+
+.network-monitor .request-error-header,
+.network-monitor .response-error-header {
+ margin: 0;
+ padding: 4px 8px;
+ border-bottom: 1px solid var(--theme-splitter-color);
+ background-color: var(--red-60);
+ color: white;
+ line-height: 16px;
+}
+
+.theme-dark .network-monitor .request-error-header,
+.theme-dark .network-monitor .response-error-header {
+ background-color: var(--red-70);
+}
+
+/* Response tabpanel */
+
+.network-monitor .response-image-box {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ overflow-y: auto;
+ padding: 10px;
+}
+
+.network-monitor .response-image {
+ background: #fff;
+ border: 1px dashed GrayText;
+ margin-bottom: 10px;
+ max-width: 300px;
+ max-height: 100px;
+}
+
+.network-monitor #response-panel .response-font-box {
+ overflow-y: auto;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.network-monitor .response-font {
+ margin-bottom: 10px;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.network-monitor .tree-container .treeTable tr.response-preview-container {
+ flex: 1;
+ min-height: 0;
+}
+
+.network-monitor .tree-container .treeTable tr.response-preview-container td {
+ display: block;
+ height: 100%;
+}
+
+.network-monitor .html-preview {
+ height: 100%;
+}
+
+.network-monitor .html-preview iframe {
+ background-color: #fff;
+ border: none;
+ height: 100%;
+ width: 100%;
+}
+
+/* The editor container should only become a flex item when inside a container
+ * with other flex items. In this case, the HTML preview is a flex item and we
+ * can grow the editor. Otherwise, there may be overflow and
+ * .editor-row-container will become 0px tall. */
+.network-monitor .contains-html-preview .editor-row-container {
+ flex: 1;
+ min-height: 0;
+}
+
+/* Request and response data */
+
+.network-monitor #response-panel .panel-container {
+ overflow-y: hidden;
+}
+
+.network-monitor .data-header {
+ background: var(--theme-toolbar-background);
+ border-bottom: 1px solid var(--theme-splitter-color);
+ color: var(--theme-toolbar-color);
+ font-size: inherit;
+ font-weight: normal;
+ line-height: 16px;
+ margin: 0;
+ padding: 2px 4px;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ user-select: none;
+}
+
+.network-monitor .data-label {
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: inherit;
+ line-height: 20px;
+ color: var(--theme-toolbar-color);
+}
+
+.network-monitor .raw-data-toggle {
+ flex: none;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ max-width: 50%;
+ margin-inline-start: auto;
+ padding-inline-start: 4px;
+}
+
+.network-monitor .raw-data-toggle-label {
+ white-space: nowrap;
+ color: var(--theme-toolbar-color);
+}
+
+.network-monitor .raw-data-toggle-input > input {
+ display: inline-block;
+ width: 2em;
+ vertical-align: bottom;
+ font-size: 12px;
+}
+
+.network-monitor #response-panel .notificationbox .notification[data-key="CORS-error"].notification[data-type="info"] {
+ background-color: var(--theme-body-alternate-emphasized-background);
+}
+
+.network-monitor #response-panel .notification[data-key="CORS-error"] .notificationInner .messageText {
+ white-space: normal;
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+/* Timings tabpanel */
+
+.network-monitor .timings-container {
+ display: flex;
+}
+
+.network-monitor .timings-overview {
+ display: flex;
+ border-bottom: 1px solid var(--theme-splitter-color);
+ padding: 4px;
+}
+
+.network-monitor .timings-overview-item {
+ display: inline-flex;
+}
+
+.network-monitor .timings-overview-item:not(:first-of-type)::before {
+ content: "";
+ display: inline-flex;
+ margin-inline: 10px;
+ width: 1px;
+ background: var(--theme-splitter-color);
+}
+
+.network-monitor .timings-label {
+ width: 10em;
+}
+
+.network-monitor .requests-list-timings-container {
+ display: flex;
+ flex: 1;
+ align-items: center;
+}
+
+.network-monitor .requests-list-timings-offset {
+ transition: width 0.2s ease-out;
+}
+
+.network-monitor .requests-list-timings-box {
+ border: none;
+ min-width: 1px;
+ transition: width 0.2s ease-out;
+}
+
+.network-monitor .label-separator {
+ margin-block: 5px;
+ margin-inline-start: 4px;
+ font-weight: 600;
+ color: var(--theme-comment);
+}
+
+.theme-light .network-monitor .requests-list-timings-box {
+ --timing-server-color-1: rgba(104, 195, 179, 0.8); /* teal */
+ --timing-server-color-2: rgba(123, 102, 167, 0.8); /* purple */
+ --timing-server-color-3: rgba(233, 236, 130, 0.8); /* yellow */
+ --timing-server-color-total: rgba(186, 90, 140, 0.8); /* pink */
+}
+
+.theme-dark .network-monitor .requests-list-timings-box {
+ --timing-server-color-1: rgba(74, 228, 201, 0.8); /* teal */
+ --timing-server-color-2: rgba(156, 119, 233, 0.8); /* purple */
+ --timing-server-color-3: rgba(234, 239, 73, 0.8); /* yellow */
+ --timing-server-color-total: rgba(186, 74, 133, 0.8); /* pink */
+}
+
+.network-monitor .server-timings-color-1 {
+ background: var(--timing-server-color-1);
+}
+
+.network-monitor .server-timings-color-2 {
+ background: var(--timing-server-color-2);
+}
+
+.network-monitor .server-timings-color-3 {
+ background: var(--timing-server-color-3);
+}
+
+.network-monitor .server-timings-color-total {
+ background: var(--timing-server-color-total);
+}
+
+
+/* Stack trace panel */
+
+.network-monitor .stack-trace {
+ font-family: var(--monospace-font-family);
+ /* The markup contains extra whitespace to improve formatting of clipboard text.
+ Make sure this whitespace doesn't affect the HTML rendering */
+ white-space: normal;
+ padding: 5px;
+ direction: ltr;
+}
+
+.network-monitor .stack-trace .frame-link-source {
+ /* Makes the file name truncated (and ellipsis shown) on the left side */
+ direction: rtl;
+ unicode-bidi: embed;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: end;
+}
+
+.network-monitor .stack-trace .frame-link-function-display-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-inline-end: 1ch;
+}
+
+/* Security tabpanel */
+
+/* Overwrite tree-view cell colon `:` for security panel and tree section */
+.network-monitor .security-panel .treeTable .treeLabelCell::after,
+.network-monitor .treeTable .tree-section .treeLabelCell::after {
+ content: "";
+}
+
+/* Layout additional warning icon in tree value cell */
+.network-monitor .security-info-value {
+ display: flex;
+}
+
+.network-monitor .security-warning-icon {
+ width: 12px;
+ height: 12px;
+ vertical-align: -1px;
+ margin-inline-start: 5px;
+ background-image: url(chrome://devtools/skin/images/alert-small.svg);
+ background-size: cover;
+ -moz-context-properties: fill;
+ fill: var(--yellow-60);
+}
+
+/* Custom request panel */
+
+.network-monitor .custom-request-panel, .http-custom-request-panel {
+ height: 100%;
+ background-color: var(--theme-sidebar-background);
+}
+
+.theme-dark .network-monitor .custom-request-panel, .http-custom-request-panel {
+ color: var(--theme-selection-color);
+}
+
+.network-monitor .custom-request-label {
+ font-weight: 600;
+}
+
+.network-monitor .custom-request-panel, .http-custom-request-panel textarea {
+ resize: none;
+ font: message-box;
+ font-size: var(--theme-body-font-size);
+}
+
+.network-monitor .custom-header,
+.network-monitor .custom-method-and-url,
+.network-monitor .custom-request,
+.network-monitor .custom-section,
+.network-monitor .http-custom-header,
+.network-monitor .http-custom-method-and-url,
+.network-monitor .http-custom-request,
+.network-monitor .http-custom-section {
+ display: flex;
+}
+
+.network-monitor .custom-header,
+.network-monitor .http-custom-header {
+ flex-grow: 1;
+ font-size: 1.1em;
+ padding-top: 4px;
+}
+
+.network-monitor .custom-section {
+ flex-direction: column;
+ margin-top: 0.5em;
+}
+
+.network-monitor .http-custom-section {
+ flex-direction: column;
+}
+
+.network-monitor .custom-method-value {
+ width: 4.5em;
+}
+
+.network-monitor .http-custom-method-value{
+ width: 6.0em;
+}
+
+.network-monitor .custom-url-value,
+.network-monitor .http-custom-url-value {
+ flex-grow: 1;
+ margin-inline-start: 6px;
+}
+
+.network-monitor #response-panel .notification[data-key="xssi-string-removed-info-box"] {
+ background-color: var(--theme-body-alternate-emphasized-background);
+}
+
+.network-monitor #response-panel .notification[data-key="xssi-string-removed-info-box"] .notificationInner .messageText {
+ white-space: normal;
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+#timings-panel .learn-more-link {
+ width: -moz-max-content;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
new file mode 100644
index 0000000000..3675dd5f22
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
@@ -0,0 +1,184 @@
+/* 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/. */
+
+.request-blocking-panel {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+/* Override the devtools-checkbox style to improve hit area and alignment */
+.request-blocking-panel .devtools-checkbox-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ margin: 0;
+ padding: 2px 4px;
+ /* checkbox can be 13px, 14px or 16px depending on the platform */
+ line-height: 16px;
+ user-select: none;
+ cursor: default;
+}
+
+.request-blocking-panel .devtools-checkbox-label > input {
+ flex: none;
+ margin: 0;
+}
+
+.request-blocking-label {
+ flex: 1 1 auto;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.request-blocking-editable-label {
+ cursor: text
+}
+
+/* The "Enable Blocking Requests" bar */
+.request-blocking-enable-bar {
+ flex: none;
+ background: var(--theme-tab-toolbar-background);
+ height: calc(var(--theme-toolbar-height) + 1px);
+ padding-block: 2px;
+ padding-inline: 16px 4px;
+ align-items: center;
+ overflow: hidden;
+ white-space: nowrap;
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.request-blocking-enable-form {
+ flex-grow: 1;
+}
+
+.request-blocking-contents {
+ flex: 0 1 auto;
+ overflow-y: auto;
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+/* Blocked request list */
+.request-blocking-list {
+ margin: 0;
+ padding: 4px 0;
+}
+
+.request-blocking-list.disabled {
+ background-color: var(--theme-toolbar-hover);
+ opacity: 0.6;
+}
+
+.request-blocking-list li {
+ display: flex;
+ align-items: center;
+ min-height: 20px;
+ padding-inline: 16px 8px;
+}
+
+.request-blocking-list li.request-blocking-edit-item {
+ padding: 0;
+ /* Text input is 24px but we want it to occupy the same space as our 20px rows */
+ margin-block: -2px;
+}
+
+.request-blocking-list li.request-blocking-edit-item form {
+ width: 100%;
+}
+
+.request-blocking-list .devtools-checkbox-label {
+ flex: 1 1 auto;
+ /* Can't seem to make the flex-shrink reduce the element's width when the
+ content is a long URL, even if the URL container has text-overflow: ellipsis.
+ DevTools shows that "the item was clamped to its minimum size" and the shrink
+ part is thus ignored. So we're reserving 20px for the delete button. */
+ max-width: calc(100% - 20px);
+}
+
+.request-blocking-remove-button {
+ /* Visually hide but stay focusable in keyboard navigation */
+ opacity: 0;
+ flex: none;
+ width: 20px;
+ height: 20px;
+ margin: 0;
+ padding: 2px;
+ border: none;
+ outline: none;
+ background-color: transparent;
+}
+
+.request-blocking-remove-button::-moz-focus-inner {
+ border: none;
+}
+
+.request-blocking-list li:hover .request-blocking-remove-button {
+ opacity: 1;
+}
+
+.request-blocking-remove-button::before {
+ content: "";
+ display: block;
+ width: 16px;
+ height: 16px;
+ border-radius: 2px;
+ background: url("chrome://devtools/skin/images/close.svg") no-repeat center;
+ background-size: 12px;
+ -moz-context-properties: fill;
+ fill: var(--theme-icon-color);
+}
+
+.request-blocking-remove-button:hover::before {
+ fill: var(--theme-selection-color);
+ background-color: var(--theme-selection-background);
+}
+
+/* Footer content, progressively pushed by pattern rows in the main list and
+ * remaining "fixed" at the bottom when there is enough content to scroll,
+ * thanks to the magic of flexbox */
+.request-blocking-footer {
+ position: relative;
+ flex: none;
+}
+
+/* Draw a border 1px below the form, so that it disappears out of view when
+ * there are many pattern rows in the main container and the footer is pushed
+ * to the bottom */
+.request-blocking-footer::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 100%;
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+/* Text input for the addition and edition forms */
+.request-blocking-add-form input,
+.request-blocking-edit-item input {
+ width: calc(100% - 1px);
+ height: 24px;
+ padding-block: 4px;
+ padding-inline: 20px 8px;
+ background: none;
+}
+
+.request-blocking-list-empty-notice {
+ margin: 0;
+ flex: 1;
+ overflow-x: hidden;
+}
+
+.request-blocking-notice-element {
+ padding-top: 12px;
+ padding-inline: 12px;
+}
+
+.request-blocking-notice-element::before {
+ content:"• ";
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestList.css b/devtools/client/netmonitor/src/assets/styles/RequestList.css
new file mode 100644
index 0000000000..3d1b77fdef
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -0,0 +1,653 @@
+/* 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/. */
+
+/* Request list empty panel */
+
+.request-list-empty-notice {
+ margin: 0;
+ flex: 1;
+ overflow-x: hidden;
+}
+
+.empty-notice-element {
+ padding-top: 12px;
+ padding-inline: 12px;
+ font-size: 1.2rem;
+}
+
+.notice-perf-message {
+ margin-top: 2px;
+ align-items: center;
+}
+
+.requests-list-perf-notice-button {
+ min-width: 30px;
+ min-height: 26px;
+ margin: 0 5px;
+ vertical-align: middle;
+}
+
+.requests-list-perf-notice-button::before {
+ background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg);
+}
+
+.requests-list-slow-button {
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ right: 0;
+ transform: translateY(-50%);
+ top: 50%;
+ cursor: pointer;
+ background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%);
+ padding-inline-end: 30px;
+ padding-inline-start: 5px;
+}
+
+.request-list-item:not(.selected).odd .requests-list-slow-button {
+ background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%);
+}
+
+.request-list-item:not(.selected):hover .requests-list-slow-button,
+.request-list-item:not(.selected).odd:hover .requests-list-slow-button {
+ background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%);
+}
+
+.request-list-item.selected .requests-list-slow-button {
+ background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%);
+}
+
+.requests-list-slow-button::before {
+ content: "";
+ width: 12px;
+ height: 16px;
+ display: inline-block;
+ background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg);
+ background-repeat: no-repeat;
+ background-position-x: right;
+ padding-inline-end: 14px;
+ fill: var(--grey-40);
+ -moz-context-properties: fill;
+}
+
+.request-list-item.selected .requests-list-slow-button::before {
+ fill: currentColor;
+}
+
+.requests-list-reload-notice-button {
+ font-size: inherit;
+ min-height: 26px;
+ margin: 0 5px;
+}
+
+/* Requests list table */
+
+.request-list-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ color: var(--theme-body-color);
+}
+
+.requests-list-scroll {
+ overflow-x: hidden;
+ overflow-y: auto;
+ width: 100% !important;
+}
+
+.requests-list-scroll table {
+ /* Disable overflow-anchor for only child in the scrollable element */
+ overflow-anchor: none;
+}
+
+.requests-list-anchor {
+ overflow-anchor: auto;
+ opacity: 0;
+ height: 1px;
+}
+
+.requests-list-table,
+.message-list-table {
+ /* Reset default browser style of <table> */
+ border-spacing: 0;
+ width: 100%;
+ /* The layout must be fixed for resizing of columns to work.
+ The layout is based on the first row.
+ Set the width of those cells, and the rest of the table follows. */
+ table-layout: fixed;
+}
+
+.requests-list-table {
+ /* Clip column resizers when they are higher than the table. */
+ overflow: hidden;
+}
+
+.requests-list-column,
+.message-list-column {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ /* Reset default browser style of <td> */
+ padding: 0;
+ /* Prevent text selection because it's often invisible (blue on blue),
+ * it conflicts easily with existing click and double-click actions,
+ * and we already have several Copy and Export options. */
+ user-select: none;
+}
+
+.requests-list-column {
+ position: relative;
+}
+
+.requests-list-column > * {
+ display: inline-block;
+}
+
+/* Requests list headers */
+
+.requests-list-headers-group,
+.message-list-headers-group {
+ position: sticky;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1;
+}
+
+.requests-list-headers,
+.message-list-headers {
+ padding: 0;
+ color: var(--theme-body-color);
+ background-color: var(--theme-toolbar-background);
+}
+
+.requests-list-headers th,
+.message-list-headers th {
+ height: calc(var(--theme-toolbar-height) + 1px);
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.requests-list-headers th {
+ /* Allow column-resizers to be visible beyond the headers. */
+ overflow: visible;
+}
+
+.requests-list-headers th:not(:first-child),
+.message-list-headers th:not(:first-child) {
+ border-inline-start: 1px solid var(--theme-splitter-color);
+}
+
+.requests-list-header-button,
+.message-list-header-button {
+ width: 100%;
+ min-height: var(--theme-toolbar-height);
+ border-width: 0;
+ padding-block: 1px;
+ padding-inline-start: 5px;
+ padding-inline-end: 4px;
+ text-align: start;
+ color: inherit;
+ background-color: transparent;
+}
+
+.requests-list-header-button::-moz-focus-inner,
+.message-list-header-button::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+.requests-list-header-button:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.requests-list-header-button > .button-text,
+.message-list-header-button > .button-text {
+ display: inline-block;
+ vertical-align: middle;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.requests-list-header-button > .button-icon,
+.message-list-header-button > .button-icon {
+ /* display icon only when column sorted otherwise display:none */
+ display: none;
+ width: 7px;
+ height: 4px;
+ margin-inline: 3px 6px;
+ vertical-align: middle;
+}
+
+.requests-list-header-button[data-sorted] > .button-icon {
+ /* display icon only when column sorted */
+ display: inline-block;
+}
+
+.requests-list-header-button[data-sorted] > .button-text {
+ /* when sorted - adjust width to fit the icon inside the button */
+ width: calc(100% - 11px);
+}
+
+.requests-list-header-button[data-sorted=ascending] > .button-icon {
+ background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
+}
+
+.requests-list-header-button[data-sorted=descending] > .button-icon {
+ background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
+}
+
+.requests-list-header-button[data-sorted],
+.requests-list-header-button[data-sorted]:hover {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
+}
+
+.requests-list-header-button[data-sorted],
+.requests-list-column[data-active] + .requests-list-column .requests-list-header-button {
+ border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+}
+
+/* Requests list headers column-resizer */
+
+.requests-list-headers .column-resizer {
+ z-index: 1000;
+ cursor: ew-resize;
+ margin-inline-start: -3px;
+ width: 7px;
+ min-height: 23px;
+ position: absolute;
+ background-color: transparent;
+ /* Extend column-resizers beyond table header to allow resizing on
+ * column borders as well.*/
+ height: 100vh;
+}
+
+/**
+ * Make sure headers are not processing any mouse
+ * events. This is good for performance during dragging.
+ */
+.requests-list-headers.dragging {
+ pointer-events: none;
+}
+
+/* Requests list column */
+
+/* Status column */
+
+.requests-list-status {
+ /* Don't ellipsize status codes */
+ text-overflow: initial;
+}
+
+.requests-list-status-code.status-code-blocked {
+ /* Improve the icon's vertical alignment by matching the row height. */
+ display: inline-flex;
+ vertical-align: top;
+ align-items: center;
+ justify-content: center;
+ height: 24px;
+}
+
+.requests-security-icon-group {
+ display: inline-flex;
+ vertical-align: top;
+ align-items: center;
+ height: 24px;
+ /* Icons are drawn as backgrounds on a 16x16 element but are often smaller
+ * (e.g. 12x12). Shift them a few pixels to align with the header text. */
+ margin-inline-start: -3px;
+ margin-inline-end: 2px;
+}
+
+.requests-security-state-icon {
+ display: inline-block;
+ height: 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ -moz-context-properties: fill, stroke;
+ fill: var(--theme-icon-dimmed-color);
+ stroke: var(--theme-icon-color);
+}
+
+.security-state-secure {
+ background-image: url(chrome://devtools/skin/images/security-state-secure.svg);
+ width: 16px;
+}
+
+.security-state-weak {
+ /* Shift icon to the right (in both LTR and RTL directions) to align the
+ * padlock shape with other padlock icons. */
+ position: relative;
+ width: 16px;
+ left: 2px;
+ background-image: url(chrome://devtools/skin/images/security-state-weak.svg);
+ stroke: var(--theme-icon-warning-color);
+}
+
+.security-state-insecure {
+ background-image: url(chrome://devtools/skin/images/security-state-insecure.svg);
+ width: 16px;
+ stroke: var(--theme-icon-error-color);
+}
+
+.security-state-broken {
+ background-image: url(chrome://devtools/skin/images/error-small.svg);
+ width: 16px;
+ fill: var(--theme-icon-error-color);
+}
+
+.tracking-resource {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
+ background-repeat: no-repeat;
+ -moz-context-properties: fill;
+ fill: var(--theme-icon-dimmed-color);
+}
+
+.request-list-item.selected .status-code-blocked,
+.request-list-item.selected .requests-security-state-icon,
+.request-list-item.selected .tracking-resource {
+ fill: currentColor;
+ stroke: currentColor;
+ color: var(--theme-selection-color);
+}
+
+.theme-dark .request-list-item.selected .status-code-blocked,
+.theme-dark .request-list-item.selected .requests-security-state-icon,
+.theme-dark .request-list-item.selected .tracking-resource {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+.request-list-item .requests-list-column,
+.message-list-item .message-list-column {
+ padding-inline-start: 5px;
+ /* Column text should not touch the next column's border.
+ We could use a 5px space to be symmetrical, but we're using
+ text-overflow:ellipsis which makes that padding look wider in most cases,
+ and a smaller padding saves space for content. */
+ padding-inline-end: 4px;
+}
+
+.request-list-item .requests-list-column:not(:first-child),
+.message-list-item .message-list-column:not(:first-child) {
+ border-inline-start: 1px solid var(--table-splitter-color);
+}
+
+.request-list-item:hover .requests-list-column,
+.request-list-item.selected .requests-list-column,
+.message-list-item:hover .message-list-column,
+.message-list-item.selected .message-list-column {
+ border-inline-start-color: transparent;
+}
+
+.request-list-item .requests-list-waterfall {
+ padding-inline-start: 0;
+}
+
+.requests-list-cause-stack {
+ display: inline-block;
+ background-color: var(--theme-text-color-alt);
+ color: var(--theme-body-background);
+ font-size: 8px;
+ font-weight: bold;
+ line-height: 10px;
+ border-radius: 3px;
+ padding: 0 2px;
+ margin: 0;
+ margin-inline-end: 3px;
+}
+
+/* Waterfall column */
+
+.requests-list-waterfall {
+ background-repeat: repeat-y;
+ background-position: left center;
+ overflow: visible;
+ /* Background created on a <canvas> in js. */
+ /* @see devtools/client/netmonitor/src/widgets/WaterfallBackground.js */
+ background-image: -moz-element(#waterfall-background);
+}
+
+.requests-list-waterfall:dir(rtl) {
+ background-position: right center;
+}
+
+.requests-list-waterfall > .requests-list-header-button {
+ padding: 0;
+}
+
+.requests-list-waterfall > .requests-list-header-button > .button-text {
+ width: auto;
+}
+
+.requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) {
+ padding-inline-start: 16px;
+}
+
+.requests-list-timings-division {
+ display: inline-block;
+ padding-inline-start: 4px;
+ font-size: 75%;
+ pointer-events: none;
+ text-align: start;
+}
+
+:root[platform="win"] .requests-list-timings-division {
+ padding-top: 1px;
+ font-size: 90%;
+}
+
+.requests-list-timings-division:not(:first-child) {
+ border-inline-start: 1px dashed;
+}
+
+.requests-list-timings-division:dir(ltr) {
+ transform-origin: left center;
+}
+
+.requests-list-timings-division:dir(rtl) {
+ transform-origin: right center;
+}
+
+.theme-dark .requests-list-timings-division {
+ border-inline-start-color: #5a6169 !important;
+}
+
+.theme-light .requests-list-timings-division {
+ border-inline-start-color: #585959 !important;
+}
+
+.requests-list-timings-division[data-division-scale=second],
+.requests-list-timings-division[data-division-scale=minute] {
+ font-weight: 600;
+}
+
+.requests-list-timings {
+ display: flex;
+ align-items: center;
+}
+
+.requests-list-timings:dir(ltr) {
+ transform-origin: left center;
+}
+
+.requests-list-timings:dir(rtl) {
+ transform-origin: right center;
+}
+
+.requests-list-timings-box {
+ display: inline-block;
+ height: 12px;
+}
+
+.requests-list-timings-box.filler {
+ background-color: var(--theme-splitter-color);
+}
+
+.requests-list-timings-box.blocked {
+ background-color: var(--timing-blocked-color);
+}
+
+.requests-list-timings-box.dns {
+ background-color: var(--timing-dns-color);
+}
+
+.requests-list-timings-box.connect {
+ background-color: var(--timing-connect-color);
+}
+
+.requests-list-timings-box.ssl {
+ background-color: var(--timing-ssl-color);
+}
+
+.requests-list-timings-box.send {
+ background-color: var(--timing-send-color);
+}
+
+.requests-list-timings-box.wait {
+ background-color: var(--timing-wait-color);
+}
+
+.requests-list-timings-box.receive {
+ background-color: var(--timing-receive-color);
+}
+
+.requests-list-timings-total {
+ display: inline-block;
+ padding-inline-start: 4px;
+ font-size: 80%;
+ font-weight: 600;
+ white-space: nowrap;
+ text-align: left;
+}
+
+.requests-list-timings-total:dir(ltr) {
+ transform-origin: left center;
+}
+
+.requests-list-timings-total:dir(rtl) {
+ transform-origin: right center;
+}
+
+/* Request list item */
+
+.request-list-item,
+.message-list-item {
+ height: 24px;
+ line-height: 24px;
+}
+
+.request-list-item:not(.selected).odd,
+.message-list-item:not(.selected).odd {
+ background-color: var(--table-zebra-background);
+}
+
+.request-list-item:not(.selected):hover,
+.message-list-item:not(.selected):hover {
+ background-color: var(--table-selection-background-hover);
+}
+
+/*
+ * Dim requests served from cache
+ */
+.request-list-item:not(.selected, :hover).fromCache {
+ --table-icon-opacity: 0.7;
+ color: var(--theme-text-color-alt);
+}
+
+/*
+ * Apply partial opacity to specific icons and icon-like elements
+ * (e.g. for cached requests)
+ */
+.requests-security-icon-group,
+.requests-list-status-code:not([data-code^="3"]) {
+ opacity: var(--table-icon-opacity, 1);
+}
+
+/*
+ * Showing blocked requests in red should always have priority
+ * except when the request is selected.
+ */
+.request-list-item:not(.selected).blocked {
+ color: var(--timing-blocked-color) !important;
+}
+
+/*
+ * Put after .request-list-item.blocked to avoid specificity conflict.
+ * Bug 1530914 - Highlighted Security Value is difficult to read.
+ */
+.request-list-item.selected,
+.message-list-item.selected {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
+ /* Rows have tabindex=0 and get a default outline when clicked, but we already
+ * have a visible selection style so hiding the outline should be okay. */
+ outline: none;
+}
+
+.theme-light {
+ --network-initiator-line-color: var(--theme-highlight-blue);
+ --network-initiator-color: var(--theme-highlight-purple);
+}
+
+.theme-dark {
+ --network-initiator-line-color: hsl(210, 40%, 60%);
+ --network-initiator-color: var(--blue-40);
+}
+
+.requests-list-initiator .requests-list-initiator-lastframe {
+ text-decoration: underline;
+ text-decoration-skip-ink: none;
+}
+
+.requests-list-initiator-lastframe {
+ display: unset;
+}
+
+.request-list-item .requests-list-initiator-filename,
+.request-list-item .requests-list-initiator-line {
+ cursor: pointer;
+ text-decoration: inherit;
+}
+
+.request-list-item:not(.selected) .requests-list-initiator-filename {
+ color: var(--network-initiator-color);
+}
+
+.request-list-item:not(selected) .requests-list-initiator-line {
+ color: var(--network-initiator-line-color);
+}
+
+.request-list-item.selected .requests-list-initiator-filename,
+.request-list-item.selected .requests-list-initiator-line {
+ color: inherit;
+}
+
+.request-list-item .requests-list-initiator-cause {
+ display: unset;
+ white-space: pre;
+}
+
+/* Responsive web design support */
+
+@media (max-width: 700px) {
+ .requests-list-status-code {
+ width: auto;
+ }
+
+ .requests-list-size {
+ /* Given a fix max-width to display all columns in RWD mode */
+ max-width: 7%;
+ }
+
+ .requests-list-waterfall {
+ display: none;
+ }
+}
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);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatusBar.css b/devtools/client/netmonitor/src/assets/styles/StatusBar.css
new file mode 100644
index 0000000000..ff53a0d866
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatusBar.css
@@ -0,0 +1,62 @@
+/* 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/. */
+
+/* Status bar */
+
+.devtools-status-bar-label {
+ flex: 0;
+}
+
+.status-bar-label {
+ display: inline-flex;
+ margin-inline-end: 10px;
+ /* Status bar has just one line so, don't wrap labels */
+ white-space: nowrap;
+ font-variant-numeric: tabular-nums;
+}
+
+.status-bar-label:not(:first-of-type)::before {
+ content: "";
+ display: inline-block;
+ margin-inline-end: 10px;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ width: 1px;
+ background: var(--theme-splitter-color);
+}
+
+.status-bar-label.dom-content-loaded {
+ color: var(--theme-highlight-blue);
+}
+
+.status-bar-label.load {
+ color: var(--theme-highlight-red);
+}
+
+.requests-list-network-summary-button {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ height: 20px;
+ background: none;
+ box-shadow: none;
+ border-color: transparent;
+ padding-inline-end: 0;
+ margin-top: 3px;
+ margin-bottom: 3px;
+ margin-inline-end: 1em;
+}
+
+.requests-list-network-summary-button > .summary-info-icon {
+ background: url(chrome://devtools/skin/images/profiler-stopwatch.svg) no-repeat;
+ -moz-context-properties: fill;
+ fill: var(--theme-toolbar-color);
+ width: 16px;
+ height: 16px;
+ opacity: 0.8;
+}
+
+.requests-list-network-summary-button:hover > .summary-info-icon {
+ opacity: 1;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatusCode.css b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
new file mode 100644
index 0000000000..5b69d6f72b
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
@@ -0,0 +1,100 @@
+/* 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/. */
+
+.status-code {
+ /* non-standard codes may be shorter than 3 characters but should match
+ width of standard codes */
+ min-width: calc(3ch + 4px);
+ padding: 0 2px;
+ border-radius: 3px;
+ text-align: center;
+ font-family: var(--monospace-font-family);
+ /* prevent status code from having full line height width from .request-list-item */
+ line-height: normal;
+}
+
+.status-code[data-code^="1"] {
+ background-color: var(--status-code-color-1xx);
+}
+
+.status-code[data-code^="2"] {
+ background-color: var(--status-code-color-2xx);
+}
+
+.status-code[data-code^="3"] {
+ background-color: var(--status-code-color-3xx);
+}
+
+.status-code[data-code^="4"] {
+ background-color: var(--status-code-color-4xx);
+}
+
+.status-code[data-code^="5"] {
+ background-color: var(--status-code-color-5xx);
+}
+
+/* Non-standard status codes are styled like 5XX */
+.status-code[data-code^="0"],
+.status-code[data-code^="6"],
+.status-code[data-code^="7"],
+.status-code[data-code^="8"],
+.status-code[data-code^="9"] {
+ background-color: var(--status-code-color-5xx);
+}
+
+.status-code:not([data-code^="3"], .status-code-blocked) {
+ color: var(--theme-body-background);
+}
+
+.status-code-blocked {
+ color: var(--theme-icon-error-color);
+}
+
+.status-code-blocked-icon {
+ height: 12px;
+ width: 12px;
+ background-image: url("chrome://devtools/skin/images/blocked.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+
+/* Status codes for the headers side panel */
+
+.headers-overview .summary .status .status-code {
+ display: inline;
+ background-color: transparent;
+ color: inherit;
+ padding: 0 2px 0 0;
+ font-weight: bold;
+}
+
+.headers-overview .summary .status[data-code^="1"] {
+ color: var(--status-code-color-1xx);
+}
+
+.headers-overview .summary .status[data-code^="2"] {
+ color: var(--status-code-color-2xx);
+}
+
+.headers-overview .summary .status[data-code^="3"] {
+ color: inherit;
+}
+
+.headers-overview .summary .status[data-code^="4"] {
+ color: var(--status-code-color-4xx);
+}
+
+.headers-overview .summary .status[data-code^="5"] {
+ color: var(--status-code-color-5xx);
+}
+
+/* Non-standard status codes are styled like 5XX */
+.headers-overview .summary .status[data-code^="0"],
+.headers-overview .summary .status[data-code^="6"],
+.headers-overview .summary .status[data-code^="7"],
+.headers-overview .summary .status[data-code^="8"],
+.headers-overview .summary .status[data-code^="9"] {
+ color: var(--status-code-color-5xx);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/Toolbar.css b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
new file mode 100644
index 0000000000..ed37aa4046
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -0,0 +1,102 @@
+/* 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/. */
+
+/* Toolbar */
+
+.devtools-toolbar {
+ display: flex;
+ align-items: center;
+}
+
+#netmonitor-toolbar-container > .devtools-toolbar {
+ /* @TODO: Remove this in bug 1535956 */
+ min-height: var(--primary-toolbar-height);
+}
+
+.requests-list-filter-buttons {
+ white-space: nowrap;
+ margin: 0 7px;
+}
+
+.devtools-button.devtools-pause-icon::before,
+.devtools-button.devtools-play-icon::before {
+ margin-bottom: 1px;
+}
+
+.devtools-button.devtools-pause-icon::before {
+ background-image: url("chrome://devtools/skin/images/pause.svg");
+}
+
+.devtools-button.devtools-play-icon::before {
+ background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/play.svg");
+}
+
+/* New HTTP Custom Request button */
+.devtools-button.devtools-http-custom-request-icon::before {
+ background-image: url("chrome://devtools/skin/images/add.svg");
+ background-size: 13px;
+}
+
+/* Search button */
+.devtools-button.devtools-search-icon::before {
+ background-image: url("chrome://devtools/skin/images/search.svg");
+ background-size: 13px;
+}
+
+/* Request blocking button */
+.devtools-button.requests-list-blocking-button::before {
+ background-image: url("chrome://devtools/skin/images/blocked.svg");
+}
+
+.devtools-button.netmonitor-settings-menu-button::before {
+ background-image: url("chrome://devtools/skin/images/settings.svg");
+}
+
+.devtools-button.requests-list-blocking-button:empty::before {
+ fill: var(--theme-body-color);
+}
+
+.devtools-button.requests-list-blocking-button.checked:empty::before {
+ fill: var(--theme-icon-checked-color);
+}
+
+.devtools-button.requests-list-blocking-button.requests-list-blocking-button-enabled:empty::before {
+ fill: var(--timing-blocked-color);
+}
+
+/* Throttling Button */
+
+#network-throttling-menu {
+ margin-inline-start: 10px;
+ margin-inline-end: 10px;
+}
+
+.devtools-toolbar .devtools-checkbox {
+ position: relative;
+ vertical-align: middle;
+ bottom: 1px;
+}
+
+#devtools-cache-checkbox {
+ vertical-align: unset;
+ bottom: -1px;
+}
+
+.devtools-toolbar .devtools-checkbox-label {
+ margin-inline-start: 2px;
+ margin-inline-end: 2px;
+ white-space: nowrap;
+}
+
+.devtools-toolbar .devtools-checkbox-label.devtools-cache-checkbox {
+ margin-inline-end: 7px;
+}
+
+/* Hide filter input learn more link if there is not enough
+ horizontal space. */
+@media (max-width: 590px) {
+ .network-monitor .devtools-searchbox .learn-more-link {
+ display: none;
+ }
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/UrlPreview.css b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
new file mode 100644
index 0000000000..9cf41fb7c9
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
@@ -0,0 +1,100 @@
+/* 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/. */
+
+/* Url Preview */
+
+.url-preview {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ padding: 6px 3px;
+}
+
+.url-preview .properties-view,
+.url-preview .tree-container,
+.url-preview .treeTable {
+ overflow: hidden;
+ outline: none;
+}
+
+.url-preview .properties-view {
+ margin-right: 10px;
+}
+
+.url-preview tbody:focus {
+ outline: none;
+}
+.url-preview td.splitter {
+ /* This makes sure that the column spans the width of the
+ side bar so the contained horizontal splitter is visible */
+ width: 100vw !important;
+}
+
+.url-preview .horizontal-splitter {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ margin: 6px 0 6px 16px;
+}
+
+.url-preview .treeValueCell .url {
+ display: inline;
+ white-space: normal;
+}
+
+.url-preview .treeTable .treeRow .treeIcon {
+ margin-inline: 0 1px;
+}
+
+.url-preview .tree-container .treeTable tr {
+ margin-bottom: 3px;
+}
+
+.url-preview .treeTable .treeRow:not(.selected):hover {
+ background-color: transparent !important;
+}
+
+.url-preview .treeTable tr.treeRow:first-child .treeLabelCell::after {
+ content: "";
+}
+.url-preview .treeTable .treeLabelCell {
+ --tree-label-cell-indent: 0 !important;
+}
+/* Indent the array params */
+.url-preview .treeTable .treeRow[aria-level="4"] .treeLabelCell {
+ text-indent: 15px;
+}
+
+.url-preview .treeTable .treeLabel[data-level="1"] {
+ text-transform: capitalize;
+}
+
+/* Collapsed url */
+.url-preview tr.treeRow:first-child .treeLabelCell {
+ font-weight: bold;
+ color: var(--theme-icon-dimmed-color);
+}
+
+.url-preview tr.treeRow .treeLabelCell {
+ float: left;
+ margin-right: -15px;
+ padding: 0 2px 0 0;
+
+}
+.url-preview tr.treeRow .treeValueCell {
+ display: inline;
+ word-break: break-all;
+ max-width: none;
+ box-decoration-break: clone;
+ margin-left: 14px;
+}
+
+.url-preview .treeTable .treeValueCell {
+ color: var(--theme-body-color);
+}
+
+.url-preview .url-scheme,
+.url-preview .url-chars {
+ color: var(--theme-icon-dimmed-color);
+}
+
+.url-preview .url-params-name {
+ color: var(--theme-highlight-blue);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/messages.css b/devtools/client/netmonitor/src/assets/styles/messages.css
new file mode 100644
index 0000000000..b115d7cf34
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/messages.css
@@ -0,0 +1,165 @@
+/* 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/. */
+
+/* Scroll to bottom */
+
+#messages-view .uncontrolled {
+ flex-direction: column;
+}
+
+#messages-view .message-list-scroll-anchor {
+ /* anchor nodes are required to have non-zero area */
+ min-height: 1px;
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+
+/* Empty notice */
+
+#messages-view .message-list-empty-notice {
+ width: 100%;
+}
+
+/* Frame type icon in the Time column */
+
+#messages-view .message-list-type-icon {
+ display: inline-block;
+ /* align bottom of image 4px below the text baseline
+ this tends to give a better result than "middle" */
+ vertical-align: -4px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#messages-view .message-list-type-icon-sent {
+ color: var(--green-70);
+}
+
+#messages-view .theme-dark .message-list-type-icon-sent {
+ color: var(--green-50);
+}
+
+#messages-view .message-list-type-icon-received {
+ color: var(--red-60);
+ transform: scaleY(-1);
+}
+
+#messages-view .theme-dark .message-list-type-icon-received {
+ color: var(--red-40);
+}
+
+#messages-view .message-list-item.selected .message-list-type-icon {
+ color: inherit;
+}
+
+#messages-view .msg-connection-closed-message {
+ text-align: center;
+}
+
+/* Use lining numbers so that seconds and milliseconds align */
+
+#messages-view .message-list-time {
+ font-variant-numeric: tabular-nums;
+}
+
+/* Styles related to the data items in the MessagePayload component */
+
+#messages-view .message-payload {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+#messages-view .message-rawData-payload {
+ display: block;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ white-space: pre;
+ padding: 4px 8px;
+ padding-inline-start: 20px;
+ border: none;
+ font-family: var(--monospace-font-family);
+ font-size: var(--theme-code-font-size);
+ line-height: calc(15/11);
+ direction: ltr;
+ text-align: left;
+ resize: none;
+ color: var(--theme-body-color);
+ background-color: var(--theme-sidebar-background);
+}
+
+/* Styles related to JSONPreview */
+
+#messages-view .treeTable .objectBox {
+ white-space: normal;
+ overflow-wrap: break-word;
+}
+
+/* Styles related to truncated data */
+
+.theme-light #messages-view .truncated-data-message {
+ background: var(--grey-20);
+}
+
+.theme-dark #messages-view .truncated-data-message {
+ background: var(--grey-70);
+}
+
+.truncated-data-message {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ padding: 4px 8px;
+ font-size: 12px;
+}
+
+/* Styles related to truncated messages */
+
+.theme-light #messages-view .truncated-messages-header {
+ background: var(--grey-20);
+}
+
+.theme-dark #messages-view .truncated-messages-header {
+ background: var(--grey-70);
+}
+
+.theme-dark #messages-view .truncated-messages-warning-icon {
+ fill: var(--grey-40);
+}
+
+#messages-view .truncated-messages-cell {
+ padding: 0; /* reset td default padding */
+}
+
+#messages-view .truncated-messages-header {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ padding: 2px 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#messages-view .truncated-messages-container,
+#messages-view .truncated-messages-checkbox-label {
+ display: flex;
+ align-items: center;
+}
+
+#messages-view .truncated-messages-warning-icon {
+ width: 16px;
+ height: 16px;
+ margin-inline-end: 5px;
+ background-image: url(chrome://devtools/skin/images/info.svg);
+ background-repeat: no-repeat;
+ -moz-context-properties: fill;
+ fill: inherit;
+}
+
+#messages-view .truncation-checkbox {
+ margin-inline-end: 5px;
+}
+
+#messages-view .truncated-message {
+ font-variant-numeric: tabular-nums;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/netmonitor.css b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
new file mode 100644
index 0000000000..6b821065ed
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -0,0 +1,84 @@
+/* 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/. */
+
+@import "chrome://devtools/content/shared/components/SidebarToggle.css";
+@import "chrome://devtools/content/shared/components/splitter/SplitBox.css";
+@import "chrome://devtools/content/shared/components/tree/TreeView.css";
+@import "chrome://devtools/content/shared/components/Accordion.css";
+@import "chrome://devtools/content/shared/components/tabs/Tabs.css";
+@import "chrome://devtools/skin/components-frame.css";
+@import "chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css";
+@import "chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css";
+@import "chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css";
+@import "chrome://devtools/content/shared/components/MdnLink.css";
+@import "chrome://devtools/content/shared/components/NotificationBox.css";
+@import "chrome://devtools/content/shared/components/AppErrorBoundary.css";
+
+/* Network panel components & styles */
+@import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/Toolbar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatusBar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkActionBar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/RequestBlockingPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsBar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatisticsPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/CustomRequestPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/messages.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/search.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/UrlPreview.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/HeadersPanel.css";
+
+/* General */
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body,
+#mount,
+.launchpad-root,
+.network-monitor,
+.monitor-panel {
+ flex: initial;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+.split-box {
+ overflow: hidden;
+}
+
+/* Drag and drop HAR files */
+
+.network-monitor > div {
+ height: 100%;
+}
+
+.network-monitor .dropHarFiles {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ text-align: center;
+ inset: 25px;
+ z-index: 100;
+ font-size: 3.5rem;
+ color: gray;
+ border: 4px dashed gray;
+ pointer-events: none;
+}
+
+.network-monitor > div[dragging="true"] .dropHarFiles {
+ display: flex;
+}
+
+.network-monitor > div[dragging="true"] {
+ filter: opacity(50%);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/search.css b/devtools/client/netmonitor/src/assets/styles/search.css
new file mode 100644
index 0000000000..cc80183eb4
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/search.css
@@ -0,0 +1,155 @@
+/* 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/. */
+
+.search-panel {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+}
+
+.search-panel .search-panel-content {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ outline: 0 !important;
+}
+
+.search-panel .treeTable {
+ width: 100%;
+ color: var(--theme-body-color);
+ outline: 0 !important;
+}
+
+/* Custom tree styles for the Search results panel*/
+.search-panel .treeTable .treeLabelCell::after {
+ content: "";
+}
+
+/* Color for resource label */
+.search-panel .resourceCell {
+ color: var(--theme-text-color-inactive);
+}
+
+.search-panel .treeTable tbody {
+ outline: 0 !important;
+}
+
+.search-panel .treeTable .resultLabel {
+ font-weight: bold;
+}
+
+.search-panel .treeTable .treeLabelCell {
+ text-overflow: ellipsis;
+ max-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+/* Icon for close button */
+#devtools-network-search-close::before {
+ background-image: url("chrome://devtools/skin/images/close.svg");
+}
+
+/* Case Sensitive button */
+#devtools-network-search-caseSensitive::before {
+ background-image: url("chrome://devtools/skin/images/case-match.svg");
+}
+
+
+#devtools-network-search-close > button {
+ margin: 0 !important;
+ border-radius: 0 !important;
+ position: relative;
+ min-width: 26px;
+}
+
+button.case-sensitive-btn {
+ padding: 2px;
+ margin: 0 3px;
+ border: none;
+ background: none;
+ width: 20px;
+ height: 20px;
+ border-radius: 2px;
+}
+
+/* Color for query matches */
+.search-panel .resultCell .query-match {
+ background-color: var(--theme-contrast-background);
+ color: var(--theme-contrast-color);
+ border-bottom: 1px solid var(--theme-contrast-border);
+}
+
+.search-modifiers {
+ display: flex;
+ align-items: center;
+}
+
+.search-modifiers * {
+ user-select: none;
+}
+
+.pipe-divider {
+ flex: none;
+ align-self: stretch;
+ width: 1px;
+ vertical-align: middle;
+ margin: 4px;
+ background-color: var(--theme-splitter-color);
+}
+
+.search-type-name {
+ margin: 0 4px;
+ border: none;
+ background: transparent;
+ color: var(--theme-comment);
+}
+
+.search-modifiers button {
+ margin: 0 3px;
+ border: none;
+ background: none;
+ width: 25px;
+ height: 20px;
+ border-radius: 2px;
+}
+
+.search-panel .devtools-toolbar {
+ max-height: 26px;
+}
+
+.search-panel .status-bar-label {
+ min-height: 24px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ overflow: hidden;
+ min-width: 150px;
+}
+
+.search-panel .img.loader {
+ background-image: url(chrome://devtools/content/debugger/images/loader.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ width: 16px;
+ height: 16px;
+ margin-inline-start: 10px;
+ animation: search-loader-rotate 0.5s linear infinite;
+ -moz-context-properties: fill;
+ fill: var(--theme-selection-background);
+ display: inline-block;
+ top: 4px;
+ position: relative;
+}
+
+@keyframes search-loader-rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/variables.css b/devtools/client/netmonitor/src/assets/styles/variables.css
new file mode 100644
index 0000000000..cad71e267c
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -0,0 +1,45 @@
+/* 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/. */
+
+:root {
+ --primary-toolbar-height: 29px;
+ /* HTTP status codes */
+ --status-code-color-1xx: var(--theme-highlight-blue);
+ --status-code-color-2xx: var(--theme-highlight-green);
+ --status-code-color-3xx: transparent;
+ --status-code-color-4xx: var(--theme-highlight-pink);
+ --status-code-color-5xx: var(--theme-highlight-red);
+}
+
+:root.theme-dark {
+ --table-splitter-color: var(--grey-70);
+ --table-zebra-background: rgba(255,255,255,0.05);
+ --table-zebra-inline-icons-background: rgb(49, 47, 47);
+ --table-selection-background-hover: rgba(53, 59, 72, 1);
+ --table-selection-inline-icons-background-hover: rgba(53, 59, 72, 1);
+
+ --timing-blocked-color: var(--red-20);
+ --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+ --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
+ --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+ --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
+ --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
+ --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
+}
+
+:root.theme-light {
+ --table-splitter-color: var(--grey-20);
+ --table-zebra-background: rgba(247, 247, 247, 0.8);
+ --table-zebra-inline-icons-background: rgba(247, 247, 247);
+ --table-selection-background-hover: rgba(209, 232, 255, 0.8);
+ --table-selection-inline-icons-background-hover: rgba(209, 232, 255);
+
+ --timing-blocked-color: var(--red-70);
+ --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+ --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
+ --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+ --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
+ --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
+ --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */
+}