xref: /aosp_15_r20/development/tools/winscope/src/viewers/components/styles/log_component.styles.ts (revision 90c8c64db3049935a07c6143d7fd006e26f8ecca) 
1/*
2 * Copyright (C) 2024 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17export const logComponentStyles = `
18  .entries {
19    display: flex;
20    flex-direction: column;
21    flex: 1;
22    overflow: auto;
23    margin: 4px;
24    padding: 12px;
25  }
26
27  .entries .scroll {
28    flex: 1;
29  }
30
31  .scroll .entry {
32    display: flex;
33    flex-direction: row;
34    overflow-wrap: anywhere;
35  }
36
37  .headers div,
38  .entries div {
39    padding: 4px;
40  }
41
42  .filter {
43    align-content: center;
44  }
45
46  .time {
47    flex: 1;
48    min-width: 135px;
49  }
50
51  .go-to-current-time {
52    height: 100%;
53    width: fit-content;
54  }
55
56  .placeholder-text {
57    text-align: center;
58  }
59
60  .right-align {
61    text-align: end;
62    justify-content: end;
63  }
64
65  .layer-or-display-id {
66    flex: 0.75;
67    min-width: 85px;
68  }
69
70  .transaction-id {
71    flex: 1;
72    min-width: 85px;
73  }
74
75  .vsyncid {
76    flex: none;
77    width: 90px;
78  }
79
80  .pid {
81    flex: none;
82    width: 75px;
83  }
84
85  .uid {
86    flex: none;
87    width: 75px;
88  }
89
90  .transaction-type {
91    flex: 1;
92    min-width: 85px;
93  }
94
95  .flags {
96    flex: 2;
97    min-width: 100px;
98  }
99
100  .log-level {
101    flex: 1;
102    min-width: 85px;
103  }
104
105  .tag {
106    flex: 2;
107    min-width: 85px;
108  }
109
110  .source-file {
111    flex: 4;
112    min-width: 150px;
113  }
114
115  .text {
116    flex: 10;
117  }
118
119  .title-section .filters {
120    margin-top: 8px;
121  }
122
123  .transition-id {
124    flex: none;
125    width: 40px;
126  }
127
128  .entries .headers {
129    flex: 0 0 auto;
130    display: flex;
131    flex-direction: row;
132    font-weight: bold;
133    border-bottom: solid 1px rgba(0, 0, 0, 0.5);
134  }
135
136  .header {
137    display: flex;
138    align-items: center;
139  }
140
141  .transition-type {
142    flex: 1;
143    min-width: 100px;
144  }
145
146  .handler {
147    flex: 3;
148    min-width: 70px;
149  }
150
151  .participants {
152    flex: 3;
153    white-space: pre-wrap;
154    min-width: 100px;
155  }
156
157  .jank-cuj-type {
158    flex: 5;
159  }
160
161  .start-time, .end-time, .dispatch-time, .send-time {
162    flex: 2;
163    min-width: 100px;
164  }
165
166  .duration {
167    flex: none;
168    width: 60px;
169  }
170
171  .status {
172    flex: none;
173    width: 110px;
174  }
175
176  .entry .status {
177    display: flex;
178    align-items: start;
179    gap: 5px;
180    justify-content: end;
181  }
182
183  .status .mat-icon {
184    font-size: 18px;
185    width: 18px;
186    height: 18px;
187  }
188
189  .input-type {
190    flex: 2;
191  }
192  .input-source {
193    flex: 3;
194  }
195  .input-action {
196    flex: 2;
197  }
198  .input-device-id {
199    flex: 1;
200  }
201  .input-display-id {
202    flex: 1;
203    min-width: 50px;
204  }
205  .input-details {
206    flex: 4;
207  }
208  .entry .input-windows {
209    display: none;
210    flex: 0;
211  }
212  .filters .input-windows {
213    display: flex;
214    flex: 10;
215  }
216
217  .search-result {
218    flex: 1;
219  }
220`;
221