1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/webconsole.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,549 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/* General output styles */
1.9 +
1.10 +a {
1.11 + -moz-user-focus: normal;
1.12 + -moz-user-input: enabled;
1.13 + cursor: pointer;
1.14 + text-decoration: underline;
1.15 +}
1.16 +
1.17 +/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
1.18 + * assertion when loading HTML page with links in XUL iframe */
1.19 +*:visited { }
1.20 +
1.21 +.message {
1.22 + display: flex;
1.23 + flex: 0 0 auto;
1.24 + padding: 0 7px;
1.25 + width: 100%;
1.26 + box-sizing: border-box;
1.27 +}
1.28 +
1.29 +.message > .timestamp {
1.30 + flex: 0 0 auto;
1.31 + color: GrayText;
1.32 + margin: 4px 6px 0 0;
1.33 +}
1.34 +
1.35 +.message > .indent {
1.36 + flex: 0 0 auto;
1.37 +}
1.38 +
1.39 +.message > .icon {
1.40 + background: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 1, 0, 0) no-repeat;
1.41 + background-position: center;
1.42 + flex: 0 0 auto;
1.43 + margin: 3px 6px 0 0;
1.44 + padding: 0 4px;
1.45 + width: 8px;
1.46 + height: 1em;
1.47 + align-self: flex-start;
1.48 +}
1.49 +
1.50 +.message > .message-body-wrapper {
1.51 + flex: 1 1 100%;
1.52 + margin: 3px;
1.53 +}
1.54 +
1.55 +/* The red bubble that shows the number of times a message is repeated */
1.56 +.message-repeats {
1.57 + -moz-user-select: none;
1.58 + flex: 0 0 auto;
1.59 + margin: 2px 6px;
1.60 + padding: 0 6px;
1.61 + height: 1.25em;
1.62 + color: white;
1.63 + background-color: red;
1.64 + border-radius: 40px;
1.65 + font: message-box;
1.66 + font-size: 0.9em;
1.67 + font-weight: 600;
1.68 +}
1.69 +
1.70 +.message-repeats[value="1"] {
1.71 + display: none;
1.72 +}
1.73 +
1.74 +.message-location {
1.75 + display: flex;
1.76 + flex: 0 0 auto;
1.77 + align-self: flex-start;
1.78 + justify-content: flex-end;
1.79 + width: 10em;
1.80 + margin-top: 3px;
1.81 + color: -moz-nativehyperlinktext;
1.82 + text-decoration: none;
1.83 + white-space: nowrap;
1.84 +}
1.85 +
1.86 +.message-location:hover,
1.87 +.message-location:focus {
1.88 + text-decoration: underline;
1.89 +}
1.90 +
1.91 +.message-location > .filename {
1.92 + text-overflow: ellipsis;
1.93 + text-align: end;
1.94 + overflow: hidden;
1.95 +}
1.96 +
1.97 +.message-location > .line-number {
1.98 + flex: 0 0 auto;
1.99 +}
1.100 +
1.101 +.message-flex-body {
1.102 + display: flex;
1.103 +}
1.104 +
1.105 +.message-body {
1.106 + white-space: pre-wrap;
1.107 + word-wrap: break-word;
1.108 +}
1.109 +
1.110 +.message-flex-body > .message-body {
1.111 + display: block;
1.112 + flex: 1 1 auto;
1.113 + vertical-align: middle;
1.114 +}
1.115 +
1.116 +.message-flex-body > .message-location {
1.117 + margin-top: 0;
1.118 +}
1.119 +
1.120 +.jsterm-input-container {
1.121 + border-top-width: 1px;
1.122 + border-top-style: solid;
1.123 +}
1.124 +
1.125 +#output-wrapper {
1.126 + direction: ltr;
1.127 + overflow: auto;
1.128 +}
1.129 +
1.130 +#output-container {
1.131 + -moz-user-select: text;
1.132 + -moz-box-flex: 1;
1.133 + display: flex;
1.134 + flex-direction: column;
1.135 + align-items: flex-start;
1.136 +}
1.137 +
1.138 +#output-container.hideTimestamps > .message {
1.139 + -moz-padding-start: 0;
1.140 + -moz-margin-start: 7px;
1.141 + width: calc(100% - 7px);
1.142 +}
1.143 +
1.144 +#output-container.hideTimestamps > .message > .timestamp {
1.145 + display: none;
1.146 +}
1.147 +
1.148 +.theme-dark #output-container.hideTimestamps > .message > .indent {
1.149 + background-color: #14171a; /* .theme-body */
1.150 +}
1.151 +
1.152 +.theme-light #output-container.hideTimestamps > .message > .indent {
1.153 + background-color: #fcfcfc; /* .theme-body */
1.154 +}
1.155 +
1.156 +.filtered-by-type,
1.157 +.filtered-by-string {
1.158 + display: none;
1.159 +}
1.160 +
1.161 +.hidden-message {
1.162 + display: block;
1.163 + visibility: hidden;
1.164 + height: 0;
1.165 + overflow: hidden;
1.166 +}
1.167 +
1.168 +/* WebConsole colored drops */
1.169 +
1.170 +.webconsole-filter-button {
1.171 + -moz-user-focus: normal;
1.172 +}
1.173 +
1.174 +.webconsole-filter-button[checked] {
1.175 + color: white !important;
1.176 +}
1.177 +
1.178 +.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
1.179 + content: "";
1.180 + display: inline-block;
1.181 + height: 8px;
1.182 + width: 8px;
1.183 + border-radius: 50%;
1.184 + margin-left: 5px;
1.185 + border-width: 1px;
1.186 + border-style: solid;
1.187 +}
1.188 +
1.189 +/* Network styles */
1.190 +.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
1.191 + background-image: linear-gradient(#444444, #000000);
1.192 + border-color: #777;
1.193 +}
1.194 +
1.195 +.theme-light .message[severity=error] {
1.196 + background-color: rgba(255, 150, 150, 0.3);
1.197 +}
1.198 +
1.199 +.theme-dark .message[severity=error] {
1.200 + background-color: rgba(235, 83, 104, 0.17);
1.201 +}
1.202 +
1.203 +.theme-dark .console-string {
1.204 + color: #d99b28;
1.205 +}
1.206 +
1.207 +.theme-light .console-string {
1.208 + color: hsl(24,85%,39%);
1.209 +}
1.210 +
1.211 +.message[category=network] > .indent {
1.212 + -moz-border-end: solid #000 6px;
1.213 +}
1.214 +
1.215 +.message[category=network][severity=error] > .icon {
1.216 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 16, 8, 8);
1.217 +}
1.218 +
1.219 +.message[category=network] > .message-body {
1.220 + display: flex;
1.221 +}
1.222 +
1.223 +.message[category=network] .method {
1.224 + flex: 0 0 auto;
1.225 +}
1.226 +
1.227 +.message[category=network]:not(.navigation-marker) .url {
1.228 + flex: 1 1 auto;
1.229 + /* Make sure the URL is very small initially, let flex change width as needed. */
1.230 + width: 100px;
1.231 + min-width: 5em;
1.232 + white-space: nowrap;
1.233 + overflow: hidden;
1.234 + text-overflow: ellipsis;
1.235 +}
1.236 +
1.237 +.message[category=network] .status {
1.238 + flex: 0 0 auto;
1.239 + -moz-margin-start: 6px;
1.240 +}
1.241 +
1.242 +.message[category=network].mixed-content .url {
1.243 + color: #FF0000;
1.244 +}
1.245 +
1.246 +.message .learn-more-link {
1.247 + color: -moz-nativehyperlinktext;
1.248 + margin: 0 6px;
1.249 +}
1.250 +
1.251 +/* CSS styles */
1.252 +.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
1.253 + background-image: linear-gradient(#2DC3F3, #00B6F0);
1.254 + border-color: #1BA2CC;
1.255 +}
1.256 +
1.257 +.message[category=cssparser] > .indent {
1.258 + -moz-border-end: solid #00b6f0 6px;
1.259 +}
1.260 +
1.261 +.message[category=cssparser][severity=error] > .icon {
1.262 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 16, 16, 8);
1.263 +}
1.264 +
1.265 +.message[category=cssparser][severity=warn] > .icon {
1.266 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 24, 16, 16);
1.267 +}
1.268 +
1.269 +/* JS styles */
1.270 +.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
1.271 + background-image: linear-gradient(#FCB142, #FB9500);
1.272 + border-color: #E98A00;
1.273 +}
1.274 +
1.275 +.message[category=exception] > .indent {
1.276 + -moz-border-end: solid #fb9500 6px;
1.277 +}
1.278 +
1.279 +.message[category=exception][severity=error] > .icon {
1.280 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 16, 24, 8);
1.281 +}
1.282 +
1.283 +.message[category=exception][severity=warn] > .icon {
1.284 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 24, 24, 16);
1.285 +}
1.286 +
1.287 +/* Web Developer styles */
1.288 +.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
1.289 + background-image: linear-gradient(#B9B9B9, #AAAAAA);
1.290 + border-color: #929292;
1.291 +}
1.292 +
1.293 +.message[category=console] > .indent {
1.294 + -moz-border-end: solid #cbcbcb 6px;
1.295 +}
1.296 +
1.297 +.message[category=console][severity=error] > .icon,
1.298 +.message[category=output][severity=error] > .icon {
1.299 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 16, 32, 8);
1.300 +}
1.301 +
1.302 +.message[category=console][severity=warn] > .icon {
1.303 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 24, 32, 16);
1.304 +}
1.305 +
1.306 +.message[category=console][severity=info] > .icon {
1.307 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 32, 32, 24);
1.308 +}
1.309 +
1.310 +/* Input and output styles */
1.311 +.message[category=input] > .indent,
1.312 +.message[category=output] > .indent {
1.313 + -moz-border-end: solid #808080 6px;
1.314 +}
1.315 +
1.316 +.message[category=input] > .icon {
1.317 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 40, 32, 32);
1.318 +}
1.319 +
1.320 +.message[category=output] > .icon {
1.321 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 48, 32, 40);
1.322 +}
1.323 +
1.324 +/* JSTerm Styles */
1.325 +.jsterm-input-node,
1.326 +.jsterm-complete-node {
1.327 + border: none;
1.328 + padding: 0 0 0 16px;
1.329 + -moz-appearance: none;
1.330 + background-color: transparent;
1.331 +}
1.332 +
1.333 +.jsterm-input-node {
1.334 + background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
1.335 +}
1.336 +
1.337 +:-moz-any(.jsterm-input-node,
1.338 + .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
1.339 + overflow-x: hidden;
1.340 +}
1.341 +
1.342 +.inlined-variables-view .message-body {
1.343 + display: flex;
1.344 + flex-direction: column;
1.345 +}
1.346 +.inlined-variables-view iframe {
1.347 + display: block;
1.348 + flex: 1;
1.349 + margin-top: 5px;
1.350 + margin-bottom: 15px;
1.351 + -moz-margin-end: 15px;
1.352 + border: 1px solid rgba(128, 128, 128, .5);
1.353 + border-radius: 3px;
1.354 +}
1.355 +
1.356 +#webconsole-sidebar > tabs {
1.357 + height: 0;
1.358 + border: none;
1.359 +}
1.360 +
1.361 +.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
1.362 + display: none;
1.363 +}
1.364 +
1.365 +/* Security styles */
1.366 +
1.367 +.message[category=security] > .indent {
1.368 + -moz-border-end: solid red 6px;
1.369 +}
1.370 +
1.371 +.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
1.372 + background-image: linear-gradient(#FF3030, #FF7D7D);
1.373 + border-color: #D12C2C;
1.374 +}
1.375 +
1.376 +.message[category=security][severity=error] > .icon {
1.377 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 16, 40, 8);
1.378 +}
1.379 +
1.380 +.message[category=security][severity=warn] > .icon {
1.381 + background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 24, 40, 16);
1.382 +}
1.383 +
1.384 +.navigation-marker {
1.385 + color: #aaa;
1.386 + background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
1.387 + background-size: 100% 2px;
1.388 + margin-top: 6px;
1.389 + margin-bottom: 6px;
1.390 + font-size: 0.9em;
1.391 +}
1.392 +
1.393 +.navigation-marker .url {
1.394 + -moz-padding-end: 9px;
1.395 + text-decoration: none;
1.396 +}
1.397 +
1.398 +.stacktrace {
1.399 + display: none;
1.400 + list-style: none;
1.401 + padding: 0 1em 0 1.5em;
1.402 + margin: 5px 0 0 0;
1.403 + max-height: 10em;
1.404 + overflow-y: auto;
1.405 + border: 1px solid rgb(200,200,200);
1.406 + border-radius: 3px;
1.407 +}
1.408 +
1.409 +.theme-light .message[severity=error] .stacktrace {
1.410 + background-color: rgba(255, 255, 255, 0.5);
1.411 +}
1.412 +
1.413 +.theme-dark .message[severity=error] .stacktrace {
1.414 + background-color: rgba(0, 0, 0, 0.5);
1.415 +}
1.416 +
1.417 +.message[open] .stacktrace {
1.418 + display: block;
1.419 +}
1.420 +
1.421 +.message .theme-twisty {
1.422 + display: inline-block;
1.423 + vertical-align: middle;
1.424 + margin: 0 3px 0 0;
1.425 +}
1.426 +
1.427 +.stacktrace li {
1.428 + display: flex;
1.429 + margin: 0;
1.430 +}
1.431 +
1.432 +.stacktrace .function {
1.433 + display: block;
1.434 + flex: 1 1 auto;
1.435 +}
1.436 +
1.437 +.cm-s-mozilla a[class] {
1.438 + font-style: italic;
1.439 + text-decoration: none;
1.440 +}
1.441 +
1.442 +.cm-s-mozilla a[class]:hover,
1.443 +.cm-s-mozilla a[class]:focus {
1.444 + text-decoration: underline;
1.445 +}
1.446 +
1.447 +/* Open DOMNode in inspector button */
1.448 +.open-inspector {
1.449 + background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
1.450 + padding-left: 16px;
1.451 + margin-left: 5px;
1.452 + cursor: pointer;
1.453 +}
1.454 +
1.455 +.elementNode:hover .open-inspector,
1.456 +.open-inspector:hover {
1.457 + background-position: -32px 0;
1.458 +}
1.459 +
1.460 +.open-inspector:active {
1.461 + background-position: -16px 0;
1.462 +}
1.463 +
1.464 +/* Replace these values with CSS variables as available */
1.465 +.theme-dark .jsterm-input-container {
1.466 + background-color: #252c33; /* tabToolbarBackgroundColor */
1.467 + border-color: #14171a; /* mainBackgroundColor */
1.468 +}
1.469 +
1.470 +.theme-dark .jsterm-input-node {
1.471 + color: #a9bacb; /* textColor */
1.472 +}
1.473 +
1.474 +.theme-dark .jsterm-complete-node {
1.475 + color: #5c6773; /* commentColor */
1.476 +}
1.477 +
1.478 +.theme-dark .navigation-marker .url {
1.479 + background: #14171a; /* mainBackgroundColor */
1.480 +}
1.481 +
1.482 +.theme-dark .inlined-variables-view iframe {
1.483 + border-color: #333;
1.484 +}
1.485 +
1.486 +.theme-dark .stacktrace {
1.487 + border-color: #333;
1.488 +}
1.489 +
1.490 +.theme-light .jsterm-input-container {
1.491 + background-color: #fff; /* mainBackgroundColor */
1.492 + border-color: ThreeDShadow;
1.493 +}
1.494 +
1.495 +.theme-light .jsterm-input-node {
1.496 + color: black; /* textColor */
1.497 +}
1.498 +
1.499 +.theme-light .jsterm-complete-node {
1.500 + color: hsl(90,2%,46%); /* commentColor */
1.501 +}
1.502 +
1.503 +.theme-light .navigation-marker .url {
1.504 + background: #fff; /* mainBackgroundColor */
1.505 +}
1.506 +
1.507 +.theme-light .inlined-variables-view iframe {
1.508 + border-color: #ccc;
1.509 +}
1.510 +
1.511 +.theme-light .stacktrace {
1.512 + border-color: #ccc;
1.513 +}
1.514 +
1.515 +@media (max-width: 500px) {
1.516 + .message > .timestamp {
1.517 + display: none;
1.518 + }
1.519 + .toolbarbutton-text {
1.520 + display: none;
1.521 + }
1.522 + .hud-console-filter-toolbar .webconsole-filter-button {
1.523 + min-width: 40px;
1.524 + }
1.525 + .hud-console-filter-toolbar .webconsole-clear-console-button {
1.526 + min-width: 25px;
1.527 + }
1.528 + .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
1.529 + width: 16px;
1.530 + height: 16px;
1.531 + margin-left: 1px;
1.532 + }
1.533 + .toolbarbutton-menubutton-dropmarker {
1.534 + margin: 0px;
1.535 + }
1.536 +}
1.537 +
1.538 +@media (max-width: 300px) {
1.539 + .hud-console-filter-toolbar {
1.540 + -moz-box-orient: vertical;
1.541 + }
1.542 + .toolbarbutton-text {
1.543 + display: -moz-box;
1.544 + }
1.545 + .devtools-toolbarbutton {
1.546 + margin-top: 3px;
1.547 + }
1.548 + .hud-console-filter-toolbar .hud-filter-box,
1.549 + .hud-console-filter-toolbar .devtools-toolbarbutton {
1.550 + margin-top: 5px;
1.551 + }
1.552 +}
