devtools/client/themes/tooltips.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 /* Import stylesheets for specific tooltip widgets */
   6 @import url(chrome://devtools/skin/accessibility-color-contrast.css);
   7 @import url(chrome://devtools/skin/badge.css);
   8 @import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
   9 @import url(chrome://devtools/content/shared/widgets/filter-widget.css);
  10 @import url(chrome://devtools/content/shared/widgets/linear-widget.css);
  11 @import url(chrome://devtools/content/shared/widgets/spectrum.css);
  12 @import url(chrome://devtools/skin/variables.css);
  13 /*
  14  * compatibility.css is primarily used by the Compatibility panel, so import it in a layer
  15  * to give it a lower importance than the rule here and mitigate styling mismatch.
  16  */
  17 @import url(chrome://devtools/skin/compatibility.css) layer(shared);
  18
  19 /* Tooltip specific theme variables */
  20 .theme-dark {
  21   --bezier-diagonal-color: #eee;
  22   --bezier-grid-color: rgba(255, 255, 255, 0.1);
  23
  24   /* Tooltips */
  25   --theme-tooltip-color: var(--theme-text-color-strong);
  26   --theme-tooltip-background: var(--theme-popup-background);
  27   --theme-tooltip-shadow-color: rgba(25, 25, 25, 0.76);
  28
  29   /* Doorhangers */
  30   /* These colors are based on the colors used for doorhangers elsewhere in
  31    * Firefox. */
  32   --theme-arrowpanel-background: var(--theme-popup-background);
  33   --theme-arrowpanel-color: var(--theme-popup-color);
  34   --theme-arrowpanel-border-color: var(--theme-popup-border-color);
  35   --theme-arrowpanel-separator: rgba(249,249,250,.1);
  36   --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
  37   --theme-arrowpanel-dimmed-further: rgba(249,249,250,.15);
  38   --theme-arrowpanel-disabled-color: rgba(249,249,250,.5);
  39 }
  40
  41 .theme-light {
  42   --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
  43   --bezier-grid-color: rgba(0, 0, 0, 0.05);
  44
  45   /* Tooltips */
  46   --theme-tooltip-color: var(--theme-body-color);
  47   --theme-tooltip-background: rgb(255, 255, 255);
  48   --theme-tooltip-shadow-color: var(--grey-90-a10);
  49
  50   /* Doorhangers */
  51   /* These colors are based on the colors used for doorhangers elsewhere in
  52    * Firefox. */
  53   --theme-arrowpanel-background: var(--theme-popup-background);
  54   --theme-arrowpanel-color: var(--theme-popup-color);
  55   --theme-arrowpanel-border-color: var(--theme-popup-border-color);
  56   --theme-arrowpanel-separator: ThreeDShadow;
  57   --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
  58   --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
  59   --theme-arrowpanel-disabled-color: GrayText;
  60 }
  61
  62 :root {
  63   --theme-arrowpanel-border-radius: 3.5px;
  64 }
  65
  66 :root[platform="mac"].theme-light {
  67   --theme-arrowpanel-separator: hsla(210,4%,10%,.14);
  68 }
  69
  70 /*
  71   There's a specific color-scheme defined for panels in https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/toolkit/themes/shared/popup.css#9-13
  72   This could create issues when the Firefox theme is at odd with the DevTools one (e.g.
  73   if Firefox uses a dark theme but the user has a DevTools light theme.
  74   Unset the color-scheme on those element so it uses the one we set on :root in common.css,
  75   which matches our light/dark theme.
  76 */
  77 menupopup, panel {
  78   color-scheme: unset
  79 }
  80
  81 strong {
  82   font-weight: bold;
  83 }
  84
  85 /* Tooltip: CSS variables tooltip */
  86
  87 .devtools-tooltip-css-variable {
  88   color: var(--theme-body-color);
  89   padding: 2px 8px;
  90   direction: ltr;
  91   /* Try to show the content of the tooltip on a single line */
  92   inline-size: max-content;
  93   word-break: break-word;
  94   max-inline-size: 100vw;
  95 }
  96
  97
  98 /* Tooltip: Compatibility tooltip */
  99
 100 .devtools-tooltip-css-compatibility {
 101   color: var(--theme-body-color);
 102   padding: 2px;
 103   direction: ltr;
 104 }
 105
 106 /* Tooltip: JS Evaluation Context */
 107
 108 #webconsole-input-evaluationsButton > .tooltip-panel {
 109   /* helps the JS Context selector to have scrollbars when content exceed the vertical size of the popup */
 110   overflow-y: auto;
 111 }
 112
 113
 114 /* Tooltip: Inactive CSS tooltip */
 115
 116 .devtools-tooltip-inactive-css,
 117 .devtools-tooltip-css-compatibility {
 118   color: var(--theme-arrowpanel-color);
 119   margin: 0;
 120   padding: 10px 14px 12px 14px;
 121   font-size: 12px;
 122 }
 123
 124 .devtools-tooltip-inactive-css,
 125 .devtools-tooltip-css-compatibility,
 126 .devtools-tooltip-inactive-css strong,
 127 .devtools-tooltip-css-compatibility strong {
 128   user-select: text;
 129   -moz-user-focus: normal;
 130 }
 131
 132 .devtools-tooltip-inactive-css p,
 133 .devtools-tooltip-css-compatibility p {
 134   margin-block-start: 0;
 135   margin-block-end: calc(1em - 4px);
 136 }
 137
 138 .devtools-tooltip-inactive-css p:last-child,
 139 .devtools-tooltip-css-compatibility p:last-child {
 140   margin-block-end: 0;
 141 }
 142
 143 .devtools-tooltip-inactive-css .link,
 144 .devtools-tooltip-css-compatibility .link {
 145   color: var(--theme-link-color);
 146   cursor: pointer;
 147 }
 148
 149 /* Tooltip: Compatibility tooltip */
 150
 151 .tooltip-container[type="doorhanger"] .tooltip-panel ul.compatibility-unsupported-browser-list {
 152   width: 100%;
 153   padding: 0;
 154   display: flex;
 155   justify-content: start;
 156 }
 157
 158 /* Tooltip: query container info */
 159 .devtools-tooltip-query-container {
 160   color: var(--theme-arrowpanel-color);
 161   margin: 0;
 162   padding: 10px 14px 12px;
 163   font-size: 12px;
 164   user-select: text;
 165   -moz-user-focus: normal;
 166 }
 167
 168 .devtools-tooltip-query-container header {
 169   --block-end-space: 5px;
 170   border-block-end: 1px solid var(--theme-arrowpanel-dimmed);
 171   padding-block-end: var(--block-end-space);
 172   margin-block-end: var(--block-end-space);
 173   max-width: 100%;
 174   text-overflow: ellipsis;
 175   overflow: hidden;
 176   color: var(--theme-body-color);
 177 }
 178
 179 .devtools-tooltip-query-container ul {
 180   padding: 0;
 181   margin: 0;
 182   list-style: none;
 183 }
 184
 185 .devtools-tooltip-query-container .objectBox-node .tag-name {
 186   color: var(--theme-highlight-blue);
 187 }
 188
 189 .devtools-tooltip-query-container .objectBox-node .attribute-name {
 190   color: var(--theme-highlight-red);
 191 }
 192
 193 .devtools-tooltip-query-container .property-name {
 194   color: var(--theme-highlight-blue);
 195 }
 196
 197 .devtools-tooltip-query-container .property-value {
 198   color: var(--theme-highlight-red);
 199 }
 200
 201
 202 /* Tooltip: Tiles */
 203
 204 .devtools-tooltip-tiles {
 205   background-color: #eee;
 206   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
 207     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
 208   background-size: 20px 20px;
 209   background-position: 0 0, 10px 10px;
 210 }
 211
 212 .tooltip-container {
 213   display: none;
 214   position: fixed;
 215   z-index: 9999;
 216   background: transparent;
 217   pointer-events: none;
 218   overflow: clip;
 219   filter: drop-shadow(0 2px 8px var(--theme-tooltip-shadow-color));
 220 }
 221
 222 .tooltip-xul-wrapper {
 223   /* All these are drawn by the tooltip-container, effectively */
 224   appearance: none;
 225   background: transparent;
 226   border: none;
 227   padding: 0;
 228   -moz-window-shadow: none;
 229   --panel-border-radius: 0px;
 230   --panel-padding: 0px;
 231   --panel-background: transparent;
 232   --panel-border-color: transparent;
 233   --panel-shadow: none;
 234
 235   /* This is enough room for the shadow of the tooltip-container */
 236   --panel-shadow-margin: 10px;
 237
 238   &::part(content) {
 239     border: none;
 240     /* Avoid clipping the drop-shadow */
 241     overflow: visible;
 242   }
 243
 244   &.non-interactive-toggle {
 245     /* We need to make toggled-on-hover panels transparent to events, otherwise
 246      * hovering over the panel shadow would toggle the panel. */
 247     pointer-events: none;
 248   }
 249
 250   /* The panel is absolutely positioned itself. */
 251   > .tooltip-container {
 252     position: relative;
 253   }
 254 }
 255
 256 .tooltip-top {
 257   flex-direction: column;
 258 }
 259
 260 .tooltip-bottom {
 261   flex-direction: column-reverse;
 262 }
 263
 264 .tooltip-panel {
 265   background-color: var(--theme-tooltip-background);
 266   pointer-events: all;
 267   flex-grow: 1;
 268 }
 269
 270 .tooltip-visible {
 271   display: flex;
 272 }
 273
 274 .tooltip-hidden {
 275   display: flex;
 276   visibility: hidden;
 277 }
 278
 279 /* Tooltip : flexible height styles */
 280
 281 .tooltip-flexible-height .tooltip-panel {
 282   /* In flexible mode the tooltip panel should only grow according to its content. */
 283   flex-grow: 0;
 284 }
 285
 286 .tooltip-flexible-height .tooltip-filler {
 287   /* In flexible mode the filler should grow as much as possible. */
 288   flex-grow: 1;
 289 }
 290
 291 /* Tooltip : arrow style */
 292
 293 .tooltip-container[type="arrow"] > .tooltip-panel {
 294   position: relative;
 295   min-height: 10px;
 296   box-sizing: border-box;
 297   width: 100%;
 298   border-radius: var(--theme-arrowpanel-border-radius);
 299 }
 300
 301 .tooltip-top[type="arrow"] .tooltip-panel {
 302   top: 0;
 303 }
 304
 305 .tooltip-bottom[type="arrow"] .tooltip-panel {
 306   bottom: 0;
 307 }
 308
 309 .tooltip-arrow {
 310   position: relative;
 311   box-sizing: border-box;
 312   height: 16px;
 313   width: 32px;
 314   overflow: hidden;
 315   flex-shrink: 0;
 316 }
 317
 318 /* In RTL locales and context, only use RTL on the tooltip content, keep LTR for positioning */
 319 .tooltip-container:-moz-locale-dir(rtl),
 320 .tooltip-container:dir(rtl) {
 321   direction: ltr;
 322 }
 323
 324 .tooltip-panel:-moz-locale-dir(rtl),
 325 .tooltip-panel:dir(rtl) {
 326   direction: rtl;
 327 }
 328
 329 .tooltip-top .tooltip-arrow {
 330   /**
 331    * The -1px margin is there to make sure the middle of the arrow overlaps with
 332    * the border of the tooltip container.
 333    * The -2px is there because the rotated arrow is not visually as tall as its
 334    * container. Since the positioning logic relies on measuring the size of the
 335    * tooltip, this -2px ensures the measured size matches the visuals (and not
 336    * simply the box model).
 337    */
 338   margin-bottom: -2px;
 339   margin-top: -1px;
 340 }
 341
 342 .tooltip-bottom .tooltip-arrow {
 343   /* See comment in .tooltip-top .tooltip-arrow (inverted here) */
 344   margin-bottom: -1px;
 345   margin-top: -2px;
 346 }
 347
 348 .tooltip-arrow::before {
 349   content: "";
 350   position: absolute;
 351   width: 21px;
 352   height: 21px;
 353   margin-left: 4px;
 354   background: linear-gradient(-45deg,
 355     var(--theme-tooltip-background) 50%, transparent 50%);
 356   border: 0 none;
 357   pointer-events: all;
 358   box-sizing: border-box;
 359 }
 360
 361 .tooltip-bottom .tooltip-arrow::before {
 362   margin-top: 5px;
 363   transform: rotate(225deg);
 364 }
 365
 366 .tooltip-top .tooltip-arrow::before {
 367   margin-top: -12px;
 368   transform: rotate(45deg);
 369 }
 370
 371 /* XUL panels have a default border, but pure HTML tooltips don't have one. */
 372 .tooltip-container[type="arrow"] > .tooltip-panel,
 373 .tooltip-container[type="arrow"] > .tooltip-arrow::before {
 374   border: 1px solid var(--theme-arrowpanel-border-color);
 375 }
 376
 377 /* Tooltip : doorhanger style */
 378
 379 .tooltip-container[type="doorhanger"] {
 380   > .tooltip-panel {
 381     color: var(--theme-arrowpanel-color);
 382     margin: 0;
 383     padding: 0;
 384     max-width: 320px;
 385   }
 386
 387   > .tooltip-panel,
 388   > .tooltip-arrow::before {
 389     background: var(--theme-arrowpanel-background);
 390     border: 1px solid var(--theme-arrowpanel-border-color);
 391     border-radius: var(--theme-arrowpanel-border-radius);
 392     box-shadow: 0 0 4px hsla(210,4%,10%,.2);
 393   }
 394
 395   > .tooltip-arrow {
 396     /* Desired width of the arrow */
 397     --arrow-width: 20px;
 398
 399     /* Amount of room to allow for the shadow. Should be about half the radius. */
 400     --shadow-radius: 4px;
 401     --shadow-margin: calc(var(--shadow-radius) / 2);
 402
 403     /*
 404      * Crop the arrow region to show half the arrow plus allow room for margins.
 405      *
 406      * The ARROW_WIDTH in HTMLTooltip.js needs to match the following value.
 407      */
 408     width: calc(var(--arrow-width) + 2 * var(--shadow-margin));
 409     height: calc(var(--arrow-width) / 2 + var(--shadow-margin));
 410
 411     /**
 412      * The rotated box slightly overlaps the left edge of the arrow container.
 413      * This means the arrow is not centered in its own box by default.
 414      */
 415     padding-left: 1px;
 416
 417     &::before {
 418       /* Don't inherit any rounded corners. */
 419       border-radius: 0;
 420
 421       /*
 422        * When the box is rotated, it should have width <arrow-width>.
 423        * That makes the length of one side of the box equal to:
 424        *
 425        *    (<arrow-width> / 2) / sin 45
 426        */
 427       --sin-45: 0.707106781;
 428       --square-side: calc(var(--arrow-width) / 2 / var(--sin-45));
 429       width: var(--square-side);
 430       height: var(--square-side);
 431
 432       /*
 433        * The rotated square will overshoot the left side
 434        * and need to be shifted in by:
 435        *
 436        *   (<arrow-width> - square side) / 2
 437        *
 438        * But we also want to shift it in so that the box-shadow
 439        * is not clipped when we clip the parent so we add
 440        * a suitable margin for that.
 441        */
 442       --overhang: calc((var(--arrow-width) - var(--square-side)) / 2);
 443       margin-left: calc(var(--overhang) + var(--shadow-margin));
 444     }
 445   }
 446
 447   &.tooltip-top > .tooltip-arrow {
 448     /* Overlap the arrow with the 1px border of the doorhanger */
 449     margin-top: -1px;
 450
 451     &::before {
 452       /* Show only the bottom half of the box */
 453       margin-top: calc(var(--square-side) / -2);
 454     }
 455   }
 456
 457   &.tooltip-bottom > .tooltip-arrow {
 458     /* Overlap the arrow with the 1px border of the doorhanger */
 459     margin-bottom: -1px;
 460
 461     &::before {
 462       /* Shift the rotated box in so that it is not clipped */
 463       margin-top: calc(var(--overhang) + var(--shadow-margin));
 464     }
 465   }
 466
 467   .menu-standard-padding {
 468     margin: 0;
 469     padding: 6px 0;
 470   }
 471
 472   .tooltip-panel ul {
 473     /* Override the display: flex declaration in xul.css
 474      * or else menu items won't stack. */
 475     display: block;
 476     list-style: none;
 477   }
 478
 479   .tooltip-panel li {
 480     list-style: none;
 481   }
 482
 483   .menuitem > .command {
 484     display: flex;
 485     align-items: baseline;
 486     margin: 0;
 487     padding: 4px 12px;
 488     /*
 489      * It doesn't really make sense, since if this is just about making the items
 490      * easier to click we should be using min-width instead.
 491      */
 492     margin-inline-end: 15px;
 493
 494     &:focus-visible {
 495       --theme-outline-offset: -2px;
 496     }
 497
 498     &:not([disabled],[open],:active):hover {
 499       background-color: var(--theme-arrowpanel-dimmed);
 500     }
 501
 502     &:not([disabled]):is([open],:hover:active) {
 503       background-color: var(--theme-arrowpanel-dimmed-further);
 504       box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 505     }
 506
 507     &[disabled] {
 508       opacity: 0.5;
 509     }
 510
 511     &[aria-checked="true"] {
 512       list-style-image: none;
 513       -moz-context-properties: fill;
 514       fill: currentColor;
 515       background: url(chrome://devtools/skin/images/check.svg) no-repeat transparent;
 516       background-position: 7px center;
 517
 518       &:dir(rtl),
 519       &:-moz-locale-dir(rtl) {
 520         background-position-x: right 7px;
 521       }
 522     }
 523
 524     > .label {
 525       flex: 1;
 526       font: menu;
 527       white-space: nowrap;
 528       text-overflow: ellipsis;
 529       overflow: hidden;
 530     }
 531
 532     > .accelerator {
 533       margin-inline-start: 10px;
 534       color: var(--theme-arrowpanel-disabled-color);
 535       font: message-box;
 536     }
 537   }
 538
 539   .menuitem > button.command:is([role="menuitem"],[role="menuitemcheckbox"],[role="link"]) {
 540     appearance: none;
 541     border: none;
 542     color: var(--theme-arrowpanel-color);
 543     background-color: transparent;
 544     text-align: start;
 545     width: 100%;
 546   }
 547
 548   .checkbox-container .menuitem > .command > .label {
 549     padding-inline-start: 16px;
 550   }
 551
 552   hr {
 553     display: block;
 554     border: none;
 555     border-top: 1px solid var(--theme-arrowpanel-separator);
 556     margin: 6px 0;
 557     padding: 0;
 558   }
 559
 560   [role="menuseparator"] {
 561     border: none;
 562     border-bottom: 1px solid #cacdd3;
 563     width: 100%;
 564     height: 2px;
 565     display: block;
 566     background: none;
 567     pointer-events: none;
 568   }
 569 }
 570
 571 .menu-button--iconic::before,
 572 .tooltip-container[type="doorhanger"] .menuitem > .command.iconic > .label::before {
 573   content: " ";
 574   display: inline-block;
 575   margin-inline-end: 8px;
 576   width: 16px;
 577   height: 16px;
 578   /* Better optical alignment than with 'vertical-align: middle'.
 579      Works well with font sizes between 12px and 16px. */
 580   vertical-align: -3px;
 581   -moz-context-properties: fill;
 582   fill: currentColor;
 583   background-image: var(--menuitem-icon-image);
 584   background-size: contain;
 585   background-repeat: no-repeat;
 586   /*
 587    * The icons in the sidebar menu have opacity: 0.8 here, but those in the
 588    * hamburger menu don't. For now we match the hamburger menu styling,
 589    * especially because the 80% opacity makes the icons look dull in dark mode.
 590    */
 591 }
 592
 593 /* Tooltip: Events */
 594
 595 .devtools-tooltip-events-container {
 596   border-radius: var(--theme-arrowpanel-border-radius);
 597   height: 100%;
 598   overflow-y: auto;
 599   margin: 0;
 600   padding: 0;
 601 }
 602
 603 @media (-moz-overlay-scrollbars) {
 604   .devtools-tooltip-events-container {
 605     padding-inline: calc(env(scrollbar-inline-size) / 2);
 606   }
 607 }
 608
 609 .devtools-tooltip-events-container .event-header {
 610   display: flex;
 611   align-items: center;
 612   box-sizing: content-box;
 613   height: 24px;
 614   padding: 0 4px;
 615   cursor: pointer;
 616   overflow: hidden;
 617   color: var(--theme-tooltip-color);
 618   background-color: var(--theme-tooltip-background);
 619 }
 620
 621 .devtools-tooltip-events-container > li + li .event-header {
 622   border-top: 1px solid var(--theme-splitter-color);
 623 }
 624
 625 .event-header .theme-twisty {
 626   flex: none;
 627   width: 12px;
 628   height: 12px;
 629   margin-inline-end: 4px;
 630   fill: currentColor;
 631   border: none;
 632   background-color: transparent;
 633 }
 634
 635 .event-header .theme-twisty[aria-expanded="true"] {
 636   transform: none;
 637 }
 638
 639 .event-tooltip-listener-toggle-checkbox {
 640   flex-shrink: 0;
 641 }
 642
 643 .event-tooltip-debugger-icon {
 644   -moz-context-properties: stroke;
 645   stroke: var(--theme-icon-color);
 646   background-image: url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg");
 647   background-repeat: no-repeat;
 648   background-position: center;
 649   background-color: transparent;
 650   border: none;
 651   width: 20px;
 652   height: 20px;
 653   border-radius: 2px;
 654   margin-inline-end: 4px;
 655   flex-shrink: 0;
 656   cursor: pointer;
 657 }
 658
 659 .event-tooltip-debugger-icon:hover {
 660   background-color: var(--toolbarbutton-hover-background);
 661 }
 662
 663 .event-tooltip-event-type,
 664 .event-tooltip-filename,
 665 .event-tooltip-attributes {
 666   margin-inline-start: 0;
 667   flex-shrink: 0;
 668   cursor: pointer;
 669 }
 670
 671 .event-tooltip-event-type {
 672   font-weight: bold;
 673   font-size: 12px;
 674   line-height: 16px;
 675 }
 676
 677 .event-tooltip-filename {
 678   margin: 0 5px;
 679   font-size: 100%;
 680   flex-shrink: 1;
 681   white-space: nowrap;
 682   overflow: hidden;
 683   text-overflow: ellipsis;
 684   /* Force ellipsis to be displayed on the left */
 685   direction: rtl;
 686 }
 687
 688 .event-tooltip-content-box {
 689   display: none;
 690   height: 100px;
 691   overflow: hidden;
 692   margin-inline-end: 0;
 693   border: 1px solid var(--theme-splitter-color);
 694   border-width: 1px 0 0 0;
 695 }
 696
 697 .event-toolbox-content-box iframe {
 698   height: 100%;
 699   border-style: none;
 700 }
 701
 702 .event-tooltip-content-box[open] {
 703   display: block;
 704 }
 705
 706 .event-tooltip-source-container {
 707   margin-top: 5px;
 708   margin-bottom: 10px;
 709   margin-inline-start: 5px;
 710   margin-inline-end: 0;
 711 }
 712
 713 .event-tooltip-source {
 714   margin-bottom: 0;
 715 }
 716
 717 .event-tooltip-attributes-container {
 718   display: flex;
 719   flex-shrink: 0;
 720   flex-grow: 1;
 721   justify-content: flex-end;
 722 }
 723
 724 .event-tooltip-attributes-box {
 725   display: flex;
 726   flex-shrink: 0;
 727   align-items: center;
 728   height: 14px;
 729   border-radius: 3px;
 730   padding: 1px 3px;
 731   margin-inline-start: 4px;
 732   background-color: var(--theme-text-color-alt);
 733   color: var(--theme-body-background);
 734 }
 735
 736 .event-tooltip-attributes {
 737   margin: 0;
 738   font-size: 9px;
 739   line-height: 14px;
 740 }
 741
 742 .event-tooltip-editor-frame {
 743   border-style: none;
 744   height: 100%;
 745   width: 100%;
 746 }
 747
 748 /* Tooltip: HTML Search */
 749
 750 #searchbox-panel-listbox {
 751   width: 250px;
 752   max-width: 250px;
 753   overflow-x: hidden;
 754 }
 755
 756 #searchbox-panel-listbox .autocomplete-item,
 757 #searchbox-panel-listbox .autocomplete-item[selected] {
 758   overflow-x: hidden;
 759 }
 760
 761 /* Tooltip: Image tooltip */
 762
 763 /*
 764  * Overview of the Image Tooltip layout.
 765  *
 766  * ┌─────────────────────────────────────────┐
 767  * │ .devtools-tooltip-image-container       │
 768  * │ ┌─────────────────────────────────────┐ │
 769  * │ │ .devtools-tooltip-image-wrapper     │ │
 770  * │ │ ┌─────────────────────────────────┐ │ │
 771  * │ │ │ .devtools-tooltip-image         │ │ │
 772  * │ │ │ (the actual image tag)          │ │ │
 773  * │ │ └─────────────────────────────────┘ │ │
 774  * │ └─────────────────────────────────────┘ │
 775  * │ ┌─────────────────────────────────────┐ │
 776  * │ │ .devtools-tooltip-image-dimensions  │ │
 777  * │ └─────────────────────────────────────┘ │
 778  * └─────────────────────────────────────────┘
 779  *
 780  */
 781
 782 .devtools-tooltip-image-container {
 783   /* Saved as variables to be synchronized easily with ImageTooltipHelper.js */
 784   --image-tooltip-image-padding: 4px;
 785   --image-tooltip-label-height: 20px;
 786
 787   display: flex;
 788   flex-direction: column;
 789   height: 100%;
 790   min-width: 100px;
 791   text-align: center;
 792 }
 793
 794 .devtools-tooltip-image-wrapper {
 795   align-items: center;
 796   display: flex;
 797   flex: 1;
 798   padding: var(--image-tooltip-image-padding);
 799   justify-content: center;
 800   min-height: 1px
 801 }
 802
 803 .devtools-tooltip-image {
 804   max-height: 100%;
 805 }
 806
 807 .devtools-tooltip-image-dimensions {
 808   height: var(--image-tooltip-label-height);
 809   text-align: center;
 810 }
 811
 812 .devtools-tooltip-image-broken {
 813   box-sizing: border-box;
 814   height: 100%;
 815   padding: 7px;
 816 }
 817
 818 /* Tooltip: Invoke getter confirm Tooltip */
 819
 820 .invoke-confirm {
 821   color: var(--theme-popup-color);
 822   border: 1px solid rgba(0,0,0, 0.1);
 823   max-width: 212px;
 824 }
 825
 826 .invoke-confirm .close-confirm-dialog-button::before {
 827   background-image: url("chrome://devtools/skin/images/close.svg");
 828 }
 829
 830 .invoke-confirm .confirm-label {
 831   margin: 0;
 832   padding: 4px;
 833   background-color: var(--theme-toolbar-background-alt);
 834   display: flex;
 835   align-items: start;
 836 }
 837
 838 .invoke-confirm .confirm-label p {
 839   margin: 0;
 840   padding: 0;
 841   flex-grow: 1;
 842   hyphens: auto;
 843 }
 844
 845 .invoke-confirm .emphasized {
 846   font-family: var(--monospace-font-family);
 847   font-weight: bold;
 848   overflow-wrap: break-word;
 849 }
 850
 851 .invoke-confirm .close-confirm-dialog-button {
 852   padding: 0;
 853   margin: 0;
 854   flex-grow: 0;
 855 }
 856
 857 .invoke-confirm .confirm-button {
 858   background-color: var(--theme-selection-background);
 859   color: white;
 860   border: none;
 861   padding: 6px;
 862   display: block;
 863   width: 100%;
 864   text-align: left;
 865 }
 866
 867 /* The button already has a "selected" style, we can remove the focus rings. */
 868 .confirm-button:focus-visible {
 869   outline: none;
 870 }
 871
 872 .invoke-confirm .learn-more-link {
 873   color: var(--theme-link-color);
 874   padding-inline-end: 4px;
 875   display: flex;
 876   align-items: center;
 877   justify-content: end;
 878   min-height: 20px;
 879   cursor: pointer;
 880 }
 881
 882 .invoke-confirm .learn-more-link::after {
 883   content: "";
 884   width: 14px;
 885   height: 14px;
 886   fill: currentColor;
 887   -moz-context-properties: fill;
 888   background-image: url(chrome://devtools/skin/images/help.svg);
 889   background-size: contain;
 890   background-repeat: no-repeat;
 891   margin-inline-start: 4px;
 892 }
 893
 894 /* Tooltip: Rule Preview */
 895
 896 .rule-preview-tooltip-container {
 897   display: flex;
 898   flex-direction: column;
 899   max-width: 200px;
 900   color: var(--theme-body-color);
 901   padding: 5px;
 902 }
 903
 904 .rule-preview-tooltip-message {
 905   white-space: pre-wrap;
 906 }
 907
 908 .rule-preview-tooltip-source-rule-footer {
 909   align-self: center;
 910   border-top: 1px solid var(--theme-body-color);
 911   margin-top: 5px;
 912   margin-right: 5px;
 913   margin-left: 5px;
 914   padding: 3px;
 915 }
 916
 917 /* Tooltip: Selector warning */
 918 .devtools-tooltip-selector-warnings {
 919   margin: 0;
 920   padding: 10px;
 921   list-style: none;
 922
 923   & > li {
 924     padding: 0;
 925
 926     & + li {
 927       border-block-start: 1px solid var(--theme-splitter-color);
 928     }
 929   }
 930 }