Web Inspector: Create Separate Model and View Objects for RemoteObjects / ObjectPrevi...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ObjectTreeView.css
1 /*
2  * Copyright (C) 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 .object-tree {
27     position: relative;
28 }
29
30 .object-tree > .title {
31     color: black;
32     padding: 0 8px 0 18px;
33     min-height: 18px;
34     white-space: nowrap;
35     background-origin: padding;
36     background-clip: padding;
37 }
38
39 .object-tree > :matches(.title, .object-preview)::before {
40     position: absolute;
41     top: 5px;
42     left: 7px;
43
44     width: 8px;
45     height: 8px;
46
47     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
48     background-size: 8px 8px;
49     background-repeat: no-repeat;
50
51     content: "";
52 }
53
54 .object-tree.expanded > :matches(.title, .object-preview)::before {
55     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
56 }
57
58 .object-tree.lossless-preview > :matches(.title, .object-preview)::before {
59     background: none;
60     width: 0px;
61 }
62
63 .object-tree-outline {
64     display: none;
65 }
66
67 .object-tree.expanded > .object-tree-outline {
68     display: block;
69     padding-left: 16px;
70 }
71
72 .object-tree-outline {
73     margin: 0;
74     padding: 0 6px 2px;
75     list-style: none;
76     min-height: 18px;
77     outline: none;
78 }
79
80 .object-tree-outline li {
81     margin-left: 12px;
82     white-space: nowrap;
83     text-overflow: ellipsis;
84     overflow: hidden;
85     -webkit-user-select: text;
86     cursor: default;
87 }
88
89 .object-tree-outline li.parent {
90     margin-left: 1px;
91 }
92
93 .object-tree-outline li.parent::before {
94     float: left;
95
96     content: "";
97
98     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
99     background-size: 8px 8px;
100     background-repeat: no-repeat;
101
102     width: 8px;
103     height: 8px;
104
105     margin-top: 3px;
106     padding-right: 2px;
107 }
108
109 .object-tree-outline li.parent.expanded::before {
110     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
111 }
112
113 .object-tree-outline ol {
114     display: none;
115     margin: 0;
116     -webkit-padding-start: 12px;
117     list-style: none;
118 }
119
120 .object-tree-outline ol.expanded {
121     display: block;
122 }
123
124 .object-tree-outline li .empty-message {
125     padding-top: 0;
126     padding-bottom: 0;
127     color: rgb(60%, 60%, 60%);
128 }
129
130 /* Property Colors */
131
132 .object-tree-property .name {
133     color: rgb(136, 19, 145);
134 }
135
136 .object-tree-property .name.not-enumerable {
137     opacity: 0.6;
138 }
139
140 .object-tree-property .value.error {
141     color: red;
142 }
143
144
145 /* Object Tree Type Colors */
146
147 .formatted-object, .formatted-node, .formatted-error, .formatted-map, .formatted-set, .formatted-weakmap {
148     position: relative;
149     display: inline-block;
150     vertical-align: top;
151     color: black;
152 }
153
154 .formatted-number {
155     color: rgb(28, 0, 207);
156 }
157
158 .formatted-string, .formatted-regexp {
159     white-space: pre;
160 }
161
162 .formatted-string {
163     color: rgb(196, 26, 22);
164 }
165
166 .formatted-regexp {
167     color: rgb(255, 88, 0);
168 }
169
170 .formatted-symbol {
171     color: rgb(63, 169, 156);
172 }
173
174 .formatted-null, .formatted-undefined {
175     color: rgb(128, 128, 128);
176 }
177
178
179 /* Console Overrides */
180
181 .console-group-messages .object-tree:not(.lossless-preview) {
182     margin: 0 0 0 12px !important;
183 }
184
185 .console-group-messages .object-tree:not(.lossless-preview) > :matches(.title, .object-preview) {
186     padding: 0 8px 0 0;
187 }
188
189 .console-group-messages .object-tree:not(.lossless-preview) > :matches(.title, .object-preview)::before {
190     top: 2px;
191     left: 1px;
192 }
193
194 /* FIXME: Transitioning the console over to formatted-object */
195 .console-group-messages :matches(.formatted-object, .formatted-node, .formatted-error, .formatted-map, .formatted-set, .formatted-weakmap) .object-tree,
196 .console-group-messages :matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .object-tree {
197     position: static;
198 }
199
200 .console-group-messages :matches(.formatted-object, .formatted-node, .formatted-error, .formatted-map, .formatted-set, .formatted-weakmap) .object-tree-outline,
201 .console-group-messages :matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .object-tree-outline {
202     padding-left: 0 !important;
203 }