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