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