xref: /aosp_15_r20/development/tools/winscope/src/viewers/components/styles/node.styles.ts (revision 90c8c64db3049935a07c6143d7fd006e26f8ecca) 
1/*
2 * Copyright (C) 2022 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
17import {Color} from 'app/colors';
18import {selectedElementStyle} from './selected_element.styles';
19
20export const nodeStyles =
21  `
22    .node {
23        position: relative;
24        display: inline-flex;
25        padding: 1px 0;
26        width: 100%;
27    }
28
29    .node:not(.selected):not(.full-opacity):not(:hover) {
30        opacity: 0.5;
31    }
32
33    .node.clickable {
34        cursor: pointer;
35    }
36
37    .node:not(.selected).added,
38    .node:not(.selected).addedMove {
39        background-color: var(--added-element-color);
40    }
41
42    .node:not(.selected).deleted,
43    .node:not(.selected).deletedMove {
44        background-color: var(--deleted-element-color);
45    }
46
47    .node:not(.selected).modified {
48        background-color: var(--modified-element-color);
49    }
50
51    .node:hover:not(.selected) {
52        background-color: var(--hover-element-color);
53    }
54
55    .node.addedMove:after,
56    .node.deletedMove:after {
57        content: 'Moved';
58        font: 14px 'Roboto', sans-serif;
59        margin: 0 5px;
60        background-color: ${Color.CHIP_BLUE};
61        color: ${Color.TEXT_BLACK};
62        border-radius: 10px;
63        height: fit-content;
64        padding: 3px;
65    }
66` + selectedElementStyle;
67
68// FIXME: child-hover selector is not working.
69export const treeNodeDataViewStyles = `
70    .node + .children:not(.flattened):not(.with-gutter) {
71        margin-left: 12px;
72        padding-left: 11px;
73    }
74
75    .node + .children:not(.flattened).with-gutter {
76        margin-left: 23px;
77    }
78
79    .node + .children:not(.flattened) {
80        border-left: 1px solid var(--border-color);
81    }
82
83    .node.selected + .children {
84        border-left: 1px solid rgb(150, 150, 150);
85    }
86
87    .node.child-selected + .children {
88        border-left: 1px solid rgb(100, 100, 100);
89    }
90
91    .node:hover + .children {
92        border-left: 1px solid rgba(150, 150, 150, 0.75);
93    }
94
95    .node.child-hover + .children {
96        border-left: 1px solid #b4b4b4;
97    }
98`;
99
100export const nodeInnerItemStyles = `
101    .leaf-node-icon {
102        content: '';
103        display: inline-block;
104        margin-left: 40%;
105        margin-top: 40%;
106        height: 5px;
107        width: 5px;
108        border-radius: 50%;
109        background-color: ${Color.TEXT_GRAY};
110    }
111
112    .icon-wrapper, .description {
113        position: relative;
114        display: inline-block;
115    }
116
117    .icon-wrapper-show-state {
118      position: absolute;
119    }
120
121    .icon-wrapper-copy {
122        right: 0;
123    }
124
125    .toggle-tree-btn, .expand-tree-btn, .pin-node-btn, .toggle-rect-show-state-btn, .copy-btn {
126        padding: 0;
127    }
128
129    .toggle-rect-show-state-btn, .copy-btn {
130        transform: scale(0.75);
131    }
132
133    .pin-node-btn {
134        transform: scale(0.7);
135    }
136
137    .description {
138        align-items: center;
139        flex: 1 1 auto;
140        vertical-align: middle;
141        word-break: break-all;
142        flex-basis: 0;
143    }
144
145    .leaf-node-icon-wrapper {
146        margin-left: 6px;
147        min-height: 24px;
148        width: 24px;
149    }
150
151    .icon-button {
152        background: none;
153        border: none;
154        display: inline-block;
155        vertical-align: middle;
156        color: inherit;
157        cursor: pointer;
158        height: 24px;
159        width: 24px;
160        line-height: 24px;
161    }
162
163    .expand-tree-btn {
164        float: right;
165    }
166
167    .expand-tree-btn.modified {
168        background-color: var(--modified-element-color);
169    }
170
171    .expand-tree-btn.deleted,
172    .expand-tree-btn.deletedMove {
173        background-color: var(--deleted-element-color);
174    }
175
176    .expand-tree-btn.added,
177    .expand-tree-btn.addedMove {
178        background-color: var(--added-element-color);
179    }
180
181    .icon-wrapper-show-state {
182        opacity: 1;
183    }
184
185    :host:not(:hover):not(.selected) .icon-wrapper-show-state,
186    :host:not(:hover) .icon-wrapper-copy {
187        visibility: hidden;
188    }
189`;
190