Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: skin/devtools-panel.css

Issue 5646124035604480: Issue 154 - Added UI for devtools panel on Chrome (Closed)
Left Patch Set: Created Jan. 7, 2015, 1:36 p.m.
Right Patch Set: Added new request types Created Jan. 28, 2016, 7:37 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « ext/devtools.js ('k') | no next file » | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 * 1 *
2 { 2 {
3 font-family: 'Lucida Grande', 'Segoe UI', Tahoma, Arial, sans-serif; 3 font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Tahoma, Arial, sans-serif;
Thomas Greiner 2015/01/12 10:37:54 In the Networks panel they're using the following
Sebastian Noack 2015/01/12 11:55:07 Done.
4 font-size: 11px; 4 font-size: 11px;
5 box-sizing: border-box; 5 box-sizing: border-box;
6 }
7
8 html
9 {
10 height: 100%;
11 overflow: hidden;
6 } 12 }
7 13
8 body 14 body
9 { 15 {
10 margin: 0; 16 margin: 0;
11 color: #303942; 17 color: #303942;
12 display: flex; 18 display: flex;
Thomas Greiner 2015/01/12 10:37:54 According to http://caniuse.com/#search=flex Chrom
Sebastian Noack 2015/01/12 11:55:07 Yep, we are dropping support for Chrome 28 (see th
Thomas Greiner 2015/01/16 18:17:21 Ok, thanks for the info.
13 height: 100%; 19 height: 100%;
14 flex-direction: column; 20 flex-direction: column;
15 } 21 }
16 22
17 table 23 table
18 { 24 {
19 table-layout: fixed; 25 table-layout: fixed;
20 width: 100%; 26 width: 100%;
21 border-collapse: collapse; 27 border-collapse: collapse;
22 } 28 }
23 29
24 table * 30 table *
25 { 31 {
26 overflow: hidden; 32 overflow: hidden;
27 text-overflow: ellipsis; 33 text-overflow: ellipsis;
28 } 34 }
29 35
30 td 36 td
31 { 37 {
32 padding: 3px; 38 padding: 3px;
33 white-space: nowrap; 39 white-space: nowrap;
34 }
35
36 td:nth-child(2)
37 {
38 border-left: 1px solid #cdcdcd; 40 border-left: 1px solid #cdcdcd;
39 } 41 }
40 42
41 #header 43 td:first-child
44 {
45 border-left-style: none;
46 }
47
48 col:nth-child(2)
49 {
50 width: 115px;
51 }
52
53 col:nth-child(3)
54 {
55 width: 50%;
56 }
57
58 header
42 { 59 {
43 overflow-y: scroll; 60 overflow-y: scroll;
44 border-bottom: 1px solid #cdcdcd; 61 border-bottom: 1px solid #cdcdcd;
45 flex-shrink: 0; 62 flex-shrink: 0;
46 } 63 }
47 64
48 /* 65 /*
49 * We have to add a scrollbar to the header to have the columns there aligned 66 * We have to add a scrollbar to the header to have the columns there aligned
50 * with the table below. But we don't want the scrollbar to be visible there. 67 * with the table below. But we don't want the scrollbar to be visible there.
51 */ 68 */
52 #header::-webkit-scrollbar 69 header::-webkit-scrollbar
53 { 70 {
54 visibility: hidden; 71 visibility: hidden;
55 } 72 }
56 73
57 #items 74 #items
58 { 75 {
59 overflow-y: scroll; 76 overflow-y: scroll;
60 flex-grow: 1; 77 flex-grow: 1;
61 } 78 }
62 79
(...skipping 25 matching lines...) Expand all
88 } 105 }
89 106
90 #items[data-filter-state=blocked] tr:not([data-state=blocked]), 107 #items[data-filter-state=blocked] tr:not([data-state=blocked]),
91 #items[data-filter-state=whitelisted] tr:not([data-state=whitelisted]), 108 #items[data-filter-state=whitelisted] tr:not([data-state=whitelisted]),
92 #items[data-filter-type=SUBDOCUMENT] tr:not([data-type=SUBDOCUMENT]), 109 #items[data-filter-type=SUBDOCUMENT] tr:not([data-type=SUBDOCUMENT]),
93 #items[data-filter-type=IMAGE] tr:not([data-type=IMAGE]), 110 #items[data-filter-type=IMAGE] tr:not([data-type=IMAGE]),
94 #items[data-filter-type=STYLESHEET] tr:not([data-type=STYLESHEET]), 111 #items[data-filter-type=STYLESHEET] tr:not([data-type=STYLESHEET]),
95 #items[data-filter-type=SCRIPT] tr:not([data-type=SCRIPT]), 112 #items[data-filter-type=SCRIPT] tr:not([data-type=SCRIPT]),
96 #items[data-filter-type=OBJECT] tr:not([data-type=OBJECT]), 113 #items[data-filter-type=OBJECT] tr:not([data-type=OBJECT]),
97 #items[data-filter-type=XMLHTTPREQUEST] tr:not([data-type=XMLHTTPREQUEST]), 114 #items[data-filter-type=XMLHTTPREQUEST] tr:not([data-type=XMLHTTPREQUEST]),
115 #items[data-filter-type=FONT] tr:not([data-type=FONT]),
116 #items[data-filter-type=PING] tr:not([data-type=PING]),
98 #items[data-filter-type=POPUP] tr:not([data-type=POPUP]), 117 #items[data-filter-type=POPUP] tr:not([data-type=POPUP]),
99 #items[data-filter-type=ELEMHIDE] tr:not([data-type=ELEMHIDE]), 118 #items[data-filter-type=ELEMHIDE] tr:not([data-type=ELEMHIDE]),
100 #items[data-filter-type=OTHER] tr:not([data-type=OTHER]) 119 #items[data-filter-type=OTHER] tr:not([data-type=OTHER])
101 { 120 {
102 display: none; 121 display: none;
103 } 122 }
104 123
105 .changed, .unnamed 124 .changed, .unnamed
106 { 125 {
107 font-style: italic 126 font-style: italic
108 } 127 }
109 128
110 .request-wrapper 129 .request-wrapper, .filter-wrapper
111 { 130 {
112 display: flex; 131 display: flex;
113 width: 100%; 132 height: 100%;
114 flex-wrap: wrap; 133 flex-direction: column;
115 } 134 }
116 135
117 tr:not(:hover) .action 136 tr:not(:hover) .action
118 { 137 {
119 display: none; 138 display: none;
120 } 139 }
121 140
122 .url 141 .url
123 { 142 {
124 width: 100%; 143 width: 100%;
125 } 144 }
126 145
127 .resourceLink 146 .resourceLink
128 { 147 {
129 cursor: pointer; 148 cursor: pointer;
130 } 149 }
131 150
132 .resourceLink:hover { 151 .resourceLink:hover {
133 text-decoration: underline; 152 text-decoration: underline;
Sebastian Noack 2015/01/12 11:55:07 I disagree. Making the document domain clickable w
Thomas Greiner 2015/01/16 18:17:21 It already is confusing since the upper half of th
Sebastian Noack 2015/02/04 14:17:29 This changed when I addressed Sven's feedback. The
134 }
135
136 .domain
137 {
138 flex: 1 1px;
139 }
140
141 .type
142 {
143 flex: 0 105px;
144 } 153 }
145 154
146 .action-wrapper 155 .action-wrapper
147 { 156 {
148 display: flex; 157 display: flex;
149 width: 100%; 158 width: 100%;
150 } 159 }
151 160
152 .action 161 .action
153 { 162 {
154 background: #555; 163 background: #555;
155 color: white; 164 color: white;
156 font-style: normal; 165 font-style: normal;
157 border-radius: 7px; 166 border-radius: 7px;
158 padding: 2px 6px; 167 padding: 2px 6px;
159 margin: auto; 168 margin: auto;
160 margin-left: 5px; 169 margin-left: 5px;
161 cursor: pointer; 170 cursor: pointer;
162 flex-shrink: 0; 171 flex-shrink: 0;
163 } 172 }
164 173
165 .filter-wrapper 174 .filter-wrapper, .filter, .origin, .domain
166 { 175 {
167 display: flex;
168 height: 100%;
169 flex-direction: column;
170 flex-grow: 1; 176 flex-grow: 1;
171 } 177 }
172 178
173 .filter, .origin 179 .domain, .origin,
174 {
175 flex-grow: 1;
176 }
177
178 .domain, .type, .origin,
179 .changed .request-wrapper, 180 .changed .request-wrapper,
180 .changed .filter-wrapper 181 .changed .filter-wrapper,
182 .changed .type
181 { 183 {
182 opacity: 0.6; 184 opacity: 0.6;
183 } 185 }
184 186
185 #footer 187 footer
186 { 188 {
187 width: 100%; 189 width: 100%;
188 padding: 3px; 190 height: 23px;
191 margin-bottom: -23px;
192 padding: 4px 3px;
189 border-top: 1px solid #cdcdcd; 193 border-top: 1px solid #cdcdcd;
190 flex-shrink: 0; 194 flex-shrink: 0;
191 } 195 }
192 196
193 #items:not(.has-changes) + #footer 197 .has-changes + footer
194 { 198 {
195 display: none; 199 margin-bottom: 0;
200 transition: margin-bottom 0.5s;
196 } 201 }
197 202
198 #reload 203 #reload
199 { 204 {
200 color: blue; 205 color: blue;
201 text-decoration: underline; 206 text-decoration: underline;
202 cursor: pointer; 207 cursor: pointer;
203 } 208 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld