devtools/client/themes/toolbox.css

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