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 /* === 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 }
  93
  94 .message > .location:hover,
  95 .message > .location:focus {
  96   text-decoration: underline;
  97 }
  98
  99 .message > .location > .filename {
 100   text-overflow: ellipsis;
 101   text-align: end;
 102   overflow: hidden;
 103   white-space: nowrap;
 104 }
 105
 106 .message > .location > .line-number {
 107   flex: 0 0 auto;
 108 }
 109
 110 .hud-msg-node[selected="true"] > .webconsole-timestamp,
 111 .hud-msg-node[selected="true"] > .webconsole-location {
 112   color: inherit;
 113 }
 114
 115 .jsterm-input-container {
 116   border-top-width: 1px;
 117   border-top-style: solid;
 118 }
 119
 120 #output-wrapper {
 121   direction: ltr;
 122   overflow: auto;
 123 }
 124
 125 #output-container {
 126   -moz-user-select: text;
 127   -moz-box-flex: 1;
 128   display: flex;
 129   flex-direction: column;
 130   align-items: flex-start;
 131 }
 132
 133 #output-container.hideTimestamps > .message > .timestamp {
 134   display: none;
 135 }
 136
 137 .filtered-by-type,
 138 .filtered-by-string {
 139   display: none;
 140 }
 141
 142 .hidden-message {
 143   display: block;
 144   visibility: hidden;
 145   height: 0;
 146   overflow: hidden;
 147 }
 148
 149 /* WebConsole colored drops */
 150
 151 .webconsole-filter-button {
 152   -moz-user-focus: normal;
 153 }
 154
 155 .webconsole-filter-button[checked] {
 156   /* color: white !important; */
 157 }
 158
 159 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 160   content: "";
 161   display: inline-block;
 162   height: 8px;
 163   width: 8px;
 164   border-radius: 50%;
 165   margin-left: 5px;
 166   border-width: 1px;
 167   border-style: solid;
 168 }
 169
 170 .webconsole-filter-button menuitem {
 171   -moz-image-region: auto;
 172 }
 173
 174 .hud-filter-box {
 175   margin-top: 0;
 176   margin-bottom: 0;
 177 }
 178
 179 /* Network styles */
 180 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
 181   background-image: linear-gradient(#BF9B00, #7F6700);
 182   border-color: #FFCF00;
 183 }
 184
 185 .message[category=network] > .icon {
 186   -moz-border-start: solid #FFCF00 6px;
 187 }
 188
 189 .message[category=network][severity=error] > .icon {
 190   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8);
 191 }
 192
 193 .message[category=network] > .body {
 194   display: flex;
 195 }
 196
 197 .message[category=network] .method {
 198   flex: 0 0 auto;
 199 }
 200
 201 .message[category=network]:not(.navigation-marker) .url {
 202   flex: 1 1 auto;
 203   /* Make sure the URL is very small initially, let flex change width as needed. */
 204   width: 100px;
 205   min-width: 5em;
 206   white-space: nowrap;
 207   overflow: hidden;
 208   text-overflow: ellipsis;
 209 }
 210
 211 .message[category=network] .status {
 212   flex: 0 0 auto;
 213   -moz-margin-start: 6px;
 214 }
 215
 216 .message[category=network].mixed-content .url {
 217   color: #FF0000;
 218 }
 219
 220 .message .learn-more-link {
 221   color: #3333FF;
 222   margin: 0 6px;
 223 }
 224
 225 /* CSS styles */
 226 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
 227   background-image: linear-gradient(#7575BF, #4E4E7F);
 228   border-color: #9C9CFF;
 229 }
 230
 231 .message[category=cssparser] > .icon {
 232   -moz-border-start: solid #9C9CFF 6px;
 233 }
 234
 235 .message[category=cssparser][severity=error] > .icon {
 236   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8);
 237 }
 238
 239 .message[category=cssparser][severity=warn] > .icon {
 240   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16);
 241 }
 242
 243 /* JS styles */
 244 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
 245    background-image: linear-gradient(#BF7700, #7F4F00);
 246    border-color: #FF9F00;
 247 }
 248
 249 .message[category=exception] > .icon {
 250   -moz-border-start: solid #FF9F00 6px;
 251 }
 252
 253 .message[category=exception][severity=error] > .icon {
 254   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8);
 255 }
 256
 257 .message[category=exception][severity=warn] > .icon {
 258   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16);
 259 }
 260
 261 /* Web Developer styles */
 262 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
 263    background-image: linear-gradient(#5F3B83, #3F2756);
 264    border-color: #8050B0;
 265 }
 266
 267 .message[category=console] > .icon {
 268   -moz-border-start: solid #8050B0 6px;
 269 }
 270
 271 .message[category=console][severity=error] > .icon,
 272 .message[category=output][severity=error] > .icon {
 273   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8);
 274 }
 275
 276 .message[category=console][severity=warn] > .icon {
 277   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16);
 278 }
 279
 280 .message[category=console][severity=info] > .icon {
 281   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24);
 282 }
 283
 284 /* Input and output styles */
 285 .message[category=input] > .icon,
 286 .message[category=output] > .icon {
 287   -moz-border-start: solid #A09090 6px;
 288 }
 289
 290 .message[category=input] > .icon {
 291   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32);
 292 }
 293
 294 .message[category=output] > .icon {
 295   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40);
 296 }
 297
 298 /* JSTerm Styles */
 299
 300 .jsterm-input-node,
 301 .jsterm-complete-node {
 302   -moz-padding-start: 16px;
 303   margin: 3px 0 0 0;
 304   background-color: transparent;
 305 }
 306
 307 .jsterm-input-node {
 308   background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
 309 }
 310
 311 :-moz-any(.jsterm-input-node,
 312           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 313   overflow-x: hidden;
 314 }
 315
 316 .inlined-variables-view .body {
 317   display: flex;
 318   flex-direction: column;
 319 }
 320
 321 .inlined-variables-view iframe {
 322  display: block;
 323   flex: 1;
 324   margin-top: 5px;
 325   margin-bottom: 15px;
 326   -moz-margin-end: 15px;
 327   border: 1px solid #9C9CFF;
 328   border-radius: 4px;
 329 }
 330
 331 #webconsole-sidebar > tabs {
 332   height: 0;
 333   border: none;
 334 }
 335
 336 /* Security styles */
 337
 338 .message[category=security] > .icon {
 339   -moz-border-start: solid #FF0000 6px;
 340 }
 341
 342 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 343   background-color: #FF0000;
 344   border-color: #FFCF00;
 345 }
 346
 347 .message[category=security][severity=error] > .icon {
 348   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8);
 349 }
 350
 351 .message[category=security][severity=warn] > .icon {
 352   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16);
 353 }
 354
 355 .navigation-marker {
 356   color: #000000;
 357   background-color: #A09090;
 358   margin-top: 6px;
 359   margin-bottom: 6px;
 360   font-size: 0.9em;
 361 }
 362
 363 .navigation-marker .url {
 364   -moz-padding-end: 9px;
 365   text-decoration: none;
 366 }
 367
 368 /* Replace these values with CSS variables as available */
 369 .theme-dark .jsterm-input-container {
 370   background-color: #000000; /* tabToolbarBackgroundColor */
 371   border-color: #9C9CFF; /* mainBackgroundColor */
 372 }
 373
 374 .theme-dark .jsterm-input-node {
 375   color: #E7ADE7; /* textColor */
 376 }
 377
 378 .theme-dark .jsterm-complete-node {
 379   color: #A09090; /* commentColor */
 380 }
 381
 382 .theme-dark .navigation-marker .url {
 383   background: #000000; /* mainBackgroundColor */
 384 }
 385
 386 .theme-dark .inlined-variables-view iframe {
 387   border-color: #A09090;
 388 }
 389
 390 /* Replace these values with CSS variables as available */
 391 .theme-light .jsterm-input-container {
 392   background-color: #000000; /* tabToolbarBackgroundColor */
 393   border-color: #9C9CFF; /* mainBackgroundColor */
 394 }
 395
 396 .theme-light .jsterm-input-node {
 397   color: #E7ADE7; /* textColor */
 398 }
 399
 400 .theme-light .jsterm-complete-node {
 401   color: #A09090; /* commentColor */
 402 }
 403
 404 .theme-light .navigation-marker .url {
 405   background: #000000; /* mainBackgroundColor */
 406 }
 407
 408 .theme-light .inlined-variables-view iframe {
 409   border-color: #A09090;
 410 }