8dd6f722ce9958c01206f54e3be7156ba599db39
[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: Menlo, monospace;
38     font-size: 11px;
39
40     min-height: 100%;
41 }
42
43 .console-messages > :first-child {
44     margin-top: auto;
45 }
46
47 .console-item {
48     border-top: 1px solid rgb(240, 240, 240);
49 }
50
51 .console-group.new-session .console-group-messages .console-item:first-child {
52     border-top: none;
53 }
54
55 .console-item.selected {
56     background-color: rgb(212, 212, 212);
57 }
58
59 .console-messages:focus .console-item.selected {
60     background-color: highlight;
61 }
62
63 .console-user-command-result.console-log-level::before {
64     background-image: url(../Images/UserInputResult.svg);
65 }
66
67 .console-message, .console-user-command {
68     position: relative;
69     padding: 2px 12px 2px 18px;
70     min-height: 16px;
71 }
72
73 .console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before {
74     position: absolute;
75     display: block;
76     content: "";
77     left: 4px;
78     top: 8px;
79     width: 10px;
80     height: 10px;
81     margin-top: -5px;
82 }
83
84 .console-message .bubble {
85     display: inline-block;
86     height: 14px;
87     background-color: rgb(128, 151, 189);
88     vertical-align: middle;
89     white-space: nowrap;
90     padding: 1px 4px;
91     margin-top: -2px;
92     margin-right: 4px;
93     margin-left: -18px;
94     text-align: left;
95     font-size: 11px;
96     line-height: normal;
97     font-weight: bold;
98     text-shadow: none;
99     color: white;
100     border-radius: 7px;
101
102     float: left;
103     margin-top: 0;
104     margin-left: 2px;
105 }
106
107 .console-message-text {
108     white-space: pre-wrap;
109 }
110
111 .console-message-text > span {
112     -webkit-user-select: text;
113 }
114
115 .console-group-title {
116     font-weight: bold;
117 }
118
119 .console-group-title::before {
120     background-image: -webkit-canvas(disclosure-triangle-small-open-normal);
121     background-size: 13px 13px;
122     top: 6px;
123     width: 13px;
124     height: 13px;
125     left: 3px;
126 }
127
128 .console-group.collapsed .console-group-title::before {
129     background-image: -webkit-canvas(disclosure-triangle-small-closed-normal);
130 }
131
132 .console-group.collapsed > .console-group-messages {
133     display: none;
134 }
135
136 .console-group {
137     position: relative;
138 }
139
140 .console-group.new-session {
141     border-top: 3px dashed rgb(240, 240, 240);
142 }
143
144 .console-error-level .console-message-text, .console-error-level .section .header .title {
145     color: red !important;
146 }
147
148 .console-debug-level .console-message-text {
149     color: blue;
150 }
151
152 .console-debug-level::before {
153     background-color: blue;
154 }
155
156 .console-error-level::before {
157     background-image: url(../Images/Error.svg);
158     background-size: 10px 10px;
159 }
160
161 .console-warning-level::before {
162     background-image: url(../Images/Warning.svg);
163     background-size: 10px 10px;
164 }
165
166 .console-user-command .console-message {
167     margin-left: -24px;
168     padding-right: 0;
169 }
170
171 .console-user-command::before {
172     background-image: url(../Images/UserInputPromptPrevious.svg);
173 }
174
175 .console-user-command > .console-message-text {
176     color: rgb(0, 128, 255);
177 }
178
179 .console-messages a {
180     color: rgb(33%, 33%, 33%);
181     cursor: pointer;
182 }
183
184 .console-messages a:hover {
185     color: rgb(15%, 15%, 15%);
186 }
187
188 .console-message-url {
189     float: right;
190     margin-left: 4px;
191     font-weight: normal;
192 }
193
194 .console-group-messages .section {
195     margin: 0 0 0 12px !important;
196 }
197
198 .console-group-messages .section .header {
199     padding: 0 8px 0 0;
200     background-image: none;
201     border: none;
202     min-height: 0;
203 }
204
205 .console-group-messages .section .header::before {
206     top: 2px;
207     left: 1px;
208 }
209
210 .console-group-messages .section .header .title {
211     color: black;
212     font-weight: normal;
213     line-height: normal;
214 }
215
216 .console-group-messages .section .properties li .info {
217     padding-top: 0;
218     padding-bottom: 0;
219     color: rgb(60%, 60%, 60%);
220 }
221
222 .console-group-messages .outline-disclosure {
223     outline: none;
224     padding-left: 0;
225 }
226
227 .console-group-messages .outline-disclosure > ol {
228     padding: 0 0 0 12px !important;
229 }
230
231 .console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
232     font-size: inherit;
233     line-height: 12px;
234 }
235
236 .console-group-messages .outline-disclosure.single-node li {
237     padding-left: 2px;
238 }
239
240 .console-group-messages .outline-disclosure li .selection {
241     margin-left: -6px;
242     margin-right: -6px;
243 }
244
245 .console-group-messages .add-attribute {
246     display: none;
247 }
248
249 .console-formatted-object, .console-formatted-node {
250     position: relative;
251     display: inline-block;
252     vertical-align: top;
253     color: black;
254 }
255
256 .console-formatted-object .section, .console-formatted-node .section {
257     position: static;
258 }
259
260 .console-formatted-object .properties, .console-formatted-node .properties {
261     padding-left: 0 !important;
262 }
263
264 .console-formatted-number {
265     color: rgb(28, 0, 207);
266 }
267
268 .console-formatted-string, .console-formatted-regexp {
269     white-space: pre;
270 }
271
272 .console-formatted-string {
273     color: rgb(196, 26, 22);
274 }
275
276 .console-formatted-regexp {
277     color: rgb(255, 88, 0);
278 }
279
280 .console-formatted-null, .console-formatted-undefined {
281     color: rgb(128, 128, 128);
282 }
283
284 .error-message {
285     color: red;
286 }
287
288 .auto-complete-text, .editing .auto-complete-text {
289     color: rgb(128, 128, 128) !important;
290     -webkit-user-modify: read-only;
291 }
292
293 .outline-disclosure li.hovered:not(.selected) .selection {
294     display: block;
295     left: 3px;
296     right: 3px;
297     background-color: rgba(56, 121, 217, 0.1);
298     border-radius: 5px;
299 }
300
301 .outline-disclosure li.highlighted .highlight {
302     background-color: rgb(255, 230, 179);
303     border-radius: 4px;
304     padding-bottom: 2px;
305     margin-bottom: -2px;
306 }
307
308 .outline-disclosure li.selected.highlighted .highlight {
309     background-color: transparent;
310     padding-bottom: 0;
311     margin-bottom: 0;
312 }
313
314 .outline-disclosure li .selection {
315     display: none;
316     position: absolute;
317     left: 0;
318     right: 0;
319     height: 15px;
320     z-index: -1;
321 }
322
323 .outline-disclosure li.selected .selection {
324     display: block;
325     background-color: rgb(212, 212, 212);
326 }
327
328 .outline-disclosure li.elements-drag-over .selection {
329     display: block;
330     margin-top: -2px;
331     border-top: 2px solid rgb(56, 121, 217);
332 }
333
334 .outline-disclosure ol:focus li.selected .selection {
335     background-color: rgb(56, 121, 217);
336 }
337
338 .outline-disclosure ol.search-match-not-found li.selected .selection {
339     border: 1px solid rgb(56, 121, 217);
340     background-color: white;
341 }
342
343 .outline-disclosure {
344     font-size: 11px;
345 }
346
347 .outline-disclosure > ol {
348     position: relative;
349     padding: 2px 6px !important;
350     margin: 0;
351     color: black;
352     cursor: default;
353     min-width: 100%;
354 }
355
356 .outline-disclosure, .outline-disclosure ol {
357     list-style-type: none;
358     -webkit-padding-start: 12px;
359     margin: 0;
360 }
361
362 .outline-disclosure li {
363     padding: 0 0 0 14px;
364     margin-top: 1px;
365     margin-bottom: 1px;
366     margin-left: -2px;
367     word-wrap: break-word;
368 }
369
370 .outline-disclosure li.parent {
371     margin-left: -12px
372 }
373
374 .outline-disclosure li .webkit-html-tag.close {
375     margin-left: -12px;
376 }
377
378 .outline-disclosure li.parent::before {
379     float: left;
380
381     content: "";
382
383     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
384     background-size: 8px 8px;
385     background-repeat: no-repeat;
386
387     width: 8px;
388     height: 8px;
389
390     margin-top: 2px;
391     padding-right: 2px;
392 }
393
394 .outline-disclosure li.parent.expanded::before {
395     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
396 }
397
398 .outline-disclosure ol.children {
399     display: none;
400 }
401
402 .outline-disclosure ol.children.expanded {
403     display: block;
404 }
405
406 .webkit-html-fragment.shadow {
407     opacity: 0.6;
408 }
409
410 .console-item.filtered-out {
411     display: none;
412 }
413
414 .search-bar.log-search-bar > input[type="search"] {
415     width: 150px;
416     border: 1px solid rgba(0, 0, 0, 0.35);
417     padding-left: 4px;
418 }
419
420 body.mac-platform.legacy .search-bar.log-search-bar > input[type="search"] {
421     padding-left: 0;
422 }
423
424 .search-in-progress .console-item.filtered-out-by-search {
425     display: none;
426 }
427
428 .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
429     color: black;
430     background-color: rgba(235, 215, 38, 0.2);
431     border-bottom: 1px solid rgb(237, 202, 71);
432 }
433
434 .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
435     background-color: rgba(235, 215, 38, 0.75);
436 }
437
438 /* @media reader currently blocked by: http://webkit.org/b/118096 */
439 @media reader {
440     .console-user-command::before,
441     .console-messages:focus .console-item.selected .console-user-command::before,
442     .console-user-command-result.console-log-level::before,
443     .console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
444         /* accessible label alternative for icon indicating console input/output/warning/error, etc. */
445         content: attr(data-labelprefix);
446     }
447 }