Web Inspector: Debugger Popovers and Probes should use FormattedValue/ObjectTreeView...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ProbeSetDataGrid.css
1 /*
2  * Copyright (C) 2013 University of Washington. 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 THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
14  * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
15  * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
16  * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
17  * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
18  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
19  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
20  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
21  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .details-section.probe-set .data-grid tr.past-value td {
27     background-color: rgba(100, 100, 100, 0.2);
28     font-style: italic;
29     color: #777;
30 }
31
32 .details-section.probe-set .data-grid > td.unknown-value {
33     background-color: rgba(230, 230, 230, 0.8);
34     background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, rgba(255, 255, 255, .5) 7px, rgba(255, 255, 255, .5) 14px);
35 }
36
37 .details-section.probe-set .data-grid tr.revealed.highlighted {
38     -webkit-animation-duration: 2s;
39     animation-timing-function: ease;
40     -webkit-animation-iteration-count: infinite;
41     -webkit-animation-name: blink-frame-highlight;
42 }
43
44 @-webkit-keyframes blink-frame-highlight {
45     0% {
46         background-color: rgba(144, 111, 199, 0.8);
47     }
48
49     100% {
50         background-color: rgba(144, 111, 199, 0);
51     }
52 }
53
54 .details-section.probe-set .data-grid tr.separator {
55     border-bottom: 3px solid #555;
56 }
57
58 .details-section.probe-set .data-grid tr.separator {
59     border-bottom: 2px solid #666;
60 }
61
62 .details-section.probe-set .data-grid > tr.data-updated {
63     -webkit-animation-duration: 0.3s;
64     -webkit-animation-name: blink-probe-frame;
65 }
66
67 @-webkit-keyframes blink-probe-frame {
68     0% {
69         background-color: rgba(144, 111, 199, 1);
70     }
71
72     100% {
73         background-color: rgba(144, 111, 199, 0);
74     }
75 }
76
77 .details-section.probe-set .data-grid .selected .section * {
78     color: white;
79 }
80
81 .details-section.probe-set .data-grid .selected td.unknown-value {
82     color: black !important;
83 }
84
85 .details-section.probe-set .data-grid .section {
86     left: -6px;
87 }
88
89 .details-section.probe-set .data-grid .object-tree > :matches(.title, .object-preview)::before {
90  /* The line-height inside a data-grid is 17px instead of 13px, this will center vertically on the top line. */
91     top: 2px;
92 }