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