OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html i18n-values="dir:textdirection;"> | 2 <html i18n-values="dir:textdirection;"> |
3 <head> | 3 <head> |
4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
5 <include src="content_security_policy.html"/> | 5 <include src="content_security_policy.html"/> |
6 <title i18n-content="title"></title> | 6 <title i18n-content="title"></title> |
7 <link rel="icon" href="../../app/theme/history_favicon.png"> | 7 <link rel="icon" href="../../app/theme/history_favicon.png"> |
8 | 8 |
9 <link rel="stylesheet" href="chrome://resources/css/menu.css"> | 9 <link rel="stylesheet" href="chrome://resources/css/menu.css"> |
10 | 10 |
(...skipping 15 matching lines...) Expand all Loading... |
26 | 26 |
27 <style> | 27 <style> |
28 #results-separator { | 28 #results-separator { |
29 margin-top:12px; | 29 margin-top:12px; |
30 border-top:1px solid #9cc2ef; | 30 border-top:1px solid #9cc2ef; |
31 background-color:#ebeff9; | 31 background-color:#ebeff9; |
32 font-weight:bold; | 32 font-weight:bold; |
33 padding:3px; | 33 padding:3px; |
34 margin-bottom:-8px; | 34 margin-bottom:-8px; |
35 } | 35 } |
| 36 |
36 #results-separator table { | 37 #results-separator table { |
37 width: 100%; | 38 width: 100%; |
38 } | 39 } |
| 40 |
39 #results-summary { | 41 #results-summary { |
40 overflow: hidden; | 42 overflow: hidden; |
41 white-space: nowrap; | 43 white-space: nowrap; |
42 text-overflow: ellipsis; | 44 text-overflow: ellipsis; |
43 width: 50%; | 45 width: 50%; |
44 } | 46 } |
45 #edit-button { | 47 |
46 text-align: right; | 48 #editing-controls button { |
47 overflow: hidden; | 49 margin: 18px 0 -8px 0; |
48 white-space: nowrap; | |
49 text-overflow: ellipsis; | |
50 width: 50%; | |
51 } | 50 } |
52 #editing-controls button { | 51 |
53 margin-top: 18px; | |
54 margin-bottom: -8px; | |
55 } | |
56 #results-display { | 52 #results-display { |
57 max-width: 740px; | 53 max-width: 740px; |
58 margin: 16px 4px 0 4px; | 54 margin: 16px 0 0 0; |
59 } | 55 } |
| 56 |
60 .day { | 57 .day { |
61 color: #6a6a6a; | 58 color: #6a6a6a; |
62 font-weight: bold; | 59 font-weight: bold; |
63 margin: 0 0 4px 0; | 60 margin: 0 0 4px 0; |
64 text-transform: uppercase; | 61 text-transform: uppercase; |
65 font-size: 13px; | 62 font-size: 13px; |
66 } | 63 } |
| 64 |
67 .edit-button { | 65 .edit-button { |
68 display: inline; | 66 display: inline; |
69 -webkit-appearance: none; | 67 -webkit-appearance: none; |
70 background: none; | 68 background: none; |
71 border: 0; | 69 border: 0; |
72 color: blue; /* -webkit-link makes it purple :'( */ | 70 color: blue; /* -webkit-link makes it purple :'( */ |
73 cursor: pointer; | 71 cursor: pointer; |
74 text-decoration: underline; | 72 text-decoration: underline; |
75 padding:0px 9px; | 73 padding:0px 9px; |
76 display:inline-block; | 74 display:inline-block; |
77 font:inherit; | 75 font:inherit; |
78 } | 76 } |
| 77 |
79 .gap, | 78 .gap, |
80 .entry, | 79 .entry, |
81 .no-entries { | 80 .no-entries { |
82 margin: 0; | 81 margin: 0; |
83 padding: 0; | 82 padding: 0; |
84 list-style: none; | 83 list-style: none; |
85 } | 84 } |
86 .gap { | 85 .gap { |
87 width: 15px; | 86 width: 35px; |
88 -webkit-border-end: 1px solid #ddd; | 87 -webkit-border-end: 1px solid #ddd; |
89 height: 14px; | 88 height: 14px; |
90 } | 89 } |
| 90 |
91 .entry { | 91 .entry { |
92 overflow: auto; /* Make sure it's at least as large as its children. */ | 92 overflow: auto; /* Make sure it's at least as large as its children. */ |
93 } | 93 } |
| 94 |
94 .entry-box { | 95 .entry-box { |
| 96 cursor: default; |
95 line-height: 1.6em; | 97 line-height: 1.6em; |
96 | 98 |
97 display: -webkit-box; | 99 display: -webkit-box; |
98 -webkit-box-orient: horizontal; | 100 -webkit-box-orient: horizontal; |
99 max-width: 100%; /* Don't allow it to be bigger than its parent... */ | 101 max-width: 100%; /* Don't allow it to be bigger than its parent... */ |
100 float: left; /* ..but make the box shrink to fit its content. */ | 102 float: left; /* ..but make the box shrink to fit its content. */ |
101 overflow: hidden; | 103 overflow: hidden; |
102 } | 104 } |
| 105 |
103 html[dir=rtl] .entry-box { | 106 html[dir=rtl] .entry-box { |
104 float: right; /* To make the box shrink to fit its content. */ | 107 float: right; /* To make the box shrink to fit its content. */ |
105 } | 108 } |
| 109 |
106 .search-results, .day-results { | 110 .search-results, .day-results { |
107 margin: 0 0 24px 0; | 111 margin: 0 0 24px 0; |
108 padding: 0; | 112 padding: 0; |
109 } | 113 } |
| 114 |
110 .snippet { | 115 .snippet { |
111 font-size: 12px; | 116 font-size: 12px; |
112 line-height: 1.6em; | 117 line-height: 1.6em; |
113 margin-bottom: 12px; | 118 margin-bottom: 12px; |
114 -webkit-margin-start: 90px; /* Align it with .domain. */ | 119 -webkit-margin-start: 90px; /* Align it with .domain. */ |
115 clear: both; | 120 clear: both; |
116 } | 121 } |
| 122 |
117 .entry .domain { | 123 .entry .domain { |
118 color: #282; | 124 color: #282; |
119 -webkit-padding-start: 20px; | 125 -webkit-padding-start: 20px; |
120 -webkit-padding-end: 8px; | 126 -webkit-padding-end: 8px; |
121 background-repeat: no-repeat; | 127 background-repeat: no-repeat; |
122 background-position-y: center; | 128 background-position-y: center; |
123 } | 129 } |
| 130 |
124 .drop-down { | 131 .drop-down { |
125 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; | 132 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; |
126 border: 1px solid hsl(214, 91%, 85%); | 133 border: 1px solid hsl(214, 91%, 85%); |
127 border-radius: 2px; | 134 border-radius: 2px; |
128 width: 13px; | 135 width: 13px; |
129 height: 13px; | 136 height: 13px; |
130 -webkit-margin-start: 8px; | 137 -webkit-margin-start: 8px; |
| 138 -webkit-margin-end: 4px; |
131 position: relative; | 139 position: relative; |
132 top: 2px; | 140 top: 2px; |
133 } | 141 } |
| 142 |
134 .drop-down:hover { | 143 .drop-down:hover { |
135 border-color: #6A86DE; | 144 border-color: #6A86DE; |
136 background-image: -webkit-canvas(drop-down-arrow-hover); | 145 background-image: -webkit-canvas(drop-down-arrow-hover); |
137 } | 146 } |
| 147 |
138 .drop-down[menu-shown], .drop-down:focus { | 148 .drop-down[menu-shown], .drop-down:focus { |
139 border-color: #6A86DE; | 149 border-color: #6A86DE; |
140 background-color: #6A86DE; | 150 background-color: #6A86DE; |
141 background-image: -webkit-canvas(drop-down-arrow-active); | 151 background-image: -webkit-canvas(drop-down-arrow-active); |
142 } | 152 } |
| 153 |
143 html[dir='rtl'] .entry .domain { | 154 html[dir='rtl'] .entry .domain { |
144 background-position-x: right; | 155 background-position-x: right; |
145 } | 156 } |
| 157 |
146 .entry .time { | 158 .entry .time { |
147 color:#9a9a9a; | 159 color:#9a9a9a; |
148 width: 90px; | 160 width: 90px; |
149 } | 161 } |
| 162 |
| 163 .entry input[type=checkbox] { |
| 164 position: relative; |
| 165 top: 1px; |
| 166 } |
| 167 |
| 168 /* Checkboxes are shown when checked or focused, or when the entry is hovered. |
| 169 Fade in on focus, but not on hover, because it makes the UI feel laggy. */ |
| 170 .entry input[type=checkbox]:not(:checked) { |
| 171 opacity: 0; |
| 172 -webkit-transition: opacity 150ms; |
| 173 } |
| 174 |
| 175 .entry-box:hover input[type=checkbox], |
| 176 .entry-box input[type=checkbox]:focus { |
| 177 opacity: 1; |
| 178 } |
| 179 |
| 180 .entry-box input[type=checkbox]:focus { |
| 181 -webkit-transition: opacity 150ms; |
| 182 } |
| 183 |
| 184 .entry-box { |
| 185 background-color: none; |
| 186 -webkit-transition: background-color 150ms; |
| 187 } |
| 188 |
| 189 .entry-box:hover, .entry-box.contains-focus { |
| 190 background-color: #e4ecf7; |
| 191 border-radius: 2px; |
| 192 } |
150 .entry .title { | 193 .entry .title { |
151 -webkit-box-flex: 1; | 194 -webkit-box-flex: 1; |
152 overflow: hidden; | 195 overflow: hidden; |
153 white-space: nowrap; | 196 white-space: nowrap; |
154 text-overflow: ellipsis; | 197 text-overflow: ellipsis; |
155 } | 198 } |
| 199 |
156 .entry .title > .starred { | 200 .entry .title > .starred { |
157 background:url('shared/images/star_small.png'); | 201 background:url('shared/images/star_small.png'); |
158 background-repeat:no-repeat; | 202 background-repeat:no-repeat; |
159 display:inline-block; | 203 display:inline-block; |
160 -webkit-margin-start: 4px; | 204 -webkit-margin-start: 4px; |
161 width:11px; | 205 width:11px; |
162 height:11px; | 206 height:11px; |
163 } | 207 } |
| 208 |
164 .entry .title > a { | 209 .entry .title > a { |
165 color: #11c; | 210 color: #11c; |
166 text-decoration: none; | 211 text-decoration: none; |
167 } | 212 } |
| 213 |
168 .entry .title > a.to-be-removed { | 214 .entry .title > a.to-be-removed { |
169 text-decoration: line-through; | 215 text-decoration: line-through; |
170 } | 216 } |
| 217 |
171 .entry .title > a:hover { | 218 .entry .title > a:hover { |
172 text-decoration: underline; | 219 text-decoration: underline; |
173 } | 220 } |
| 221 |
174 /* Since all history links are visited, we can make them blue. */ | 222 /* Since all history links are visited, we can make them blue. */ |
175 .entry .title > a:visted { | 223 .entry .title > a:visted { |
176 color: #11c; | 224 color: #11c; |
177 } | 225 } |
| 226 |
| 227 .fade-out { |
| 228 opacity: 0; |
| 229 -webkit-transition: opacity 200ms; |
| 230 } |
178 </style> | 231 </style> |
179 </head> | 232 </head> |
180 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> | 233 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
181 <div class="header"> | 234 <div class="header"> |
182 <a id="history-section" href=""> | 235 <a id="history-section" href=""> |
183 <img src="shared/images/history_section.png" | 236 <img src="shared/images/history_section.png" |
184 width="67" height="67" class="logo" border="0"></a> | 237 width="67" height="67" class="logo" border="0"></a> |
185 <form id="search-form" method="post" action="" class="form"> | 238 <form id="search-form" method="post" action="" class="form"> |
186 <input type="text" name="term" id="term"> | 239 <input type="text" name="term" id="term"> |
187 <input type="submit" name="submit" i18n-values="value:searchbutton"> | 240 <input type="submit" name="submit" i18n-values="value:searchbutton"> |
188 </form> | 241 </form> |
189 </div> | 242 </div> |
190 <div class="main"> | 243 <div class="main"> |
191 <div id="results-separator"> | 244 <div id="results-separator"> |
192 <table border="0" cellPadding="0" cellSpacing="0"> | 245 <table border="0" cellPadding="0" cellSpacing="0"> |
193 <tr><td id="results-summary"></td><td id="edit-button"><p></p></td></tr> | 246 <tr><td id="results-summary"></td><td id="edit-button"><p></p></td></tr> |
194 </table> | 247 </table> |
195 </div> | 248 </div> |
196 <div id="editing-controls"></div> | 249 <div id="editing-controls"> |
| 250 <button id="clear-browsing-data" i18n-content="clearallhistory"></button> |
| 251 <button id="remove-selected" |
| 252 disabled="disabled" |
| 253 i18n-content="removeselected"></button> |
| 254 </div> |
197 <div id="results-display"></div> | 255 <div id="results-display"></div> |
198 <div id="results-pagination"></div> | 256 <div id="results-pagination"></div> |
199 </div> | 257 </div> |
200 <div class="footer"> | 258 <div class="footer"> |
201 </div> | 259 </div> |
202 | 260 |
203 <menu id="action-menu"> | 261 <menu id="action-menu"> |
204 <button id="more-from-site" i18n-content="moreFromSite"></button> | 262 <button id="more-from-site" i18n-content="moreFromSite"></button> |
205 <button id="remove-page" i18n-content="removeFromHistory"></button> | 263 <button id="remove-page" i18n-content="removeFromHistory"></button> |
206 </menu> | 264 </menu> |
207 | 265 |
208 <script src="chrome://resources/js/i18n_template.js"></script> | 266 <script src="chrome://resources/js/i18n_template.js"></script> |
209 <script src="chrome://resources/js/i18n_process.js"></script> | 267 <script src="chrome://resources/js/i18n_process.js"></script> |
210 </body> | 268 </body> |
211 </html> | 269 </html> |
OLD | NEW |