62eade6ffc575479144b7426908645fb97eedec8
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ConsoleMessageView.css
1 /*
2  * Copyright (C) 2013-2015 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 .console-message, .console-user-command {
27     position: relative;
28     padding: 4px 12px 2px 20px;
29     min-height: 21px;
30 }
31
32 .console-user-command.special-user-log > .console-message-text {
33     padding: 0 6px 1px;
34     border-radius: 3px;
35     border: 1px solid transparent;
36     background-color: var(--selected-background-color);
37     color: var(--selected-foreground-color);
38     font: 10px -webkit-system-font, sans-serif;
39     -webkit-user-select: none;
40 }
41
42 .console-message .repeat-count {
43     display: inline-block;
44     float: left;
45
46     padding: 1px 4px;
47     margin: 0 4px 0 0;
48
49     height: 15px;
50     background-color: hsl(217, 31%, 62%);
51     vertical-align: middle;
52     white-space: nowrap;
53
54     font-size: 11px;
55     text-align: left;
56     line-height: normal;
57     font-weight: bold;
58     color: white;
59     border-radius: 7px;
60 }
61
62 .console-message-text {
63     white-space: pre-wrap;
64 }
65
66 .console-message-text > span {
67     -webkit-user-select: text;
68 }
69
70 .console-message-text > span > :matches(.console-message-enclosed, .console-message-preview, .console-message-preview-divider) {
71     -webkit-user-select: none;
72 }
73
74 .console-message.expandable .console-top-level-message::before {
75     display: inline-block;
76
77     vertical-align: baseline;
78     margin-bottom: -2px;
79     margin-right: 2px;
80
81     width: 13px;
82     height: 13px;
83
84     background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
85     background-size: 13px 13px;
86     background-repeat: no-repeat;
87     background-position: center;
88
89     content: "";
90 }
91
92 .console-message.expandable.expanded .console-top-level-message::before {
93     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
94 }
95
96 .console-message.expandable.expanded :matches(.console-message-preview, .console-message-preview-divider):not(.inline-lossless) {
97     display: none;
98 }
99
100 .console-message-preview-divider {
101     color: var(--console-secondary-text-color);
102 }
103
104 .console-message-enclosed {
105     font-family: Menlo, monospace;
106     font-size: 11px;
107     color: var(--console-secondary-text-color);
108 }
109
110 .console-message .console-message-extra-parameters-container,
111 .console-message .console-message-stack-trace-container {
112     margin: 0;
113     padding: 2px 0 0 0;
114     list-style: none;
115     outline: none;
116     display: none;
117 }
118
119 .console-message .console-message-stack-trace-container {
120     margin-left: 20px;
121 }
122
123 .console-message.expandable.expanded .console-message-extra-parameters-container,
124 .console-message.expandable.expanded .console-message-stack-trace-container {
125     display: block;
126 }
127
128 .console-message .console-message-extra-parameters-container > li,
129 .console-message .console-message-stack-trace-container > li {
130     white-space: nowrap;
131     text-overflow: ellipsis;
132     overflow: hidden;
133     -webkit-user-select: text;
134     cursor: default;
135     padding: 2px 0 2px 15px;
136 }
137
138 .console-message .console-message-extra-parameters-container > li::before {
139     display: inline-block;
140     width: 15px;
141     margin-left: -15px;
142     text-align: center;
143
144     height: 13px;
145     content: "•";
146
147     font-family: -webkit-system-font, sans-serif;
148     font-size: 11px;
149     color: var(--console-secondary-text-color);
150
151     vertical-align: top;
152 }
153
154 .console-error-level {
155     background-color: hsl(0, 100%, 96%);
156     border-color: hsl(0, 100%, 92%);
157 }
158
159 .console-error-level .console-message-text {
160     color: hsl(0, 75%, 45%);
161 }
162
163 .console-warning-level {
164     background-color: hsl(50, 100%, 94%);
165     border-color: hsl(40, 100%, 90%);
166 }
167
168 .console-warning-level .console-message-text {
169     color: hsl(30, 90%, 35%);
170 }
171
172 .console-user-command .console-message {
173     margin-left: -24px;
174     padding-right: 0;
175 }
176
177 .console-log-level::before {
178     content: url(../Images/Log.svg);
179 }
180
181 .console-info-level::before {
182     content: url(../Images/Info.svg);
183 }
184
185 .console-debug-level::before {
186     content: url(../Images/Debug.svg);
187 }
188
189 .console-error-level::before {
190     content: url(../Images/Error.svg);
191 }
192
193 .console-warning-level::before {
194     content: url(../Images/Warning.svg);
195 }
196
197 .console-user-command::before {
198     content: url(../Images/UserInputPromptPrevious.svg);
199 }
200
201 :matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level).console-message {
202  /* Move non-monospace log/warning/error text up a bit. */
203     padding: 3px 12px 3px 20px;
204 }
205
206 :matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level)::before {
207  /* Re-center log/warning/error icons. */
208     padding-top: 1px;
209 }
210
211 .console-user-command > .console-message-text {
212     color: hsl(209, 100%, 50%);
213     -webkit-user-select: text;
214 }
215
216 .console-saved-variable {
217     font-style: normal;
218     color: var(--console-secondary-text-color);
219 }
220
221 .console-user-command,
222 .console-user-command-result {
223     font-family: Menlo, monospace;
224     font-size: 11px;
225 }
226
227 .console-user-command-result.console-log-level::before {
228     content: url(../Images/UserInputResult.svg);
229     margin-left: 1px;
230 }
231
232 .console-message .console-message-location {
233     float: right;
234     font-family: -webkit-system-font, sans-serif;
235     font-size: 12px;
236     font-weight: normal;
237 }
238
239 .console-message-extra-parameter .stack-trace {
240     display: inline-block;
241 }
242
243 .console-message-location.call-frame {
244     display: inline-block;
245     max-width: 100%;
246     max-height: 16px;
247     overflow: hidden;
248     text-overflow: ellipsis;
249 }
250
251 .console-message-location.call-frame > .title {
252     max-width: 20vw;
253     overflow: hidden;
254     text-overflow: ellipsis;
255     display: inline-block;
256 }
257
258 .console-message-location.call-frame > .subtitle > .source-link {
259     max-width: 30vw;
260 }
261
262 .console-message .go-to-link {
263     color: hsla(0, 0%, 0%, 0.6);
264     text-decoration: none;
265 }
266
267 .console-message .go-to-link:hover,
268 .console-message .go-to-link:focus {
269     color: hsl(210, 100%, 40%);
270 }
271
272 .console-message .console-message-url::before {
273     content: ' ';
274 }
275
276 .console-top-level-message .object-tree {
277     display: block;
278 }
279
280 .console-top-level-message .object-tree .object-tree {
281     display: inline-block;
282 }
283
284 @media (prefers-dark-interface) {
285     .console-message .syntax-highlighted {
286         background-color: unset;
287     }
288
289     .console-warning-level .console-message-text {
290         color: hsl(53, 80%, 55%);
291     }
292
293     .console-error-level .console-message-text {
294         color: hsl(10, 100%, 70%);
295     }
296
297     .console-user-command > .console-message-text {
298         color: hsl(209, 100%, 70%);
299     }
300
301     .console-message .repeat-count {
302         background-color: hsl(218, 70%, 48%);
303     }
304 }