← Back to branch summary

~wasta-linux/wasta-core-wily/master

« back to all changes in this revision

Viewing changes to install-files/firefox-addons/extensions/{8a01dfcc-450f-11e5-909b-fb581d5d46b0}/chrome/browser/devtools/webconsole.css

  • Committer: Rik Shaw
  • Date: 2015-11-01 13:28:40 UTC
  • Revision ID: git-v1:59c62c9b2e4f4f1cf62db1f5dc1cf630feb99933
initial 15.10 commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
install-files/firefox-addons/extensions/{8a01dfcc-450f-11e5-909b-fb581d5d46b0}/chrome/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
/* This Source Code Form is subject to the terms of the Mozilla Public
 
6
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 
7
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
8
 
 
9
/* General output styles */
 
10
 
 
11
a {
 
12
  -moz-user-focus: normal;
 
13
  -moz-user-input: enabled;
 
14
  cursor: pointer;
 
15
  text-decoration: underline;
 
16
}
 
17
 
 
18
/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
 
19
 * assertion when loading HTML page with links in XUL iframe */
 
20
*:visited { }
 
21
 
 
22
.message {
 
23
  display: flex;
 
24
  flex: none;
 
25
  padding: 0 7px;
 
26
  width: 100%;
 
27
  box-sizing: border-box;
 
28
}
 
29
 
 
30
.message > .prefix,
 
31
.message > .timestamp {
 
32
  flex: none;
 
33
  color: GrayText;
 
34
  margin: 3px 6px 0 0;
 
35
}
 
36
 
 
37
.message > .indent {
 
38
  flex: none;
 
39
}
 
40
 
 
41
.message > .icon {
 
42
  flex: none;
 
43
  margin: 3px 6px 0 0;
 
44
  padding: 0 4px;
 
45
  height: 1em;
 
46
  align-self: flex-start;
 
47
}
 
48
 
 
49
.message > .icon::before {
 
50
  content: "";
 
51
  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
 
52
  background-position: 12px 12px;
 
53
  background-repeat: no-repeat;
 
54
  background-size: 72px 60px;
 
55
  width: 12px;
 
56
  height: 12px;
 
57
  display: inline-block;
 
58
}
 
59
 
 
60
.theme-light .message > .icon::before {
 
61
  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
 
62
}
 
63
 
 
64
.message > .message-body-wrapper {
 
65
  flex: 1 1 100%;
 
66
  margin: 3px;
 
67
}
 
68
 
 
69
.message-body-wrapper .table-widget-body {
 
70
  overflow: visible;
 
71
}
 
72
 
 
73
/* The red bubble that shows the number of times a message is repeated */
 
74
.message-repeats {
 
75
  -moz-user-select: none;
 
76
  flex: none;
 
77
  margin: 2px 6px;
 
78
  padding: 0 6px;
 
79
  height: 1.25em;
 
80
  color: white;
 
81
  background-color: red;
 
82
  border-radius: 40px;
 
83
  font: message-box;
 
84
  font-size: 0.9em;
 
85
  font-weight: 600;
 
86
}
 
87
 
 
88
.message-repeats[value="1"] {
 
89
  display: none;
 
90
}
 
91
 
 
92
.message-location {
 
93
  display: flex;
 
94
  flex: none;
 
95
  align-self: flex-start;
 
96
  justify-content: flex-end;
 
97
  width: 10em;
 
98
  margin-top: 3px;
 
99
  color: -moz-nativehyperlinktext;
 
100
  text-decoration: none;
 
101
  white-space: nowrap;
 
102
}
 
103
 
 
104
.message-location:hover,
 
105
.message-location:focus {
 
106
  text-decoration: underline;
 
107
}
 
108
 
 
109
.message-location > .filename {
 
110
  text-overflow: ellipsis;
 
111
  text-align: end;
 
112
  overflow: hidden;
 
113
}
 
114
 
 
115
.message-location > .line-number {
 
116
  flex: none;
 
117
}
 
118
 
 
119
.message-flex-body {
 
120
  display: flex;
 
121
}
 
122
 
 
123
.message-body > * {
 
124
  white-space: pre-wrap;
 
125
  word-wrap: break-word;
 
126
}
 
127
 
 
128
.message-flex-body > .message-body {
 
129
  display: block;
 
130
  flex: 1 1 auto;
 
131
  vertical-align: middle;
 
132
}
 
133
 
 
134
.message-flex-body > .message-location {
 
135
  margin-top: 0;
 
136
}
 
137
 
 
138
.jsterm-input-container {
 
139
  border-top-width: 1px;
 
140
  border-top-style: solid;
 
141
}
 
142
 
 
143
#output-wrapper {
 
144
  direction: ltr;
 
145
  overflow: auto;
 
146
}
 
147
 
 
148
#output-container {
 
149
  -moz-user-select: text;
 
150
  -moz-box-flex: 1;
 
151
  display: flex;
 
152
  flex-direction: column;
 
153
  align-items: flex-start;
 
154
}
 
155
 
 
156
#output-container.hideTimestamps > .message {
 
157
  -moz-padding-start: 0;
 
158
  -moz-margin-start: 7px;
 
159
  width: calc(100% - 7px);
 
160
}
 
161
 
 
162
#output-container.hideTimestamps > .message > .timestamp {
 
163
  display: none;
 
164
}
 
165
 
 
166
#output-container.hideTimestamps > .message > .indent {
 
167
  background-color: var(--theme-body-background);
 
168
}
 
169
 
 
170
.filtered-by-type,
 
171
.filtered-by-string {
 
172
  display: none;
 
173
}
 
174
 
 
175
.hidden-message {
 
176
  display: block;
 
177
  visibility: hidden;
 
178
  height: 0;
 
179
  overflow: hidden;
 
180
}
 
181
 
 
182
/* WebConsole colored drops */
 
183
 
 
184
.webconsole-filter-button {
 
185
  -moz-user-focus: normal;
 
186
}
 
187
 
 
188
.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 
189
  content: "";
 
190
  display: inline-block;
 
191
  height: 8px;
 
192
  width: 8px;
 
193
  border-radius: 50%;
 
194
  margin-left: 5px;
 
195
  border-width: 1px;
 
196
  border-style: solid;
 
197
}
 
198
 
 
199
/* Network styles */
 
200
.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
 
201
  background-image: linear-gradient(#444444, #000000);
 
202
  border-color: #777;
 
203
}
 
204
 
 
205
.message:hover {
 
206
  background-color: var(--theme-selection-background-semitransparent) !important;
 
207
}
 
208
 
 
209
.theme-light .message[severity=error] {
 
210
  background-color: rgba(255, 150, 150, 0.3);
 
211
}
 
212
 
 
213
.theme-dark .message[severity=error] {
 
214
  background-color: rgba(235, 83, 104, 0.17);
 
215
}
 
216
 
 
217
.console-string {
 
218
  color: var(--theme-highlight-lightorange);
 
219
}
 
220
 
 
221
.theme-selected .console-string,
 
222
.theme-selected .cm-number,
 
223
.theme-selected .cm-variable,
 
224
.theme-selected .kind-ArrayLike {
 
225
  color: #f5f7fa !important; /* Selection Text Color */
 
226
}
 
227
 
 
228
.message[category=network] > .indent {
 
229
  -moz-border-end: solid #000 6px;
 
230
}
 
231
 
 
232
.message[category=network][severity=error] > .icon::before {
 
233
  background-position: -12px 0;
 
234
}
 
235
 
 
236
.message[category=network] > .message-body {
 
237
  display: flex;
 
238
}
 
239
 
 
240
.message[category=network] .method {
 
241
  flex: none;
 
242
}
 
243
 
 
244
.message[category=network]:not(.navigation-marker) .url {
 
245
  flex: 1 1 auto;
 
246
  /* Make sure the URL is very small initially, let flex change width as needed. */
 
247
  width: 100px;
 
248
  min-width: 5em;
 
249
  white-space: nowrap;
 
250
  overflow: hidden;
 
251
  text-overflow: ellipsis;
 
252
}
 
253
 
 
254
.message[category=network] .status {
 
255
  flex: none;
 
256
  -moz-margin-start: 6px;
 
257
}
 
258
 
 
259
.message[category=network].mixed-content .url {
 
260
  color: #FF0000;
 
261
}
 
262
 
 
263
.message .learn-more-link {
 
264
  color: -moz-nativehyperlinktext;
 
265
  margin: 0 6px;
 
266
}
 
267
 
 
268
.message[category=network] .xhr {
 
269
  background-color: var(--theme-body-color-alt);
 
270
  color: var(--theme-body-background);
 
271
  border-radius: 3px;
 
272
  font-weight: bold;
 
273
  font-size: 10px;
 
274
  padding: 2px;
 
275
  line-height: 10px;
 
276
  -moz-margin-end: 1ex;
 
277
}
 
278
 
 
279
/* CSS styles */
 
280
.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
 
281
  background-image: linear-gradient(#2DC3F3, #00B6F0);
 
282
  border-color: #1BA2CC;
 
283
}
 
284
 
 
285
.message[category=cssparser] > .indent {
 
286
  -moz-border-end: solid #00b6f0 6px;
 
287
}
 
288
 
 
289
.message[category=cssparser][severity=error] > .icon::before {
 
290
  background-position: -12px -12px;
 
291
}
 
292
 
 
293
.message[category=cssparser][severity=warn] > .icon::before {
 
294
  background-position: -24px -12px;
 
295
}
 
296
 
 
297
/* JS styles */
 
298
.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
 
299
  background-image: linear-gradient(#FCB142, #FB9500);
 
300
  border-color: #E98A00;
 
301
}
 
302
 
 
303
.message[category=exception] > .indent {
 
304
  -moz-border-end: solid #fb9500 6px;
 
305
}
 
306
 
 
307
.message[category=exception][severity=error] > .icon::before {
 
308
  background-position: -12px -24px;
 
309
}
 
310
 
 
311
.message[category=exception][severity=warn] > .icon::before {
 
312
  background-position: -24px -24px;
 
313
}
 
314
 
 
315
/* Web Developer styles */
 
316
.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
 
317
  background-image: linear-gradient(#B9B9B9, #AAAAAA);
 
318
  border-color: #929292;
 
319
}
 
320
 
 
321
.message[category=console] > .indent {
 
322
  -moz-border-end: solid #cbcbcb 6px;
 
323
}
 
324
 
 
325
.message[category=console][severity=error] > .icon::before,
 
326
.message[category=output][severity=error] > .icon::before {
 
327
  background-position: -12px -36px;
 
328
}
 
329
 
 
330
.message[category=console][severity=warn] > .icon::before {
 
331
  background-position: -24px -36px;
 
332
}
 
333
 
 
334
.message[category=console][severity=info] > .icon::before {
 
335
  background-position: -36px -36px;
 
336
}
 
337
 
 
338
/* Input and output styles */
 
339
.message[category=input] > .indent,
 
340
.message[category=output] > .indent {
 
341
  -moz-border-end: solid #808080 6px;
 
342
}
 
343
 
 
344
.message[category=input] > .icon::before {
 
345
  background-position: -48px -36px;
 
346
}
 
347
 
 
348
.message[category=output] > .icon::before {
 
349
  background-position: -60px -36px;
 
350
}
 
351
 
 
352
/* JSTerm Styles */
 
353
.jsterm-input-node,
 
354
.jsterm-complete-node {
 
355
  border: none;
 
356
  padding: 0 0 0 16px;
 
357
  -moz-appearance: none;
 
358
  background-color: transparent;
 
359
}
 
360
 
 
361
.jsterm-input-node {
 
362
  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
 
363
  background-repeat: no-repeat;
 
364
  background-size: 16px 16px;
 
365
}
 
366
 
 
367
@media (min-resolution: 1.25dppx) {
 
368
  .jsterm-input-node {
 
369
    background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
 
370
  }
 
371
}
 
372
 
 
373
:-moz-any(.jsterm-input-node,
 
374
          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 
375
  overflow-x: hidden;
 
376
}
 
377
 
 
378
.inlined-variables-view .message-body {
 
379
  display: flex;
 
380
  flex-direction: column;
 
381
  resize: vertical;
 
382
  overflow: auto;
 
383
  min-height: 200px;
 
384
}
 
385
.inlined-variables-view iframe {
 
386
  display: block;
 
387
  flex: 1;
 
388
  margin-top: 5px;
 
389
  margin-bottom: 15px;
 
390
  -moz-margin-end: 15px;
 
391
  border: 1px solid rgba(128, 128, 128, .5);
 
392
  border-radius: 3px;
 
393
}
 
394
 
 
395
#webconsole-sidebar > tabs {
 
396
  height: 0;
 
397
  border: none;
 
398
}
 
399
 
 
400
.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
 
401
  display: none;
 
402
}
 
403
 
 
404
/* Security styles */
 
405
 
 
406
.message[category=security] > .indent {
 
407
  -moz-border-end: solid red 6px;
 
408
}
 
409
 
 
410
.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 
411
  background-image: linear-gradient(#FF3030, #FF7D7D);
 
412
  border-color: #D12C2C;
 
413
}
 
414
 
 
415
.message[category=security][severity=error] > .icon::before {
 
416
  background-position: -12px -48px;
 
417
}
 
418
 
 
419
.message[category=security][severity=warn] > .icon::before {
 
420
  background-position: -24px -48px;
 
421
}
 
422
 
 
423
.navigation-marker {
 
424
  color: #aaa;
 
425
  background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
 
426
  background-size: 100% 2px;
 
427
  margin-top: 6px;
 
428
  margin-bottom: 6px;
 
429
  font-size: 0.9em;
 
430
}
 
431
 
 
432
.navigation-marker .url {
 
433
  -moz-padding-end: 9px;
 
434
  text-decoration: none;
 
435
}
 
436
 
 
437
.stacktrace {
 
438
  display: none;
 
439
  list-style: none;
 
440
  padding: 0 1em 0 1.5em;
 
441
  margin: 5px 0 0 0;
 
442
  max-height: 10em;
 
443
  overflow-y: auto;
 
444
  border: 1px solid rgb(200,200,200);
 
445
  border-radius: 3px;
 
446
}
 
447
 
 
448
.consoletable {
 
449
  margin: 5px 0 0 0;
 
450
}
 
451
 
 
452
.theme-light .message[severity=error] .stacktrace {
 
453
  background-color: rgba(255, 255, 255, 0.5);
 
454
}
 
455
 
 
456
.theme-dark .message[severity=error] .stacktrace {
 
457
  background-color: rgba(0, 0, 0, 0.5);
 
458
}
 
459
 
 
460
.message[open] .stacktrace {
 
461
  display: block;
 
462
}
 
463
 
 
464
.message .theme-twisty {
 
465
  display: inline-block;
 
466
  vertical-align: middle;
 
467
  margin: 0 3px 0 0;
 
468
}
 
469
 
 
470
.stacktrace li {
 
471
  display: flex;
 
472
  margin: 0;
 
473
}
 
474
 
 
475
.stacktrace .function {
 
476
  display: block;
 
477
  flex: 1 1 auto;
 
478
}
 
479
 
 
480
.cm-s-mozilla a[class] {
 
481
  font-style: italic;
 
482
  text-decoration: none;
 
483
}
 
484
 
 
485
.cm-s-mozilla a[class]:hover,
 
486
.cm-s-mozilla a[class]:focus {
 
487
  text-decoration: underline;
 
488
}
 
489
 
 
490
/* Open DOMNode in inspector button */
 
491
.open-inspector {
 
492
  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 
493
  padding-left: 16px;
 
494
  margin-left: 5px;
 
495
  cursor: pointer;
 
496
}
 
497
 
 
498
.elementNode:hover .open-inspector,
 
499
.open-inspector:hover {
 
500
  background-position: -32px 0;
 
501
}
 
502
 
 
503
.open-inspector:active {
 
504
  background-position: -16px 0;
 
505
}
 
506
 
 
507
.jsterm-input-container {
 
508
  background-color: var(--theme-tab-toolbar-background);
 
509
  border-color: var(--theme-body-background);
 
510
}
 
511
 
 
512
.jsterm-input-node {
 
513
  color: var(--theme-content-color1);
 
514
}
 
515
 
 
516
.jsterm-complete-node {
 
517
  color: var(--theme-comment);
 
518
}
 
519
 
 
520
.navigation-marker .url {
 
521
  background: var(--theme-body-background);
 
522
}
 
523
 
 
524
.theme-dark .inlined-variables-view iframe {
 
525
  border-color: #333;
 
526
}
 
527
 
 
528
.theme-dark .stacktrace {
 
529
  border-color: #333;
 
530
}
 
531
 
 
532
.theme-light .jsterm-input-container {
 
533
  /* For light theme use a white background for the input - it looks better
 
534
     than off-white */
 
535
  background-color: #fff;
 
536
  border-color: ThreeDShadow;
 
537
}
 
538
.theme-light .navigation-marker .url {
 
539
  background: #fff;
 
540
}
 
541
 
 
542
.theme-light .inlined-variables-view iframe {
 
543
  border-color: #ccc;
 
544
}
 
545
 
 
546
.theme-light .stacktrace {
 
547
  border-color: #ccc;
 
548
}
 
549
 
 
550
@media (max-width: 500px) {
 
551
  .message > .timestamp {
 
552
    display: none;
 
553
  }
 
554
  .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
 
555
    display: none;
 
556
  }
 
557
  .hud-console-filter-toolbar .webconsole-filter-button {
 
558
    min-width: 40px;
 
559
  }
 
560
  .hud-console-filter-toolbar .webconsole-clear-console-button {
 
561
    min-width: 25px;
 
562
  }
 
563
  .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 
564
    width: 12px;
 
565
    height: 12px;
 
566
    margin-left: 1px;
 
567
  }
 
568
  .toolbarbutton-menubutton-dropmarker {
 
569
    margin: 0px;
 
570
  }
 
571
}
 
572
 
 
573
@media (max-width: 300px) {
 
574
  .hud-console-filter-toolbar {
 
575
    -moz-box-orient: vertical;
 
576
  }
 
577
  .toolbarbutton-text {
 
578
    display: -moz-box;
 
579
  }
 
580
  .devtools-toolbarbutton {
 
581
    margin-top: 3px;
 
582
  }
 
583
  .hud-console-filter-toolbar .hud-filter-box,
 
584
  .hud-console-filter-toolbar .devtools-toolbarbutton {
 
585
    margin-top: 5px;
 
586
  }
 
587
}
 
588
 
 
589
.jsterm-input-node {
 
590
  width: 98%;
 
591
}