LCARStrek/browser/devtools/webconsole.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 window {
   6   padding: 0;
   7 }
   8
   9 /*
  10  * This hardcoded width likely due to a toolkit Windows specific bug.
  11  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  12  */
  13
  14 .hud-filter-box {
  15   width: 200px;
  16 }
  17
  18 /* === BEGIN webconsole.inc.css === */
  19
  20 /* General output styles */
  21
  22 a {
  23   -moz-user-focus: normal;
  24   -moz-user-input: enabled;
  25   cursor: pointer;
  26   text-decoration: underline;
  27 }
  28
  29 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
  30  * assertion when loading HTML page with links in XUL iframe */
  31 *:visited { }
  32
  33 .message {
  34   display: flex;
  35   flex: 0 0 auto;
  36   -moz-margin-start: 6px;
  37   -moz-margin-end: 8px;
  38   width: calc(100% - 6px - 8px);
  39 }
  40
  41 .message > .timestamp {
  42   flex: 0 0 auto;
  43   color: #8050B0;
  44   margin: 4px 0;
  45 }
  46
  47 .message > .icon {
  48   background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat;
  49   background-position: center 0.5em;
  50   flex: 0 0 auto;
  51   margin: 0 6px;
  52   padding: 0 4px;
  53   width: 8px;
  54 }
  55
  56 .message > .body {
  57   flex: 1 1 100%;
  58   white-space: pre-wrap;
  59   word-wrap: break-word;
  60   margin-top: 4px;
  61 }
  62
  63 /* The red bubble that shows the number of times a message is repeated */
  64 .message-repeats {
  65   -moz-user-select: none;
  66   flex: 0 0 auto;
  67   margin: 2px 6px;
  68   padding: 0 6px;
  69   height: 1.25em;
  70   color: #000000;
  71   background-color: #FF0000;
  72   border-radius: 40px;
  73   /* font: message-box; */
  74   font-size: 0.9em;
  75   font-weight: 600;
  76 }
  77
  78 .message-repeats[value="1"] {
  79   display: none;
  80 }
  81
  82 .message-location {
  83   -moz-margin-start: 6px;
  84   display: flex;
  85   flex: 0 0 auto;
  86   align-self: flex-start;
  87   justify-content: flex-end;
  88   width: 10em;
  89   margin-top: 4px;
  90   color: #3333FF;
  91   text-decoration: none;
  92   white-space: nowrap;
  93 }
  94
  95 .message-location:hover,
  96 .message-location:focus {
  97   text-decoration: underline;
  98 }
  99
 100 .message-location > .filename {
 101   text-overflow: ellipsis;
 102   text-align: end;
 103   overflow: hidden;
 104   white-space: nowrap;
 105 }
 106
 107 .message-location > .line-number {
 108   flex: 0 0 auto;
 109 }
 110
 111 .hud-msg-node[selected="true"] > .webconsole-timestamp,
 112 .hud-msg-node[selected="true"] > .webconsole-location {
 113   color: inherit;
 114 }
 115
 116 .jsterm-input-container {
 117   border-top-width: 1px;
 118   border-top-style: solid;
 119 }
 120
 121 #output-wrapper {
 122   direction: ltr;
 123   overflow: auto;
 124 }
 125
 126 #output-container {
 127   -moz-user-select: text;
 128   -moz-box-flex: 1;
 129   display: flex;
 130   flex-direction: column;
 131   align-items: flex-start;
 132 }
 133
 134 #output-container.hideTimestamps > .message > .timestamp {
 135   display: none;
 136 }
 137
 138 .filtered-by-type,
 139 .filtered-by-string {
 140   display: none;
 141 }
 142
 143 .hidden-message {
 144   display: block;
 145   visibility: hidden;
 146   height: 0;
 147   overflow: hidden;
 148 }
 149
 150 /* WebConsole colored drops */
 151
 152 .webconsole-filter-button {
 153   -moz-user-focus: normal;
 154 }
 155
 156 .webconsole-filter-button[checked] {
 157   /* color: white !important; */
 158 }
 159
 160 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 161   content: "";
 162   display: inline-block;
 163   height: 8px;
 164   width: 8px;
 165   border-radius: 50%;
 166   margin-left: 5px;
 167   border-width: 1px;
 168   border-style: solid;
 169 }
 170
 171 .webconsole-filter-button menuitem {
 172   -moz-image-region: auto;
 173 }
 174
 175 .hud-filter-box {
 176   margin-top: 0;
 177   margin-bottom: 0;
 178 }
 179
 180 /* Network styles */
 181 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
 182   background-image: linear-gradient(#BF9B00, #7F6700);
 183   border-color: #FFCF00;
 184 }
 185
 186 .message[category=network] > .icon {
 187   -moz-border-start: solid #FFCF00 6px;
 188 }
 189
 190 .message[category=network][severity=error] > .icon {
 191   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8);
 192 }
 193
 194 .message[category=network] > .body {
 195   display: flex;
 196 }
 197
 198 .message[category=network] .method {
 199   flex: 0 0 auto;
 200 }
 201
 202 .message[category=network]:not(.navigation-marker) .url {
 203   flex: 1 1 auto;
 204   /* Make sure the URL is very small initially, let flex change width as needed. */
 205   width: 100px;
 206   min-width: 5em;
 207   white-space: nowrap;
 208   overflow: hidden;
 209   text-overflow: ellipsis;
 210 }
 211
 212 .message[category=network] .status {
 213   flex: 0 0 auto;
 214   -moz-margin-start: 6px;
 215 }
 216
 217 .message[category=network].mixed-content .url {
 218   color: #FF0000;
 219 }
 220
 221 .message .learn-more-link {
 222   color: #3333FF;
 223   margin: 0 6px;
 224 }
 225
 226 /* CSS styles */
 227 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
 228   background-image: linear-gradient(#7575BF, #4E4E7F);
 229   border-color: #9C9CFF;
 230 }
 231
 232 .message[category=cssparser] > .icon {
 233   -moz-border-start: solid #9C9CFF 6px;
 234 }
 235
 236 .message[category=cssparser][severity=error] > .icon {
 237   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8);
 238 }
 239
 240 .message[category=cssparser][severity=warn] > .icon {
 241   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16);
 242 }
 243
 244 /* JS styles */
 245 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
 246    background-image: linear-gradient(#BF7700, #7F4F00);
 247    border-color: #FF9F00;
 248 }
 249
 250 .message[category=exception] > .icon {
 251   -moz-border-start: solid #FF9F00 6px;
 252 }
 253
 254 .message[category=exception][severity=error] > .icon {
 255   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8);
 256 }
 257
 258 .message[category=exception][severity=warn] > .icon {
 259   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16);
 260 }
 261
 262 /* Web Developer styles */
 263 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
 264    background-image: linear-gradient(#5F3B83, #3F2756);
 265    border-color: #8050B0;
 266 }
 267
 268 .message[category=console] > .icon {
 269   -moz-border-start: solid #8050B0 6px;
 270 }
 271
 272 .message[category=console][severity=error] > .icon,
 273 .message[category=output][severity=error] > .icon {
 274   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8);
 275 }
 276
 277 .message[category=console][severity=warn] > .icon {
 278   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16);
 279 }
 280
 281 .message[category=console][severity=info] > .icon {
 282   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24);
 283 }
 284
 285 /* Input and output styles */
 286 .message[category=input] > .icon,
 287 .message[category=output] > .icon {
 288   -moz-border-start: solid #A09090 6px;
 289 }
 290
 291 .message[category=input] > .icon {
 292   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32);
 293 }
 294
 295 .message[category=output] > .icon {
 296   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40);
 297 }
 298
 299 /* JSTerm Styles */
 300
 301 .jsterm-input-node,
 302 .jsterm-complete-node {
 303   -moz-padding-start: 16px;
 304   margin: 3px 0 0 0;
 305   background-color: transparent;
 306 }
 307
 308 .jsterm-input-node {
 309   background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
 310 }
 311
 312 :-moz-any(.jsterm-input-node,
 313           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 314   overflow-x: hidden;
 315 }
 316
 317 .inlined-variables-view .body {
 318   display: flex;
 319   flex-direction: column;
 320 }
 321
 322 .inlined-variables-view iframe {
 323  display: block;
 324   flex: 1;
 325   margin-top: 5px;
 326   margin-bottom: 15px;
 327   -moz-margin-end: 15px;
 328   border: 1px solid #9C9CFF;
 329   border-radius: 4px;
 330 }
 331
 332 #webconsole-sidebar > tabs {
 333   height: 0;
 334   border: none;
 335 }
 336
 337 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
 338   display: none;
 339 }
 340
 341 /* Security styles */
 342
 343 .message[category=security] > .icon {
 344   -moz-border-start: solid #FF0000 6px;
 345 }
 346
 347 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 348   background-color: #FF0000;
 349   border-color: #FFCF00;
 350 }
 351
 352 .message[category=security][severity=error] > .icon {
 353   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8);
 354 }
 355
 356 .message[category=security][severity=warn] > .icon {
 357   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16);
 358 }
 359
 360 .navigation-marker {
 361   color: #000000;
 362   background-color: #A09090;
 363   margin-top: 6px;
 364   margin-bottom: 6px;
 365   font-size: 0.9em;
 366 }
 367
 368 .navigation-marker .url {
 369   -moz-padding-end: 9px;
 370   text-decoration: none;
 371 }
 372
 373 .consoleTrace .body > div {
 374   display: flex;
 375   margin-bottom: 5px;
 376 }
 377
 378 .consoleTrace .title {
 379   display: block;
 380   flex: 1 1 auto;
 381 }
 382
 383 .stacktrace {
 384   list-style: none;
 385   padding: 0 1em 0 1.5em;
 386   margin: 0;
 387   max-height: 10em;
 388   overflow-y: auto;
 389
 390   border: 1px solid #A09090;
 391   border-radius: 3px;
 392 }
 393
 394 .stacktrace li {
 395   display: flex;
 396   margin: 0;
 397 }
 398
 399 .stacktrace .function {
 400   display: block;
 401   flex: 1 1 auto;
 402 }
 403
 404 .cm-s-mozilla a[class] {
 405   font-style: italic;
 406   text-decoration: none;
 407 }
 408
 409 .cm-s-mozilla a[class]:hover,
 410 .cm-s-mozilla a[class]:focus {
 411   text-decoration: underline;
 412 }
 413
 414 /* Open DOMNode in inspector button */
 415 .open-inspector {
 416   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 417   padding-left: 16px;
 418   margin-left: 5px;
 419   cursor: pointer;
 420 }
 421
 422 .elementNode:hover .open-inspector,
 423 .open-inspector:hover {
 424   background-position: -32px 0;
 425 }
 426
 427 .open-inspector:active {
 428   background-position: -16px 0;
 429 }
 430
 431 /* Replace these values with CSS variables as available */
 432 .theme-dark .jsterm-input-container {
 433   background-color: #000000; /* tabToolbarBackgroundColor */
 434   border-color: #9C9CFF; /* mainBackgroundColor */
 435 }
 436
 437 .theme-dark .jsterm-input-node {
 438   color: #E7ADE7; /* textColor */
 439 }
 440
 441 .theme-dark .jsterm-complete-node {
 442   color: #A09090; /* commentColor */
 443 }
 444
 445 .theme-dark .navigation-marker .url {
 446   background: #000000; /* mainBackgroundColor */
 447 }
 448
 449 .theme-dark .inlined-variables-view iframe {
 450   border-color: #A09090;
 451 }
 452
 453 .theme-dark .stacktrace {
 454   border-color: #A09090;
 455 }
 456
 457 .theme-light .jsterm-input-container {
 458   background-color: #000000; /* tabToolbarBackgroundColor */
 459   border-color: #9C9CFF; /* mainBackgroundColor */
 460 }
 461
 462 .theme-light .jsterm-input-node {
 463   color: #E7ADE7; /* textColor */
 464 }
 465
 466 .theme-light .jsterm-complete-node {
 467   color: #A09090; /* commentColor */
 468 }
 469
 470 .theme-light .navigation-marker .url {
 471   background: #000000; /* mainBackgroundColor */
 472 }
 473
 474 .theme-light .inlined-variables-view iframe {
 475   border-color: #A09090;
 476 }
 477
 478 .theme-dark .stacktrace {
 479   border-color: #A09090;
 480 }
 481
 482 @media (max-width: 500px) {
 483   .message > .timestamp {
 484     display: none;
 485   }
 486   .toolbarbutton-text {
 487     display: none;
 488   }
 489   .hud-console-filter-toolbar .webconsole-filter-button {
 490     min-width: 40px;
 491   }
 492   .hud-console-filter-toolbar .webconsole-clear-console-button {
 493     min-width: 25px;
 494   }
 495   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 496     width: 16px;
 497     height: 16px;
 498     margin-left: 1px;
 499   }
 500   .toolbarbutton-menubutton-dropmarker {
 501     margin: 0px;
 502   }
 503 }
 504
 505 @media (max-width: 300px) {
 506   .hud-console-filter-toolbar {
 507     -moz-box-orient: vertical;
 508   }
 509   .toolbarbutton-text {
 510     display: -moz-box;
 511   }
 512   .devtools-toolbarbutton {
 513     margin-top: 3px;
 514   }
 515   .hud-console-filter-toolbar .hud-filter-box,
 516   .hud-console-filter-toolbar .devtools-toolbarbutton {
 517     margin-top: 5px;
 518   }
 519 }
 520
 521 /* === END webconsole.inc.css === */