a13620633a8906e10c949378e1b9bce100b3bf9a
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / LogContentView.css
1 /*
2  * Copyright (C) 2013 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .content-view.log {
27     overflow-y: overlay;
28     overflow-x: hidden;
29 }
30
31 .console-messages {
32     display: flex;
33     flex-direction: column;
34
35     word-wrap: break-word;
36
37     font-family: -webkit-system-font, sans-serif;
38     font-size: 12px;
39
40     min-height: 100%;
41 }
42
43 .console-user-command,
44 .console-user-command-result,
45 .console-formatted-object {
46     font-family: Menlo, monospace;
47     font-size: 11px;
48 }
49
50 .console-messages > :first-child {
51     margin-top: auto;
52 }
53
54 .console-item {
55     border-top: 1px solid rgb(240, 240, 240);
56 }
57
58 .console-group.new-session .console-group-messages .console-item:first-child {
59     border-top: none;
60 }
61
62 .console-item.selected::after {
63     position: absolute;
64     display: block;
65     content: "";
66     left: 0;
67     top: 0;
68     bottom: 0;
69     background: hsl(0, 0%, 60%);
70     width: 2px;
71 }
72
73 .console-messages:focus .console-item.selected .data-grid tr.selected {
74     background-color: hsl(210, 90%, 90%) !important;
75 }
76
77 .console-item .data-grid tr.selected {
78     background-color: hsl(210, 0%, 90%) !important;
79 }
80
81 .console-messages:focus .console-item.selected::after {
82     background: hsl(210, 100%, 49%);
83 }
84
85 .console-messages:focus .console-item.selected .go-to-link {
86     color: hsl(210, 100%, 33%);
87 }
88
89 .console-user-command-result.console-log-level::before {
90     content: url(../Images/UserInputResult.svg);
91     margin-left: 1px;
92 }
93
94 .console-message, .console-user-command {
95     position: relative;
96     padding: 4px 12px 2px 20px;
97     min-height: 21px;
98 }
99
100 .console-item::before {
101     content: " ";
102
103     position: absolute;
104     left: 4px;
105     height: 12px;
106     width: 12px;
107 }
108
109 .console-message .bubble {
110     display: inline-block;
111     height: 15px;
112     background-color: rgb(128, 151, 189);
113     vertical-align: middle;
114     white-space: nowrap;
115     padding: 1px 4px;
116     margin-top: -2px;
117     margin-right: 4px;
118     margin-left: -18px;
119     text-align: left;
120     font-size: 11px;
121     line-height: normal;
122     font-weight: bold;
123     text-shadow: none;
124     color: white;
125     border-radius: 7px;
126
127     float: left;
128     margin-top: 0;
129     margin-left: 2px;
130 }
131
132 .console-message-text {
133     white-space: pre-wrap;
134 }
135
136 .console-message-text > span {
137     -webkit-user-select: text;
138 }
139
140 .console-group-title {
141     font-weight: bold;
142 }
143
144 .console-group-title::before {
145     background-image: -webkit-canvas(disclosure-triangle-small-open-normal);
146     background-size: 13px 13px;
147     top: 6px;
148     width: 13px;
149     height: 13px;
150     left: 3px;
151 }
152
153 .console-group.collapsed .console-group-title::before {
154     background-image: -webkit-canvas(disclosure-triangle-small-closed-normal);
155 }
156
157 .console-group.collapsed > .console-group-messages {
158     display: none;
159 }
160
161 .console-group {
162     position: relative;
163 }
164
165 .console-group.new-session {
166     border-top: 3px dashed rgb(240, 240, 240);
167 }
168
169 .console-error-level {
170     background-color: hsl(0, 100%, 96%);
171     border-color: hsl(0, 100%, 92%);
172 }
173
174 .console-error-level .console-message-text,
175 .console-error-level .section .header .title {
176     color: hsl(0, 75%, 50%);
177 }
178
179 .console-debug-level .console-message-text {
180     color: blue;
181 }
182
183 .console-debug-level::before {
184     background-color: blue;
185 }
186
187 .console-error-level::before {
188     content: url(../Images/Error.svg);
189 }
190
191 .console-warning-level {
192     background-color: hsl(50, 100%, 94%);
193     border-color: hsl(50, 100%, 86%);
194 }
195
196 .console-warning-level .console-message-text {
197     color: hsl(30, 90%, 35%);
198 }
199
200 .console-warning-level::before {
201     content: url(../Images/Warning.svg);
202 }
203
204 .console-user-command .console-message {
205     margin-left: -24px;
206     padding-right: 0;
207 }
208
209 .console-user-command::before {
210     content: url(../Images/UserInputPromptPrevious.svg);
211 }
212
213 :matches(.console-warning-level, .console-error-level, .console-log-level).console-message {
214  /* Move non-monospace log/warning/error text up a bit. */
215     padding: 3px 12px 3px 20px;
216 }
217
218 :matches(.console-warning-level, .console-error-level, .console-log-level)::before {
219  /* Re-center log/warning/error icons. */
220     padding-top: 1px;
221 }
222
223 .console-user-command > .console-message-text {
224     color: rgb(0, 128, 255);
225 }
226
227 .console-messages a {
228     color: rgb(33%, 33%, 33%);
229     cursor: pointer;
230 }
231
232 .console-messages a:hover {
233     color: rgb(15%, 15%, 15%);
234 }
235
236 .console-message-url {
237     float: right;
238     margin-left: 4px;
239     font-weight: normal;
240 }
241
242 .console-group-messages .section {
243     margin: 0 0 0 12px;
244 }
245
246 .console-group-messages .section .header {
247     padding: 0 8px 0 0;
248     background-image: none;
249     border: none;
250     min-height: 0;
251 }
252
253 .console-group-messages .section .header::before {
254     top: 3px;
255     left: 1px;
256 }
257
258 .console-group-messages .section .header .title {
259     color: black;
260     font-weight: normal;
261     line-height: normal; /* @FIXME: may cause inconsistencies in line-heights of monospace and non-monospace text */
262 }
263
264 .console-group-messages .section .properties li .info {
265     padding-top: 0;
266     padding-bottom: 0;
267     color: rgb(60%, 60%, 60%);
268 }
269
270 .console-group-messages .outline-disclosure {
271     outline: none;
272     padding-left: 0;
273 }
274
275 .console-group-messages .outline-disclosure > ol {
276     padding: 0 0 0 12px !important;
277 }
278
279 .console-group-messages .outline-disclosure.single-node li {
280     padding-left: 2px;
281 }
282
283 .console-group-messages .outline-disclosure li .selection {
284     margin-left: -6px;
285     margin-right: -6px;
286 }
287
288 .console-group-messages .add-attribute {
289     display: none;
290 }
291
292 .console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap {
293     position: relative;
294     display: inline-block;
295     vertical-align: baseline;
296     color: black;
297 }
298
299 :matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .section {
300     position: static;
301 }
302
303 :matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .properties {
304     padding-left: 0 !important;
305 }
306
307 .console-formatted-number {
308     color: rgb(28, 0, 207);
309 }
310
311 .console-formatted-string, .console-formatted-regexp {
312     white-space: pre;
313 }
314
315 .console-formatted-string {
316     color: rgb(196, 26, 22);
317 }
318
319 .console-formatted-regexp {
320     color: rgb(255, 88, 0);
321 }
322
323 .console-formatted-symbol {
324     color: rgb(63, 169, 156);
325 }
326
327 .console-formatted-null, .console-formatted-undefined {
328     color: rgb(128, 128, 128);
329 }
330
331 .error-message {
332     color: red;
333 }
334
335 .auto-complete-text, .editing .auto-complete-text {
336     color: rgb(128, 128, 128) !important;
337     -webkit-user-modify: read-only;
338 }
339
340 .outline-disclosure li.hovered:not(.selected) .selection {
341     display: block;
342     left: 3px;
343     right: 3px;
344     background-color: rgba(56, 121, 217, 0.1);
345     border-radius: 5px;
346 }
347
348 .outline-disclosure li.highlighted .highlight {
349     background-color: rgb(255, 230, 179);
350     border-radius: 4px;
351     padding-bottom: 2px;
352     margin-bottom: -2px;
353 }
354
355 .outline-disclosure li.selected.highlighted .highlight {
356     background-color: transparent;
357     padding-bottom: 0;
358     margin-bottom: 0;
359 }
360
361 .outline-disclosure li .selection {
362     display: none;
363     position: absolute;
364     left: 0;
365     right: 0;
366     height: 15px;
367     z-index: -1;
368 }
369
370 .outline-disclosure li.selected .selection {
371     display: block;
372     background-color: rgb(212, 212, 212);
373 }
374
375 .outline-disclosure li.elements-drag-over .selection {
376     display: block;
377     margin-top: -2px;
378     border-top: 2px solid rgb(56, 121, 217);
379 }
380
381 .outline-disclosure ol:focus li.selected .selection {
382     background-color: rgb(56, 121, 217);
383 }
384
385 .outline-disclosure ol.search-match-not-found li.selected .selection {
386     border: 1px solid rgb(56, 121, 217);
387     background-color: white;
388 }
389
390 .outline-disclosure > ol {
391     position: relative;
392     padding: 2px 6px !important;
393     margin: 0;
394     color: black;
395     cursor: default;
396     min-width: 100%;
397 }
398
399 .outline-disclosure, .outline-disclosure ol {
400     list-style-type: none;
401     -webkit-padding-start: 12px;
402     margin: 0;
403 }
404
405 .outline-disclosure li {
406     padding: 0 0 0 14px;
407     margin-top: 0;
408     margin-bottom: 0;
409     margin-left: -2px;
410     word-wrap: break-word;
411 }
412
413 .outline-disclosure .expanded li {
414     margin-bottom: 2px;
415 }
416
417 .outline-disclosure li.parent {
418     margin-left: -12px
419 }
420
421 .outline-disclosure li .webkit-html-tag.close {
422     margin-left: -12px;
423 }
424
425 .outline-disclosure li.parent::before {
426     float: left;
427
428     content: "";
429
430     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
431     background-size: 8px 8px;
432     background-repeat: no-repeat;
433
434     width: 8px;
435     height: 8px;
436
437     margin-top: 4px;
438     padding-right: 2px;
439 }
440
441 .outline-disclosure li.parent.expanded::before {
442     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
443 }
444
445 .outline-disclosure ol.children {
446     display: none;
447 }
448
449 .outline-disclosure ol.children.expanded {
450     display: block;
451 }
452
453 .webkit-html-fragment.shadow {
454     opacity: 0.6;
455 }
456
457 .console-item.filtered-out {
458     display: none;
459 }
460
461 .search-bar.log-search-bar > input[type="search"] {
462     width: 150px;
463     border: 1px solid rgba(0, 0, 0, 0.35);
464     padding-left: 4px;
465 }
466
467 body.mac-platform.legacy .search-bar.log-search-bar > input[type="search"] {
468     padding-left: 0;
469 }
470
471 .search-in-progress .console-item.filtered-out-by-search {
472     display: none;
473 }
474
475 .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
476     color: black;
477     background-color: rgba(235, 215, 38, 0.2);
478     border-bottom: 1px solid rgb(237, 202, 71);
479 }
480
481 .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
482     background-color: rgba(235, 215, 38, 0.75);
483 }
484
485 /* @media reader currently blocked by: http://webkit.org/b/118096 */
486 @media reader {
487     .console-user-command::before,
488     .console-messages:focus .console-item.selected .console-user-command::before,
489     .console-user-command-result.console-log-level::before,
490     .console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
491         /* accessible label alternative for icon indicating console input/output/warning/error, etc. */
492         content: attr(data-labelprefix);
493     }
494 }