Web Inspector: Save Console Evaluations into Command Line variables $1-$99 ($n)
[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-saved-variable {
227     font-style: normal;
228     color: hsl(0, 0%, 67%);
229 }
230
231 .console-messages a {
232     color: rgb(33%, 33%, 33%);
233     cursor: pointer;
234 }
235
236 .console-messages a:hover {
237     color: rgb(15%, 15%, 15%);
238 }
239
240 .console-message-url {
241     float: right;
242     margin-left: 4px;
243     font-weight: normal;
244 }
245
246 .console-group-messages .section {
247     margin: 0 0 0 12px;
248 }
249
250 .console-group-messages .section .header {
251     padding: 0 8px 0 0;
252     background-image: none;
253     border: none;
254     min-height: 0;
255 }
256
257 .console-group-messages .section .header::before {
258     top: 3px;
259     left: 1px;
260 }
261
262 .console-group-messages .section .header .title {
263     color: black;
264     font-weight: normal;
265     line-height: normal; /* @FIXME: may cause inconsistencies in line-heights of monospace and non-monospace text */
266 }
267
268 .console-group-messages .section .properties li .info {
269     padding-top: 0;
270     padding-bottom: 0;
271     color: rgb(60%, 60%, 60%);
272 }
273
274 .console-group-messages .outline-disclosure {
275     outline: none;
276     padding-left: 0;
277 }
278
279 .console-group-messages .outline-disclosure > ol {
280     padding: 0 0 0 12px !important;
281 }
282
283 .console-group-messages .outline-disclosure.single-node li {
284     padding-left: 2px;
285 }
286
287 .console-group-messages .outline-disclosure li .selection {
288     margin-left: -6px;
289     margin-right: -6px;
290 }
291
292 .console-group-messages .add-attribute {
293     display: none;
294 }
295
296 .error-message {
297     color: red;
298 }
299
300 .auto-complete-text, .editing .auto-complete-text {
301     color: rgb(128, 128, 128) !important;
302     -webkit-user-modify: read-only;
303 }
304
305 .outline-disclosure li.hovered:not(.selected) .selection {
306     display: block;
307     left: 3px;
308     right: 3px;
309     background-color: rgba(56, 121, 217, 0.1);
310     border-radius: 5px;
311 }
312
313 .outline-disclosure li.highlighted .highlight {
314     background-color: rgb(255, 230, 179);
315     border-radius: 4px;
316     padding-bottom: 2px;
317     margin-bottom: -2px;
318 }
319
320 .outline-disclosure li.selected.highlighted .highlight {
321     background-color: transparent;
322     padding-bottom: 0;
323     margin-bottom: 0;
324 }
325
326 .outline-disclosure li .selection {
327     display: none;
328     position: absolute;
329     left: 0;
330     right: 0;
331     height: 15px;
332     z-index: -1;
333 }
334
335 .outline-disclosure li.selected .selection {
336     display: block;
337     background-color: rgb(212, 212, 212);
338 }
339
340 .outline-disclosure li.elements-drag-over .selection {
341     display: block;
342     margin-top: -2px;
343     border-top: 2px solid rgb(56, 121, 217);
344 }
345
346 .outline-disclosure ol:focus li.selected .selection {
347     background-color: rgb(56, 121, 217);
348 }
349
350 .outline-disclosure ol.search-match-not-found li.selected .selection {
351     border: 1px solid rgb(56, 121, 217);
352     background-color: white;
353 }
354
355 .outline-disclosure > ol {
356     position: relative;
357     padding: 2px 6px !important;
358     margin: 0;
359     color: black;
360     cursor: default;
361     min-width: 100%;
362 }
363
364 .outline-disclosure, .outline-disclosure ol {
365     list-style-type: none;
366     -webkit-padding-start: 12px;
367     margin: 0;
368 }
369
370 .outline-disclosure li {
371     padding: 0 0 0 14px;
372     margin-top: 0;
373     margin-bottom: 0;
374     margin-left: -2px;
375     word-wrap: break-word;
376 }
377
378 .outline-disclosure .expanded li {
379     margin-bottom: 2px;
380 }
381
382 .outline-disclosure li.parent {
383     margin-left: -12px
384 }
385
386 .outline-disclosure li .webkit-html-tag.close {
387     margin-left: -12px;
388 }
389
390 .outline-disclosure li.parent::before {
391     float: left;
392
393     content: "";
394
395     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
396     background-size: 8px 8px;
397     background-repeat: no-repeat;
398
399     width: 8px;
400     height: 8px;
401
402     margin-top: 4px;
403     padding-right: 2px;
404 }
405
406 .outline-disclosure li.parent.expanded::before {
407     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
408 }
409
410 .outline-disclosure ol.children {
411     display: none;
412 }
413
414 .outline-disclosure ol.children.expanded {
415     display: block;
416 }
417
418 .webkit-html-fragment.shadow {
419     opacity: 0.6;
420 }
421
422 .console-item.filtered-out {
423     display: none;
424 }
425
426 .search-bar.log-search-bar > input[type="search"] {
427     width: 150px;
428     border: 1px solid rgba(0, 0, 0, 0.35);
429     padding-left: 4px;
430 }
431
432 body.mac-platform.legacy .search-bar.log-search-bar > input[type="search"] {
433     padding-left: 0;
434 }
435
436 .search-in-progress .console-item.filtered-out-by-search {
437     display: none;
438 }
439
440 .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
441     color: black;
442     background-color: rgba(235, 215, 38, 0.2);
443     border-bottom: 1px solid rgb(237, 202, 71);
444 }
445
446 .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
447     background-color: rgba(235, 215, 38, 0.75);
448 }
449
450 /* @media reader currently blocked by: http://webkit.org/b/118096 */
451 @media reader {
452     .console-user-command::before,
453     .console-messages:focus .console-item.selected .console-user-command::before,
454     .console-user-command-result.console-log-level::before,
455     .console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
456         /* accessible label alternative for icon indicating console input/output/warning/error, etc. */
457         content: attr(data-labelprefix);
458     }
459 }