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