diff options
Diffstat (limited to 'devtools/client/netmonitor/src/assets')
20 files changed, 3202 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/assets/icons/arrow-up.svg b/devtools/client/netmonitor/src/assets/icons/arrow-up.svg new file mode 100644 index 0000000000..ed45876011 --- /dev/null +++ b/devtools/client/netmonitor/src/assets/icons/arrow-up.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> + <path fill="context-fill" d="M8 2C8.2336 2 8.45387 2.10885 8.59577 2.29441L11.8458 6.54441C12.0784 6.84863 12.0445 7.27924 11.7671 7.54327C11.4897 7.8073 11.0579 7.81991 10.7655 7.57254L9 6V13C9 13.5523 8.55228 14 8 14C7.44772 14 7 13.5523 7 13V6L5.23446 7.57254C4.9421 7.81991 4.51034 7.8073 4.23293 7.54327C3.95553 7.27924 3.9216 6.84863 4.15423 6.54441L7.40423 2.29441C7.54613 2.10885 7.7664 2 8 2Z" /> +</svg> diff --git a/devtools/client/netmonitor/src/assets/icons/play.svg b/devtools/client/netmonitor/src/assets/icons/play.svg new file mode 100644 index 0000000000..a47acd4613 --- /dev/null +++ b/devtools/client/netmonitor/src/assets/icons/play.svg @@ -0,0 +1,8 @@ +<!-- 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/. --> +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b"> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <polygon id="Triangle-2" fill="#0A84FF" points="14 8 4 14 4 2"></polygon> + </g> +</svg> diff --git a/devtools/client/netmonitor/src/assets/icons/shield.svg b/devtools/client/netmonitor/src/assets/icons/shield.svg new file mode 100644 index 0000000000..dd7676d59f --- /dev/null +++ b/devtools/client/netmonitor/src/assets/icons/shield.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> + <path fill="context-fill" fill-rule="evenodd" d="M13 5.049l-1 1V6.5c0 2.877-.954 4.49-1.905 5.386a4.66 4.66 0 0 1-1.375.903c-.384.162-.703.21-.72.21a3.104 3.104 0 0 1-.72-.21 4.63 4.63 0 0 1-1.24-.78l-.708.708c.545.487 1.099.8 1.56.994.476.2.89.289 1.108.289.218 0 .632-.089 1.108-.29a5.66 5.66 0 0 0 1.672-1.096C11.954 11.51 13 9.623 13 6.5V5.049zM8 10.049l-1.1 1.099c.31.29.672.515 1.1.652v-1.752z M8 1.993l4.08.68c.126.021.243.062.349.12l.582-.582a.55.55 0 1 1 .778.778l-10.8 10.8a.55.55 0 1 1-.778-.778l1.863-1.863C3.442 10.038 3 8.53 3 6.5V3.758a1.1 1.1 0 0 1 .92-1.085L8 1.993zM4 6.5V3.758a.1.1 0 0 1 .084-.098L8 3.007l3.613.602L8 7.222V4.2l-2.8.5c0 1.409.095 3.231.626 4.696L4.812 10.41C4.338 9.478 4 8.213 4 6.5z"/> +</svg> diff --git a/devtools/client/netmonitor/src/assets/icons/turtle.svg b/devtools/client/netmonitor/src/assets/icons/turtle.svg new file mode 100644 index 0000000000..1f308649f3 --- /dev/null +++ b/devtools/client/netmonitor/src/assets/icons/turtle.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 7.5" width="12" height="12" fill="context-fill"> + <path d="M1.5,4.5c.75,0,1.31.75,1.68,1.49A4.47,4.47,0,0,1,7.5,2.25C10.5,2.25,12,5,12,7.5h-.75V9.38a.37.37,0,0,1-.37.38H9.38A.38.38,0,0,1,9,9.38V8.25H5.25V9.38a.37.37,0,0,1-.37.38H3.38A.37.37,0,0,1,3,9.38V7.5H1.5a1.5,1.5,0,0,1,0-3Z" transform="translate(0 -2.25)"/> +</svg> 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 */ +} |
