toolbox.css (16639B)
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 /* 6 * Debug Target Info layout 7 * +------------+--------------+------------------------+ 8 * | connection | runtime info | target info icon + text | 9 * +------------+--------------+------------------------+ 10 */ 11 .debug-target-info { 12 --border-inline-end-width: 1px; 13 --padding-inline-end-size: 24px; 14 display: flex; 15 background: var(--theme-tab-toolbar-background); 16 border-bottom: 1px solid var(--theme-splitter-color); 17 padding: 4px 0; 18 font-size: 1.35em; 19 color: var(--theme-toolbar-color); 20 } 21 22 .toolbox-always-on-top { 23 display: flex; 24 padding: 6px; 25 margin-inline: 8px; 26 background-color: transparent; 27 border: 2px solid transparent; 28 border-radius: 2px; 29 align-items: center; 30 font-size: 12px; 31 white-space: nowrap; 32 text-overflow: ellipsis; 33 overflow: hidden; 34 } 35 36 .toolbox-always-on-top::after { 37 content: ""; 38 display: block; 39 width: 18px; 40 height: 18px; 41 background-size: cover; 42 background-image: url("chrome://devtools/skin/images/command-always-on-top-window.svg"); 43 -moz-context-properties: fill; 44 fill: currentColor; 45 margin-inline-start: 5px; 46 } 47 48 .toolbox-always-on-top:focus { 49 outline: none; 50 background-color: var(--theme-toolbar-hover); 51 box-shadow: var(--toolbox-button-box-shadow-focus); 52 } 53 :root { 54 --toolbox-button-box-shadow-focus: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); 55 } 56 57 .toolbox-always-on-top:hover { 58 background-color: var(--theme-toolbar-hover); 59 border-color: var(--tab-line-hover-color); 60 } 61 62 @media (prefers-reduced-motion: no-preference) { 63 .toolbox-always-on-top.checked:not(.toolbox-is-focused) { 64 animation: 0.5s linear 0s 1 normal blink-always-on-top; 65 } 66 67 @keyframes blink-always-on-top { 68 from { 69 background-color: var(--theme-toolbar-background-highlighted); 70 } 71 to { 72 background-color: transparent; 73 } 74 } 75 } 76 77 .toolbox-always-on-top.checked:not(:active), 78 .toolbox-always-on-top:not(.checked):active { 79 color: var(--theme-icon-checked-color); 80 } 81 82 .toolbox-always-on-top.checked:hover:not(:active), 83 .toolbox-always-on-top:not(.checked):hover:active { 84 border-color: var(--tab-line-selected-color); 85 } 86 87 /* 88 * Debug Target labels with icon layout 89 * +------+------------------------+---------------+ 90 * | icon | label text (bold) | optional text | 91 * | 20px | max-content | max-content | 92 * +------+------------------------+---------------+ 93 */ 94 .debug-target-info .iconized-label { 95 display: grid; 96 align-items: center; 97 white-space: nowrap; 98 grid-column-gap: 8px; 99 grid-template-columns: 20px auto auto; 100 padding: 0 var(--padding-inline-end-size); 101 } 102 103 .debug-target-navigation { 104 display: flex; 105 align-items: center; 106 white-space: nowrap; 107 padding: 0 4px; 108 } 109 110 .debug-target-info .iconized-label:not(:last-child) { 111 border-inline-end: var(--border-inline-end-width) solid var(--theme-splitter-color); 112 } 113 114 .debug-target-info .iconized-label img { 115 width: 20px; 116 height: 20px; 117 } 118 119 .debug-target-info img { 120 -moz-context-properties: fill; 121 fill: var(--theme-toolbar-color); 122 } 123 124 /* 125 * XXX: This was added to match the padding 8px used by the reload button. 126 * This padding makes the debug target component taller and also creates 127 * spacing with the debug-descriptor-title separator. 128 * See Bug 1641920 for improving the CSS of the DebugTargetInfo component. 129 */ 130 .debug-target-info .debug-target-url-readonly { 131 padding: 8px; 132 } 133 134 .debug-target-info .navigation-button { 135 padding: 8px; 136 margin: auto 2px; 137 grid-column-gap: 0; 138 border: 0; 139 background: var(--theme-toolbarbutton-background); 140 --border-inline-end-width: 0; 141 } 142 143 .debug-target-info .navigation-button > img:-moz-locale-dir(rtl) { 144 transform: scaleX(-1); 145 } 146 147 .debug-target-info .navigation-button:hover { 148 background-color: var(--toolbarbutton-hover-background); 149 } 150 151 .debug-target-info .navigation-button:focus { 152 box-shadow: var(--toolbox-button-box-shadow-focus); 153 } 154 155 .debug-target-info .navigation-button:active { 156 background-color: var(--theme-toolbarbutton-active-background); 157 } 158 159 .debug-target-info .navigation-button img { 160 fill: var(--theme-toolbarbutton-color); 161 } 162 163 .debug-target-info .navigation-button:active img { 164 fill: var(--theme-toolbarbutton-active-color); 165 } 166 167 .debug-target-info .debug-target-url { 168 display: flex; 169 flex: 1; 170 align-self: center; 171 min-width: 0; 172 } 173 174 /* Add some inline-end padding when the debug target url is the last child */ 175 .debug-target-info .debug-target-url:is(:last-child) { 176 padding-inline-end: var(--padding-inline-end-size); 177 } 178 179 .debug-target-info .debug-target-url-input { 180 border: 1px solid var(--theme-toolbarbutton-active-background); 181 border-radius: 2px; 182 height: 20px; 183 padding-inline-start: 10px; 184 /* Ensure that the url is displayed correctly for RTL locales. */ 185 unicode-bidi: plaintext; 186 text-align: match-parent; 187 } 188 189 .debug-target-info .debug-target-url-input, 190 .debug-target-info .debug-target-url-form { 191 width: 100%; 192 } 193 194 /* Toolbox tabbar */ 195 196 .devtools-tabbar { 197 appearance: none; 198 /* For narrow devtool width, we define the each column width of tabbar. 199 Defined layout is as follow: 200 201 ------------------------------------------------- 202 | Picker | tooltabs | commands | controls | 203 | auto | 26px ~ 1fr | auto | max-content| 204 ------------------------------------------------- 205 */ 206 display: grid; 207 grid-template-columns: auto minmax(26px, 1fr) auto max-content; 208 background: var(--theme-tab-toolbar-background); 209 border-bottom: 1px solid var(--theme-splitter-color); 210 box-sizing: border-box; 211 min-height: 29px; 212 } 213 214 .dragging #toolbox-panel-iframe-webconsole { 215 pointer-events: none; 216 } 217 218 .toolbox-tabs-wrapper { 219 position: relative; 220 display: flex; 221 flex: 1; 222 } 223 224 /* These classes use to stretch the tool tabs wrapper width if toolbox does'n 225 have start buttons or end buttons element. */ 226 227 .devtools-tabbar .toolbox-tabs-wrapper { 228 grid-column-start: 2; 229 grid-column-end: 3; 230 } 231 232 .devtools-tabbar-has-start .toolbox-tabs-wrapper { 233 grid-column-start: 1; 234 } 235 236 .devtools-tabbar-has-end .toolbox-tabs-wrapper { 237 grid-column-end: 4; 238 } 239 240 .toolbox-tabs { 241 position: absolute; 242 top: 0; 243 left: 0; 244 right: 0; 245 bottom: 0; 246 display: flex; 247 margin: 0; 248 flex: 1; 249 overflow: hidden; 250 } 251 252 /* Set flex attribute to Toolbox buttons and Picker container so, 253 they don't overlap with the tab bar */ 254 #toolbox-buttons-start, 255 #toolbox-buttons-end, 256 #toolbox-controls { 257 display: flex; 258 align-items: stretch; 259 overflow: hidden; 260 } 261 262 /* Toolbox tabs */ 263 264 .devtools-tab { 265 position: relative; 266 display: flex; 267 align-items: center; 268 flex-shrink: 0; 269 min-height: 24px; 270 margin: 0; 271 padding: 0; 272 border: none; 273 white-space: nowrap; 274 overflow: hidden; 275 text-overflow: ellipsis; 276 color: var(--theme-toolbar-color); 277 background-color: transparent; 278 /* adjust outline offset so it's not clipped */ 279 --theme-outline-offset: -2px; 280 } 281 282 .devtools-tab-label { 283 font-size: 12px; 284 mask-image: linear-gradient(to left, transparent 0, black 6px); 285 /* Set the end padding on the label to make sure the label gets faded out properly */ 286 padding-inline-end: 8px; 287 min-width: 1px; 288 } 289 290 .devtools-tab-label:-moz-locale-dir(rtl) { 291 mask-image: linear-gradient(to right, transparent 0, black 6px); 292 } 293 294 .devtools-tab .devtools-tab-badge { 295 color: var(--theme-highlight-blue); 296 font-size: 80%; 297 font-weight: 500; 298 margin-inline-start: 4px; 299 } 300 301 .devtools-tab-icon-only { 302 min-width: 26px; 303 } 304 305 .devtools-tab:hover { 306 background-color: var(--theme-toolbar-hover); 307 color: var(--theme-toolbar-hover-color); 308 } 309 310 .devtools-tab:hover:active { 311 background-color: var(--theme-toolbar-hover-active); 312 } 313 314 .devtools-tab.selected { 315 color: var(--theme-toolbar-selected-color); 316 background-color: var(--theme-toolbar-selected-background); 317 318 &:hover { 319 background-color: var(--theme-toolbar-selected-hover); 320 color: var(--theme-toolbar-selected-hover-color); 321 } 322 } 323 324 .devtools-tab > img { 325 border: none; 326 margin: 0; 327 margin-inline: 8px 6px; 328 height: 16px; 329 width: 16px; 330 vertical-align: text-top; 331 flex-shrink: 0; 332 -moz-context-properties: fill; 333 fill: var(--theme-icon-color); 334 } 335 336 .devtools-tab:hover > img { 337 fill: var(--theme-toolbar-hover-color); 338 } 339 340 .devtools-tab.selected > img { 341 fill: var(--theme-toolbar-selected-color); 342 } 343 344 .devtools-tab.highlighted > img { 345 fill: var(--theme-toolbar-highlighted-color); 346 } 347 348 /* Toolbox controls */ 349 350 .devtools-tabbar-button { 351 appearance: none; 352 position: relative; 353 display: flex; 354 align-items: center; 355 justify-content: center; 356 min-width: 26px; 357 margin: 0; 358 padding: 4px; 359 border: none; 360 direction: ltr; 361 font-family: inherit; 362 font-size: 11px; 363 line-height: 16px; 364 color: var(--theme-icon-color); 365 background-color: transparent; 366 /* adjust outline offset so it's not clipped */ 367 --theme-outline-offset: -2px; 368 } 369 370 /* Button icon style */ 371 .devtools-tabbar-button::before { 372 content: ""; 373 flex: none; 374 display: inline-block; 375 width: 16px; 376 height: 16px; 377 margin: 0 1px; 378 -moz-context-properties: fill; 379 fill: currentColor; 380 background-position: center; 381 background-repeat: no-repeat; 382 } 383 384 .devtools-tabbar-button:hover { 385 background-color: var(--theme-toolbar-hover); 386 color: var(--theme-toolbar-hover-color); 387 } 388 389 .devtools-tabbar-button.checked { 390 color: var(--toolbarbutton-checked-color); 391 background-color: var(--toolbarbutton-checked-background); 392 } 393 394 .devtools-tabbar-button:disabled { 395 color: var(--theme-icon-disabled-color) !important; 396 background-color: transparent !important; 397 } 398 399 #tools-chevron-menu-button::before { 400 background-image: url("chrome://devtools/skin/images/command-chevron.svg"); 401 } 402 403 #tools-chevron-menu-button:-moz-locale-dir(rtl)::before { 404 transform: rotate(180deg); 405 } 406 407 /* On OSX the cursor turns into a window-resizing cursor at the edges of the 408 * window, so bring the end of the toolbox in. */ 409 :root[platform="mac"] #toolbox-controls { 410 margin-inline-end: 2px; 411 } 412 413 #toolbox-buttons-start > .devtools-separator { 414 margin-inline: 0; 415 } 416 417 #toolbox-buttons-end > .devtools-separator { 418 margin-inline: 5px; 419 } 420 421 #toolbox-close::before { 422 background-image: url("chrome://devtools/skin/images/close.svg"); 423 } 424 425 #toolbox-meatball-menu-button::before { 426 background-image: url("chrome://devtools/skin/images/more.svg"); 427 } 428 429 #toolbox-meatball-menu-dock-bottom { 430 --menuitem-icon-image: url("chrome://devtools/skin/images/dock-bottom.svg"); 431 } 432 433 #toolbox-meatball-menu-dock-left { 434 --menuitem-icon-image: url("chrome://devtools/skin/images/dock-side-left.svg"); 435 } 436 437 #toolbox-meatball-menu-dock-right { 438 --menuitem-icon-image: url("chrome://devtools/skin/images/dock-side-right.svg"); 439 } 440 441 #toolbox-meatball-menu-dock-window { 442 --menuitem-icon-image: url("chrome://devtools/skin/images/dock-undock.svg"); 443 } 444 445 #toolbox-meatball-menu-dock-window:-moz-locale-dir(rtl) .label::before { 446 transform: scaleX(-1); 447 } 448 449 #toolbox-meatball-menu-splitconsole { 450 --menuitem-icon-image: url("chrome://devtools/skin/images/command-console.svg"); 451 } 452 453 #toolbox-meatball-menu-noautohide { 454 --menuitem-icon-image: url("chrome://devtools/skin/images/command-noautohide.svg"); 455 } 456 457 #toolbox-meatball-menu-pseudo-locale-accented { 458 --menuitem-icon-image: url("chrome://devtools/skin/images/command-accented.svg"); 459 } 460 461 #toolbox-meatball-menu-pseudo-locale-bidi { 462 --menuitem-icon-image: url("chrome://devtools/skin/images/command-bidi.svg"); 463 } 464 465 #toolbox-meatball-menu-settings { 466 --menuitem-icon-image: url("chrome://devtools/skin/images/settings.svg"); 467 } 468 469 .toolbox-error { 470 background-color: transparent !important; 471 font-variant-numeric: tabular-nums; 472 } 473 474 .toolbox-error::before { 475 background-image: url("resource://devtools-shared-images/error-small.svg"); 476 fill: var(--theme-icon-error-color) !important; 477 } 478 479 .toolbox-error:hover { 480 background-color: var(--toolbarbutton-hover-background) !important; 481 } 482 483 /* Command buttons */ 484 485 #command-button-pick { 486 min-width: 32px; 487 } 488 489 #command-button-pick::before { 490 background-image: url("resource://devtools-shared-images/command-pick.svg"); 491 } 492 493 #command-button-pick.accessibility::before { 494 background-image: url("chrome://devtools/skin/images/command-pick-accessibility.svg"); 495 } 496 497 #command-button-pick.remote-fenix::before { 498 background-image: url("resource://devtools-shared-images/command-pick-remote-touch.svg"); 499 } 500 501 /* Command button images */ 502 503 #command-button-screenshot::before { 504 background-image: url("chrome://devtools/skin/images/command-screenshot.svg"); 505 } 506 507 #command-button-responsive::before { 508 background-image: url("chrome://devtools/skin/images/command-responsivemode.svg"); 509 -moz-context-properties: fill, fill-opacity; 510 fill-opacity: 0; 511 } 512 513 #command-button-responsive.checked::before { 514 fill-opacity: 0.15; 515 } 516 517 .theme-dark #command-button-responsive.checked::before { 518 fill-opacity: 0.25; 519 } 520 521 #command-button-experimental-prefs::before { 522 background-image: url("chrome://global/skin/icons/experiments.svg"); 523 background-size: cover; 524 } 525 526 .experimental-pref-icon::before { 527 content: ""; 528 background-image: url("chrome://devtools/skin/images/help.svg"); 529 -moz-context-properties: fill; 530 fill: var(--theme-body-color); 531 display: block; 532 background-size: 12px; 533 width: 12px; 534 height: 12px; 535 } 536 537 #command-button-rulers::before { 538 background-image: url("chrome://devtools/skin/images/command-rulers.svg"); 539 } 540 541 #command-button-measure::before { 542 background-image: url("chrome://devtools/skin/images/command-measure.svg"); 543 } 544 545 #command-button-jstracer { 546 border-radius: 0; 547 margin: 0; 548 padding: 0; 549 550 &::before { 551 background-image: url("chrome://devtools/content/debugger/images/trace.svg"); 552 } 553 554 &.pending::after { 555 content: url("chrome://global/skin/icons/badge-blue.svg"); 556 width: 14px; 557 height: 14px; 558 display: block; 559 position: absolute; 560 bottom: -2px; 561 right: 0; 562 } 563 } 564 565 #command-button-frames::before { 566 background-image: url("chrome://devtools/skin/images/command-frames.svg"); 567 -moz-context-properties: fill, fill-opacity; 568 fill-opacity: 0; 569 } 570 571 #command-button-frames.checked::before { 572 fill-opacity: 0.15; 573 } 574 575 .theme-dark #command-button-frames.checked::before { 576 fill-opacity: 0.25; 577 } 578 579 /* Tooltip of frames menu */ 580 581 #command-button-frames-panel > .tooltip-panel { 582 max-width: 500px; 583 overflow-y: auto; 584 } 585 586 #toolbox-frame-menu span { 587 overflow: hidden; 588 text-overflow: ellipsis; 589 } 590 591 /* Toolbox panels */ 592 593 .toolbox-panel { 594 position: absolute; 595 inset: 0; 596 visibility: hidden; 597 } 598 599 .toolbox-panel[selected] { 600 visibility: visible; 601 } 602 603 /** 604 * When panels are collapsed or hidden, making sure that they are also 605 * inaccessible by keyboard. This is not the case by default because the are 606 * predominantly hidden using visibility: collapse; style or collapsed 607 * attribute. 608 */ 609 .toolbox-panel *, 610 #toolbox-panel-webconsole[hidden] * { 611 -moz-user-focus: ignore; 612 } 613 614 /** 615 * Ensure that selected toolbox panel's contents are keyboard accessible as they 616 * are explicitly made not to be when hidden (default). 617 */ 618 .toolbox-panel[selected] * { 619 -moz-user-focus: normal; 620 } 621 622 /* This is the container of #toolbox-deck and #toolbox-panel-webconsole */ 623 .panels-and-console { 624 position: relative; 625 } 626 627 #toolbox-panel-webconsole { 628 min-height: 75px; 629 } 630 631 :is(#toolbox-panel-webconsole, #toolbox-deck)[hidden] { 632 display: flex; /* Override xul.css */ 633 visibility: hidden; 634 } 635 636 /* The Web Console panel will be expanded when showing it 637 as any other tool, in full height. 638 i.e. not as split console */ 639 #toolbox-panel-webconsole[expanded] { 640 position: absolute; 641 inset: 0; 642 visibility: visible; 643 } 644 645 .toolbox-panel-iframe { 646 /* Allow toolbox frames to shrink under the default size and flex */ 647 contain: size; 648 } 649 650 #toolbox-container { 651 flex: 1; 652 /* Let the component gain focus when a click hits an empty area */ 653 -moz-user-focus: normal; 654 } 655 656 #toolbox-deck { 657 position: relative; 658 min-height: 75px; 659 flex: 1; 660 } 661 662 #toolbox-container:focus { 663 outline: 0; 664 } 665 666 /* Toolbox tabs reordering */ 667 #toolbox-container.tabs-reordering > .theme-body { 668 pointer-events: none; 669 } 670 671 #toolbox-container.tabs-reordering .devtools-tab:not(.selected):hover .devtools-tab-line { 672 background: transparent; 673 opacity: 0; 674 transition: none; 675 } 676 677 #toolbox-container.tabs-reordering .devtools-tab.selected { 678 background-color: var(--theme-toolbar-reordering-background); 679 color: var(--theme-toolbar-reordering-color); 680 z-index: 1; 681 } 682 683 .app-error-panel { 684 /* ensure that the panel hides the possibly broken toolbox displayed behind */ 685 background-color: var(--theme-body-background); 686 }