Web Inspector: Network Table - Redesign the waterfall popover showing timing data
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ResourceTimingBreakdownView.css
1 /*
2  * Copyright (C) 2017 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 .waterfall-popover .resource-timing-breakdown {
27     margin: 5px;
28 }
29
30 .resource-timing-breakdown > table > tr > td.label {
31     min-width: 80px;
32     color: gray;
33 }
34
35 .resource-timing-breakdown > table > tr > td.graph {
36     position: relative;
37     width: 100%;
38 }
39
40 .resource-timing-breakdown > table > tr > td.time {
41     -webkit-padding-start: 5px;
42     text-align: end;
43     color: gray;
44 }
45
46 .resource-timing-breakdown > table > tr.empty {
47     height: 8px;
48 }
49
50 .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
51     color: black;
52 }
53
54 .resource-timing-breakdown > table hr {
55     position: relative;
56     top: 2px;
57     min-width: 40px;
58     border-top: none;
59     border-left: none;
60     border-right: none;
61     border-color: gray;
62     border-bottom-width: 1px;
63 }
64
65 .resource-timing-breakdown .waterfall .block {
66     top: 1px;
67     height: 14px;
68 }