NetworkDetailsBar.css (13797B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* Network details panel */ 6 7 .network-monitor .network-details-bar { 8 width: 100%; 9 height: 100%; 10 overflow: hidden; 11 } 12 13 .network-monitor .panel-container { 14 height: 100%; 15 display: flex; 16 flex-direction: column; 17 overflow-x: hidden; 18 overflow-y: auto; 19 } 20 21 .network-monitor .panel-container .tree-container .objectBox { 22 white-space: normal; 23 word-wrap: break-word; 24 unicode-bidi: plaintext; 25 } 26 27 .network-monitor .properties-view { 28 display: flex; 29 flex-direction: column; 30 flex-grow: 1; 31 height: 100%; 32 overflow: auto; 33 } 34 35 .network-monitor .properties-view .searchbox-section { 36 flex: 0 1 auto; 37 } 38 39 .network-monitor .properties-view .devtools-searchbox { 40 padding: 0; 41 } 42 43 .network-monitor .properties-view .devtools-searchbox input { 44 margin: 1px 3px; 45 } 46 47 /* Empty notices in tab panels */ 48 49 .network-monitor .empty-notice { 50 color: var(--theme-text-color-inactive); 51 padding: 3px 8px; 52 text-align: center; 53 display: flex; 54 align-items: center; 55 justify-content: center; 56 height: 100%; 57 font-size: 24px; 58 } 59 60 /* Accordions in the tab panels */ 61 62 .network-monitor .accordion-content .treeIcon { 63 margin-left: 16px; 64 } 65 66 .network-monitor .accordion { 67 display: flex; 68 flex-direction: column; 69 flex-grow: 1; 70 } 71 72 .network-monitor .accordion-item:last-child { 73 position: relative; 74 height: 100%; 75 } 76 77 .network-monitor .accordion-item:last-child .accordion-header { 78 position: relative; 79 } 80 81 .network-monitor .accordion-item:last-child .accordion-content { 82 position: relative; 83 top: 0; 84 bottom: 0; 85 left: 0; 86 right: 0; 87 overflow: inherit; 88 } 89 90 /* Text inputs in tab panels */ 91 92 .network-monitor .textbox-input { 93 text-overflow: ellipsis; 94 border: none; 95 background: none; 96 color: inherit; 97 width: 100%; 98 } 99 100 /* Tree table in tab panels */ 101 102 .network-monitor .tree-container, 103 .tree-container .treeTable { 104 position: relative; 105 height: 100%; 106 width: 100%; 107 overflow: auto; 108 flex: 1; 109 } 110 111 .network-monitor .tree-container .treeTable, 112 .network-monitor .tree-container .treeTable tbody { 113 display: flex; 114 flex-direction: column; 115 } 116 117 .network-monitor .tree-container .treeTable tbody { 118 height: 100%; 119 } 120 121 .network-monitor .tree-container .treeTable tr { 122 display: block; 123 position: relative; 124 } 125 126 /* Make right td fill available horizontal space */ 127 .network-monitor .tree-container .treeTable td:last-child { 128 width: 100%; 129 } 130 131 .network-monitor .tree-container .treeTable .tree-section, 132 .network-monitor .properties-view .raw-headers-container { 133 width: 100%; 134 background-color: var(--theme-toolbar-background); 135 } 136 137 .network-monitor .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) { 138 border-top: 1px solid var(--theme-splitter-color); 139 } 140 141 .network-monitor .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) { 142 border-bottom: 1px solid var(--theme-splitter-color); 143 } 144 145 .network-monitor .tree-container .treeTable .tree-section > * { 146 vertical-align: middle; 147 } 148 149 .network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel, 150 .network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover, 151 .network-monitor .tree-container .treeTable .treeRow.tree-section > .treeValueCell:not(:hover) * { 152 color: var(--theme-toolbar-color); 153 } 154 155 /* Force the twisty icon to gray even if the treeRow has the selected class */ 156 .network-monitor .tree-container .treeTable .treeRow.tree-section .theme-twisty { 157 fill: var(--theme-icon-dimmed-color); 158 } 159 160 /* Make the twisties rotate to the right in code-only sections on RTL. */ 161 .network-monitor .tab-panel.panel-with-code tr:not(.tree-section).hasChildren .theme-twisty:not(.open):dir(rtl) { 162 transform: rotate(-90deg); 163 } 164 165 .network-monitor .tree-container .treeTable .treeValueCell { 166 /* FIXME: Make value cell can be reduced to shorter width */ 167 max-width: 0; 168 padding-inline-end: 5px; 169 } 170 171 .network-monitor .tree-container .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover { 172 text-decoration: none; 173 } 174 175 .network-monitor .tab-panel.panel-with-code .tree-container .treeTable tr:not(.tree-section):dir(rtl) { 176 direction: ltr; 177 text-align: left; 178 } 179 180 /* Source editor in tab panels */ 181 182 /* If there is a source editor shows up in the last row of TreeView, 183 * it should occupy the available vertical space. 184 */ 185 .network-monitor .editor-row-container, 186 .network-monitor .tree-container .treeTable tr:last-child td[colspan="2"] { 187 display: block; 188 height: 100%; 189 flex: 1; 190 overflow-x: auto; 191 } 192 193 .network-monitor .responseTextContainer { 194 overflow-x: auto; 195 width: 100%; 196 height: 100%; 197 padding-left: 5px; 198 } 199 200 /* If there is a source editor shows up in the last row of TreeView, 201 * its height should not collapse into zero 202 */ 203 .network-monitor .tree-container .treeTable tr:last-child.editor-row-container { 204 overflow: visible; 205 } 206 207 .network-monitor .source-editor-mount { 208 width: 100%; 209 height: 100%; 210 } 211 212 .network-monitor .headers-summary-label, 213 .network-monitor .tree-container .objectBox { 214 white-space: nowrap; 215 } 216 217 /* Params and Response error messages */ 218 219 .network-monitor .request-error-header, 220 .network-monitor .response-error-header { 221 margin: 0; 222 padding: 4px 8px; 223 border-bottom: 1px solid var(--theme-splitter-color); 224 background-color: var(--red-60); 225 color: white; 226 line-height: 16px; 227 } 228 229 .theme-dark .network-monitor .request-error-header, 230 .theme-dark .network-monitor .response-error-header { 231 background-color: var(--red-70); 232 } 233 234 /* Response tabpanel */ 235 236 .network-monitor .response-image-box { 237 display: flex; 238 flex-direction: column; 239 justify-content: center; 240 align-items: center; 241 overflow-y: auto; 242 padding: 10px; 243 } 244 245 .network-monitor .response-image { 246 border: 1px dashed GrayText; 247 margin-bottom: 10px; 248 max-width: 300px; 249 max-height: 100px; 250 } 251 252 .network-monitor #response-panel .response-font-box { 253 overflow-y: auto; 254 padding: 10px; 255 display: flex; 256 flex-direction: column; 257 justify-content: center; 258 } 259 260 .network-monitor .response-font { 261 margin-bottom: 10px; 262 width: 100%; 263 height: 100%; 264 object-fit: contain; 265 } 266 267 .network-monitor .tree-container .treeTable tr.response-preview-container { 268 flex: 1; 269 min-height: 0; 270 } 271 272 .network-monitor .tree-container .treeTable tr.response-preview-container td { 273 display: block; 274 height: 100%; 275 } 276 277 .network-monitor .html-preview { 278 height: 100%; 279 } 280 281 .network-monitor .html-preview browser { 282 background-color: #fff; 283 border: none; 284 height: 100%; 285 width: 100%; 286 } 287 288 /* The editor container should only become a flex item when inside a container 289 * with other flex items. In this case, the HTML preview is a flex item and we 290 * can grow the editor. Otherwise, there may be overflow and 291 * .editor-row-container will become 0px tall. */ 292 .network-monitor .contains-html-preview .editor-row-container { 293 flex: 1; 294 min-height: 0; 295 } 296 297 /* Request and response data */ 298 299 .network-monitor #response-panel .panel-container { 300 overflow-y: hidden; 301 } 302 303 .network-monitor .data-header { 304 background: var(--theme-toolbar-background); 305 border-bottom: 1px solid var(--theme-splitter-color); 306 color: var(--theme-toolbar-color); 307 font-size: inherit; 308 font-weight: normal; 309 line-height: 16px; 310 margin: 0; 311 padding: 2px 4px; 312 width: 100%; 313 align-items: center; 314 display: flex; 315 user-select: none; 316 } 317 318 .network-monitor .data-label { 319 display: block; 320 white-space: nowrap; 321 overflow: hidden; 322 text-overflow: ellipsis; 323 font-size: inherit; 324 line-height: 20px; 325 color: var(--theme-toolbar-color); 326 } 327 328 .network-monitor .raw-data-toggle { 329 flex: none; 330 display: flex; 331 align-items: center; 332 justify-content: flex-end; 333 max-width: 50%; 334 margin-inline-start: auto; 335 padding-inline-start: 4px; 336 } 337 338 .network-monitor .raw-data-toggle-label { 339 white-space: nowrap; 340 color: var(--theme-toolbar-color); 341 } 342 343 .network-monitor .raw-data-toggle-input > input { 344 display: inline-block; 345 width: 2em; 346 vertical-align: bottom; 347 font-size: 12px; 348 } 349 350 .network-monitor #response-panel .notificationbox .notification[data-key="CORS-error"].notification[data-type="info"] { 351 background-color: var(--theme-body-alternate-emphasized-background); 352 } 353 354 .network-monitor #response-panel .notification[data-key="CORS-error"] .notificationInner .messageText { 355 white-space: normal; 356 padding-top: 8px; 357 padding-bottom: 8px; 358 } 359 360 /* Timings tabpanel */ 361 362 .network-monitor .timings-container { 363 display: flex; 364 } 365 366 .network-monitor .timings-overview { 367 display: flex; 368 border-bottom: 1px solid var(--theme-splitter-color); 369 padding: 4px; 370 } 371 372 .network-monitor .timings-overview-item { 373 display: inline-flex; 374 } 375 376 .network-monitor .timings-overview-item:not(:first-of-type)::before { 377 content: ""; 378 display: inline-flex; 379 margin-inline: 10px; 380 width: 1px; 381 background: var(--theme-splitter-color); 382 } 383 384 .network-monitor .timings-label { 385 width: 10em; 386 } 387 388 .network-monitor .requests-list-timings-container { 389 display: flex; 390 flex: 1; 391 align-items: center; 392 padding-inline-end: 20px; 393 --total-timings-width-percentage: 90%; 394 } 395 396 .network-monitor .requests-list-timings-total { 397 width: calc(100% - var(--total-timings-width-percentage)); 398 } 399 400 .network-monitor .requests-list-timings-offset { 401 transition: width 0.2s ease-out; 402 } 403 404 .network-monitor .requests-list-timings-box { 405 border: none; 406 min-width: 1px; 407 transition: width 0.2s ease-out; 408 margin-inline-start: calc(var(--current-timing-offset, 0) * var(--total-timings-width-percentage)); 409 width: calc(var(--current-timing-width, 0) * var(--total-timings-width-percentage)); 410 forced-color-adjust: none; 411 412 :root[forced-colors-active] & { 413 border: 1px solid CanvasText; 414 } 415 } 416 417 .network-monitor .label-separator { 418 margin-block: 5px; 419 margin-inline-start: 4px; 420 font-weight: 600; 421 color: var(--theme-comment); 422 } 423 424 .network-monitor .server-timings-color-1 { 425 background: var(--timing-server-color-1); 426 } 427 428 .network-monitor .server-timings-color-2 { 429 background: var(--timing-server-color-2); 430 } 431 432 .network-monitor .server-timings-color-3 { 433 background: var(--timing-server-color-3); 434 } 435 436 .network-monitor .server-timings-color-total { 437 background: var(--timing-server-color-total); 438 } 439 440 .network-monitor .serviceworker-timings-color-launch { 441 background: var(--timing-server-color-1); 442 } 443 444 .network-monitor .serviceworker-timings-color-requestTo { 445 background: var(--timing-server-color-2); 446 } 447 448 .network-monitor .serviceworker-timings-color-handledBy { 449 background: var(--timing-server-color-3); 450 } 451 452 /* Stack trace panel */ 453 454 .network-monitor .stack-trace { 455 font-family: var(--monospace-font-family); 456 /* The markup contains extra whitespace to improve formatting of clipboard text. 457 Make sure this whitespace doesn't affect the HTML rendering */ 458 white-space: normal; 459 padding: 5px; 460 direction: ltr; 461 } 462 463 .network-monitor .stack-trace .frame-link-source { 464 /* Makes the file name truncated (and ellipsis shown) on the left side */ 465 direction: rtl; 466 unicode-bidi: embed; 467 white-space: nowrap; 468 overflow: hidden; 469 text-overflow: ellipsis; 470 text-align: end; 471 } 472 473 .network-monitor .stack-trace .frame-link-function-display-name { 474 white-space: nowrap; 475 overflow: hidden; 476 text-overflow: ellipsis; 477 margin-inline-end: 1ch; 478 } 479 480 /* Security tabpanel */ 481 482 /* Overwrite tree-view cell colon `:` for security panel and tree section */ 483 .network-monitor .security-panel .treeTable .treeLabelCell::after, 484 .network-monitor .treeTable .tree-section .treeLabelCell::after { 485 content: ""; 486 } 487 488 /* Layout additional warning icon in tree value cell */ 489 .network-monitor .security-info-value { 490 display: flex; 491 } 492 493 .network-monitor .security-warning-icon { 494 width: 12px; 495 height: 12px; 496 vertical-align: -1px; 497 margin-inline-start: 5px; 498 background-image: url(resource://devtools-shared-images/alert-small.svg); 499 background-size: cover; 500 -moz-context-properties: fill; 501 fill: var(--yellow-60); 502 } 503 504 /* Custom request panel */ 505 506 .network-monitor .custom-request-panel, 507 .http-custom-request-panel { 508 height: 100%; 509 background-color: var(--theme-sidebar-background); 510 } 511 512 .theme-dark .network-monitor .custom-request-panel, 513 .http-custom-request-panel { 514 color: var(--theme-selection-color); 515 } 516 517 .network-monitor .custom-request-label { 518 font-weight: 600; 519 } 520 521 .network-monitor .custom-request-panel, 522 .http-custom-request-panel textarea { 523 resize: none; 524 font: message-box; 525 font-size: var(--theme-body-font-size); 526 } 527 528 .network-monitor .custom-header, 529 .network-monitor .custom-method-and-url, 530 .network-monitor .custom-request, 531 .network-monitor .custom-section, 532 .network-monitor .http-custom-header, 533 .network-monitor .http-custom-method-and-url, 534 .network-monitor .http-custom-request, 535 .network-monitor .http-custom-section { 536 display: flex; 537 } 538 539 .network-monitor .custom-header, 540 .network-monitor .http-custom-header { 541 flex-grow: 1; 542 font-size: 1.1em; 543 padding-top: 4px; 544 } 545 546 .network-monitor .custom-section { 547 flex-direction: column; 548 margin-top: 0.5em; 549 } 550 551 .network-monitor .http-custom-section { 552 flex-direction: column; 553 } 554 555 .network-monitor .custom-method-value { 556 width: 4.5em; 557 } 558 559 .network-monitor .http-custom-method-value { 560 width: 6em; 561 } 562 563 .network-monitor .custom-url-value, 564 .network-monitor .http-custom-url-value { 565 flex-grow: 1; 566 margin-inline-start: 6px; 567 } 568 569 .network-monitor #response-panel .notification[data-key="xssi-string-removed-info-box"] { 570 background-color: var(--theme-body-alternate-emphasized-background); 571 } 572 573 .network-monitor #response-panel .notification[data-key="xssi-string-removed-info-box"] .notificationInner .messageText { 574 white-space: normal; 575 padding-top: 8px; 576 padding-bottom: 8px; 577 } 578 579 #timings-panel .learn-more-link { 580 width: -moz-max-content; 581 }