LCARStrek/devtools/tooltips.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* Tooltip specific theme variables */
   7
   8 .theme-dark,
   9 .theme-light {
  10   --bezier-diagonal-color: #A09090;
  11   --bezier-grid-color: rgba(0, 0, 0, 0.2);
  12 }
  13
  14 /* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
  15
  16 .devtools-tooltip .panel-arrowcontent {
  17   padding: 4px;
  18 }
  19
  20 .devtools-tooltip .panel-arrowcontainer {
  21   /* Reseting the transition used when panels are shown */
  22   transition: none;
  23   /* Panels slide up/down/left/right when they appear using a transform.
  24   Since we want to remove the transition, we don't need to transform anymore
  25   plus it can interfeer by causing mouseleave events on the underlying nodes */
  26   transform: none;
  27 }
  28
  29 .devtools-tooltip[clamped-dimensions] {
  30   min-height: 100px;
  31   max-height: 400px;
  32   min-width: 100px;
  33   max-width: 400px;
  34 }
  35 .devtools-tooltip[clamped-dimensions-no-min-height] {
  36   min-height: 0;
  37   max-height: 400px;
  38   min-width: 100px;
  39   max-width: 400px;
  40 }
  41 .devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
  42   min-width: 400px;
  43   max-width: 400px;
  44 }
  45 .devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
  46 .devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
  47 .devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
  48   overflow: hidden;
  49 }
  50 .devtools-tooltip[wide] {
  51   max-width: 600px;
  52 }
  53
  54 /* Tooltip: Simple Text */
  55
  56 .devtools-tooltip-simple-text {
  57   max-width: 400px;
  58   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
  59   padding: 8px 12px;
  60   white-space: pre-wrap;
  61 }
  62
  63 .devtools-tooltip-simple-text:first-child {
  64   margin-top: -4px;
  65 }
  66
  67 .devtools-tooltip-simple-text:last-child {
  68   margin-bottom: -4px;
  69 }
  70
  71 /* Tooltip: Alert Icon */
  72
  73 .devtools-tooltip-alert-icon {
  74   width: 32px;
  75   height: 32px;
  76   margin: 6px;
  77   margin-inline-end: 20px;
  78 }
  79
  80 .devtools-tooltip-alert-icon {
  81   list-style-image: url("chrome://global/skin/icons/warning-32.png");
  82 }
  83
  84 /* Tooltip: Variables View */
  85
  86 .devtools-tooltip-variables-view-box {
  87   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
  88 }
  89
  90 .devtools-tooltip-variables-view-box .variable-or-property > .title {
  91   padding-inline-end: 6px;
  92 }
  93
  94 /* Tooltip: Tiles */
  95
  96 .devtools-tooltip-tiles {
  97   background-color: #eee;
  98   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
  99     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
 100   background-size: 20px 20px;
 101   background-position: 0 0, 10px 10px;
 102 }
 103
 104 .devtools-tooltip-iframe {
 105   border: none;
 106   background: transparent;
 107 }
 108
 109 .tooltip-container {
 110   display: none;
 111   position: fixed;
 112   z-index: 9999;
 113   display: none;
 114   background: transparent;
 115   pointer-events: none;
 116   overflow: hidden;
 117   filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
 118 }
 119
 120 .tooltip-xul-wrapper {
 121   -moz-appearance: none;
 122   background: transparent;
 123   overflow: visible;
 124   border-style: none;
 125 }
 126
 127 .tooltip-xul-wrapper .tooltip-container {
 128   position: absolute;
 129 }
 130
 131 .tooltip-top {
 132   flex-direction: column;
 133 }
 134
 135 .tooltip-bottom {
 136   flex-direction: column-reverse;
 137 }
 138
 139 .tooltip-panel{
 140   background-color: var(--theme-tooltip-background);
 141   pointer-events: all;
 142   flex-grow: 1;
 143 }
 144
 145 .tooltip-visible {
 146   display: flex;
 147 }
 148
 149 .tooltip-hidden {
 150   display: flex;
 151   visibility: hidden;
 152 }
 153
 154 /* Tooltip : flexible height styles */
 155
 156 .tooltip-flexible-height .tooltip-panel {
 157   /* In flexible mode the tooltip panel should only grow according to its content. */
 158   flex-grow: 0;
 159 }
 160
 161 .tooltip-flexible-height .tooltip-filler {
 162   /* In flexible mode the filler should grow as much as possible. */
 163   flex-grow: 1;
 164 }
 165
 166 /* type="arrow" overrides: remove arrow decorations for the xul <panel> wrapper */
 167
 168 .tooltip-xul-wrapper[type="arrow"] {
 169   margin: 0;
 170 }
 171
 172 /* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
 173
 174 /* Remove all decorations on .panel-arrowcontent is the tooltip content container. */
 175 .tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent {
 176   margin: 0;
 177   padding: 0;
 178   background: transparent;
 179   border: none;
 180   box-shadow: none;
 181 }
 182
 183 /* Tooltip : arrow style */
 184
 185 .tooltip-xul-wrapper .tooltip-container {
 186   /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */
 187   filter: none;
 188 }
 189
 190 .tooltip-container[type="arrow"] > .tooltip-panel {
 191   position: relative;
 192   min-height: 10px;
 193   box-sizing: border-box;
 194   width: 100%;
 195
 196   border: 3px solid var(--theme-tooltip-border);
 197   border-radius: 5px;
 198 }
 199
 200 .tooltip-top[type="arrow"] .tooltip-panel {
 201   top: 0;
 202 }
 203
 204 .tooltip-bottom[type="arrow"] .tooltip-panel {
 205   bottom: 0;
 206 }
 207
 208 .tooltip-arrow {
 209   position: relative;
 210   height: 16px;
 211   width: 32px;
 212   overflow: hidden;
 213   flex-shrink: 0;
 214 }
 215
 216 /* In RTL locales, only use RTL on the tooltip content, keep LTR for positioning */
 217 .tooltip-container:-moz-locale-dir(rtl) {
 218   direction: ltr;
 219 }
 220
 221 .tooltip-panel:-moz-locale-dir(rtl) {
 222   direction: rtl;
 223 }
 224
 225 .tooltip-top .tooltip-arrow {
 226   margin-top: -3px;
 227 }
 228
 229 .tooltip-bottom .tooltip-arrow {
 230   margin-bottom: -3px;
 231 }
 232
 233 .tooltip-arrow:before {
 234   content: "";
 235   position: absolute;
 236   width: 21px;
 237   height: 21px;
 238   margin-left: 4px;
 239   background: linear-gradient(-45deg,
 240     var(--theme-tooltip-background) 50%, transparent 50%);
 241   border-color: var(--theme-tooltip-border);
 242   border-style: solid;
 243   border-width: 0px 3px 3px 0px;
 244   border-radius: 3px;
 245   pointer-events: all;
 246 }
 247
 248 .tooltip-bottom .tooltip-arrow:before {
 249   margin-top: 4px;
 250   transform: rotate(225deg);
 251 }
 252
 253 .tooltip-top .tooltip-arrow:before {
 254   margin-top: -12px;
 255   transform: rotate(45deg);
 256 }
 257
 258 /* Tooltip: Events */
 259
 260 .event-header {
 261   display: flex;
 262   align-items: center;
 263   cursor: pointer;
 264   overflow: hidden;
 265 }
 266
 267 .event-header:first-child {
 268   border-width: 0;
 269 }
 270
 271 .event-header:not(:first-child) {
 272   border-width: 1px 0 0 0;
 273 }
 274
 275 .devtools-tooltip-events-container {
 276   height: 100%;
 277   overflow-y: auto;
 278 }
 279
 280 .event-tooltip-event-type,
 281 .event-tooltip-filename,
 282 .event-tooltip-attributes {
 283   margin-inline-start: 0;
 284   flex-shrink: 0;
 285   cursor: pointer;
 286 }
 287
 288 .event-tooltip-event-type {
 289   font-weight: bold;
 290   font-size: 13px;
 291 }
 292
 293 .event-tooltip-filename {
 294   margin: 0 5px;
 295   font-size: 100%;
 296   flex-shrink: 1;
 297   white-space: nowrap;
 298   overflow: hidden;
 299   text-overflow: ellipsis;
 300   /* Force ellipsis to be displayed on the left */
 301   direction: rtl;
 302 }
 303
 304 .event-tooltip-debugger-icon {
 305   width: 16px;
 306   height: 16px;
 307   margin-inline-end: 4px;
 308   opacity: 0.6;
 309   flex-shrink: 0;
 310 }
 311
 312 .event-tooltip-debugger-icon:hover {
 313   opacity: 1;
 314 }
 315
 316 .event-tooltip-content-box {
 317   display: none;
 318   height: 100px;
 319   overflow: hidden;
 320   margin-inline-end: 0;
 321   border: 1px solid var(--theme-splitter-color);
 322   border-width: 1px 0 0 0;
 323 }
 324
 325 .event-toolbox-content-box iframe {
 326   height: 100%;
 327   border-style: none;
 328 }
 329
 330 .event-tooltip-content-box[open] {
 331   display: block;
 332 }
 333
 334 .event-tooltip-source-container {
 335   margin-top: 5px;
 336   margin-bottom: 10px;
 337   margin-inline-start: 5px;
 338   margin-inline-end: 0;
 339 }
 340
 341 .event-tooltip-source {
 342   margin-bottom: 0;
 343 }
 344
 345 .event-tooltip-attributes-container {
 346   display: flex;
 347   flex-shrink: 0;
 348   flex-grow: 1;
 349   justify-content: flex-end;
 350 }
 351
 352 .event-tooltip-attributes-box {
 353   display: flex;
 354   flex-shrink: 0;
 355   align-items: center;
 356   height: 14px;
 357   border-radius: 3px;
 358   padding: 2px;
 359   margin-inline-start: 5px;
 360   background-color: var(--theme-body-color-alt);
 361   color: var(--theme-toolbar-background);
 362 }
 363
 364 .event-tooltip-attributes {
 365   margin: 0;
 366   font-size: 9px;
 367   padding-top: 2px;
 368 }
 369
 370 /*
 371  * Tooltip: JS stack traces
 372  */
 373
 374 .stack-trace-tooltip {
 375   direction: ltr;
 376   height: 100%;
 377   overflow-y: auto;
 378 }
 379
 380 .stack-trace-tooltip > .stack-frame {
 381   margin-left: 5px;
 382   margin-right: 5px;
 383 }
 384
 385 .stack-trace-tooltip > .stack-frame:first-child {
 386   margin-top: 5px;
 387 }
 388
 389 .stack-trace-tooltip > .stack-frame:last-child {
 390   margin-bottom: 5px;
 391 }
 392
 393 .stack-frame-call {
 394   color: var(--theme-body-color-alt);
 395   cursor: pointer;
 396   display: flex;
 397 }
 398
 399 .stack-frame-call:hover {
 400   background-color: var(--theme-selection-background-semitransparent);
 401 }
 402
 403 .stack-frame-async {
 404   color: var(--theme-body-color-inactive);
 405 }
 406
 407 .stack-frame-function-name {
 408   color: var(--theme-highlight-blue);
 409   max-width: 50%;
 410   margin-inline-end: 1em;
 411   white-space: nowrap;
 412   overflow: hidden;
 413   text-overflow: ellipsis;
 414 }
 415
 416 .stack-frame-source-name {
 417   flex: 1 1;
 418   /* Makes the file name truncated (and ellipsis shown) on the left side */
 419   direction: rtl;
 420   text-align: right;
 421   white-space: nowrap;
 422   overflow: hidden;
 423   text-overflow: ellipsis;
 424 }
 425
 426 /* Enforce LTR direction for the file name - fixes bug 1290056 */
 427 .stack-frame-source-name-inner {
 428   direction: ltr;
 429   unicode-bidi: embed;
 430 }
 431
 432 .stack-frame-line {
 433   color: var(--theme-highlight-orange);
 434 }
 435
 436 /* Tooltip: HTML Search */
 437
 438 #searchbox-panel-listbox {
 439   width: 250px;
 440   max-width: 250px;
 441   overflow-x: hidden;
 442 }
 443
 444 #searchbox-panel-listbox .autocomplete-item,
 445 #searchbox-panel-listbox .autocomplete-item[selected] {
 446   overflow-x: hidden;
 447 }
 448
 449 #searchbox-panel-listbox .autocomplete-item > .initial-value {
 450   max-width: 130px;
 451   margin-left: 15px;
 452 }
 453
 454 #searchbox-panel-listbox .autocomplete-item > .autocomplete-value {
 455   max-width: 150px;
 456 }