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