Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

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 */
+}