Chromium Code Reviews Chromium Code Reviews
Issue 8658006:
History: Reduce visual importance of the domain in entries. (Closed)
Base URL: http://git.chromium.org/chromium/src.git@master| 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 <title i18n-content="title"></title> | 5 <title i18n-content="title"></title> |
| 6 <link rel="icon" href="../../app/theme/history_favicon.png"> | 6 <link rel="icon" href="../../app/theme/history_favicon.png"> |
| 7 | 7 |
| 8 <link rel="stylesheet" href="chrome://resources/css/menu.css"> | 8 <link rel="stylesheet" href="chrome://resources/css/menu.css"> |
| 9 <link rel="stylesheet" href="shared/css/button.css"> | 9 <link rel="stylesheet" href="shared/css/button.css"> |
| 10 <link rel="stylesheet" href="shared/css/checkbox.css"> | 10 <link rel="stylesheet" href="shared/css/checkbox.css"> |
| 11 | 11 |
| 12 <script src="chrome://resources/js/event_tracker.js"></script> | 12 <script src="chrome://resources/js/event_tracker.js"></script> |
| 13 <script src="chrome://resources/js/cr.js"></script> | 13 <script src="chrome://resources/js/cr.js"></script> |
| 14 <script src="chrome://resources/js/cr/ui.js"></script> | 14 <script src="chrome://resources/js/cr/ui.js"></script> |
| 15 <script src="chrome://resources/js/cr/ui/command.js"></script> | 15 <script src="chrome://resources/js/cr/ui/command.js"></script> |
| 16 <script src="chrome://resources/js/cr/ui/menu_item.js"></script> | 16 <script src="chrome://resources/js/cr/ui/menu_item.js"></script> |
| 17 <script src="chrome://resources/js/cr/ui/menu.js"></script> | 17 <script src="chrome://resources/js/cr/ui/menu.js"></script> |
| 18 <script src="chrome://resources/js/cr/ui/position_util.js"></script> | 18 <script src="chrome://resources/js/cr/ui/position_util.js"></script> |
| 19 <script src="chrome://resources/js/cr/ui/menu_button.js"></script> | 19 <script src="chrome://resources/js/cr/ui/menu_button.js"></script> |
| 20 | 20 |
| 21 <script src="chrome://resources/js/local_strings.js"></script> | 21 <script src="chrome://resources/js/local_strings.js"></script> |
| 22 | 22 |
| 23 <script src="chrome://history/history.js"></script> | 23 <script src="chrome://history/history.js"></script> |
| 24 <script src="chrome://history/strings.js"></script> | 24 <script src="chrome://history/strings.js"></script> |
| 25 | 25 |
| 26 <link rel="stylesheet" href="old_webui.css"> | 26 <link rel="stylesheet" href="old_webui.css"> |
| 27 | 27 |
| 28 <style> | 28 <style> |
| 29 #results-separator { | 29 #results-separator { |
|
Evan Stade
2011/11/30 04:46:18
can you move the css into a separate file
Patrick Dubroy
2011/12/01 16:23:47
Done.
| |
| 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 margin-top: 12px; | 35 margin-top: 12px; |
| 36 } | 36 } |
| 37 | 37 |
| 38 #results-separator table { | 38 #results-separator table { |
| 39 width: 100%; | 39 width: 100%; |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 89 } | 89 } |
| 90 | 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 |
| 95 .entry-box { | 95 .entry-box { |
| 96 -webkit-box-orient: horizontal; | 96 -webkit-box-orient: horizontal; |
| 97 cursor: default; | 97 cursor: default; |
| 98 display: -webkit-box; | 98 display: -webkit-box; |
| 99 float: left; | 99 float: left; /* Box will shrink to fit its content. */ |
| 100 line-height: 1.6em; | 100 line-height: 1.6em; |
| 101 /* Don't allow it to be bigger than its parent but make the box shrink to fit | 101 |
| 102 * its content. */ | 102 /* The box should be no bigger than its parent. NB: For this to work, the |
| 103 * box cannot have padding or a border. */ | |
| 103 max-width: 100%; | 104 max-width: 100%; |
| 105 | |
| 104 overflow: hidden; | 106 overflow: hidden; |
| 105 } | 107 } |
| 106 | 108 |
| 107 html[dir=rtl] .entry-box { | 109 html[dir=rtl] .entry-box { |
| 108 float: right; /* To make the box shrink to fit its content. */ | 110 float: right; /* To make the box shrink to fit its content. */ |
| 109 } | 111 } |
| 110 | 112 |
| 111 .entry-box > label > * { | |
| 112 display: inline-block; | |
| 113 white-space: nowrap; | |
| 114 } | |
| 115 | |
| 116 .search-results, .day-results { | 113 .search-results, .day-results { |
| 117 margin: 0 0 24px 0; | 114 margin: 0 0 24px 0; |
| 118 padding: 0; | 115 padding: 0; |
| 119 } | 116 } |
| 120 | 117 |
| 121 .snippet { | 118 .snippet { |
| 122 -webkit-margin-start: 90px; /* Align it with .domain. */ | 119 -webkit-margin-start: 90px; /* Align it with .domain. */ |
| 123 clear: both; | 120 clear: both; |
| 124 font-size: 12px; | 121 font-size: 12px; |
| 125 line-height: 1.6em; | 122 line-height: 1.6em; |
| 126 margin-bottom: 12px; | 123 margin-bottom: 12px; |
| 127 } | 124 } |
| 128 | 125 |
| 129 .entry .domain { | 126 .entry .domain { |
| 130 -webkit-padding-end: 8px; | 127 color: #9a9a9a; |
| 131 -webkit-padding-start: 20px; | 128 padding-left: 6px; |
| 132 background-position-y: center; | 129 padding-right: 6px; |
| 133 background-repeat: no-repeat; | |
| 134 color: #282; | |
| 135 } | 130 } |
| 136 | 131 |
| 137 .drop-down { | 132 .drop-down { |
| 138 -webkit-margin-end: 4px; | 133 -webkit-margin-end: 4px; |
| 139 -webkit-margin-start: 8px; | |
| 140 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; | 134 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; |
| 141 border: 1px solid hsl(214, 91%, 85%); | 135 border: 1px solid hsl(214, 91%, 85%); |
| 142 border-radius: 2px; | 136 border-radius: 2px; |
| 143 height: 13px; | 137 height: 13px; |
| 144 position: relative; | 138 position: relative; |
| 145 top: 2px; | 139 top: 2px; |
| 146 width: 13px; | 140 width: 13px; |
| 147 } | 141 } |
| 148 | 142 |
| 149 .drop-down:hover { | 143 .drop-down:hover { |
| 150 background-image: -webkit-canvas(drop-down-arrow-hover); | 144 background-image: -webkit-canvas(drop-down-arrow-hover); |
| 151 border-color: #6A86DE; | 145 border-color: #6A86DE; |
| 152 } | 146 } |
| 153 | 147 |
| 154 .drop-down[menu-shown], .drop-down:focus { | 148 .drop-down[menu-shown], .drop-down:focus { |
| 155 background-color: #6A86DE; | 149 background-color: #6A86DE; |
| 156 background-image: -webkit-canvas(drop-down-arrow-active); | 150 background-image: -webkit-canvas(drop-down-arrow-active); |
| 157 border-color: #6A86DE; | 151 border-color: #6A86DE; |
| 158 } | 152 } |
| 159 | 153 |
| 160 html[dir='rtl'] .entry .domain { | 154 html[dir='rtl'] .entry .title { |
| 155 /* Put the favicon on the right. */ | |
| 161 background-position-x: right; | 156 background-position-x: right; |
| 162 } | 157 } |
| 163 | 158 |
| 164 .entry .time { | 159 .entry .time { |
| 165 color:#9a9a9a; | 160 color:#9a9a9a; |
| 166 width: 90px; | 161 width: 90px; |
| 167 } | 162 } |
| 168 | 163 |
| 169 .entry input[type=checkbox] { | 164 .entry input[type=checkbox] { |
| 170 -webkit-margin-end: 6px; | 165 -webkit-margin-end: 6px; |
| 171 -webkit-margin-start: 4px; | 166 -webkit-margin-start: 4px; |
| 172 height: 13px; | 167 height: 13px; |
| 173 line-height: 12px; | 168 line-height: 12px; |
| 174 text-indent: -1px; | 169 text-indent: -1px; |
| 175 top: 2px; | 170 top: 2px; |
| 176 width: 14px; | 171 width: 14px; |
| 177 } | 172 } |
| 178 | 173 |
| 179 /* Checkboxes are shown when checked or focused, or when the entry is hovered. | 174 /* Checkboxes are shown when checked or focused, or when the entry is hovered. |
| 180 Fade in on focus, but not on hover, because it makes the UI feel laggy. */ | 175 Fade in on focus, but not on hover, because it makes the UI feel laggy. */ |
| 181 .entry input[type=checkbox]:not(:checked) { | 176 .entry input[type=checkbox]:not(:checked) { |
| 182 -webkit-transition: opacity 150ms; | |
| 183 opacity: 0; | 177 opacity: 0; |
| 184 } | 178 } |
| 185 | 179 |
| 186 .entry-box:hover input[type=checkbox], | 180 .entry-box:hover input[type=checkbox], |
| 187 .entry-box input[type=checkbox]:focus { | 181 .entry-box input[type=checkbox]:focus { |
| 188 opacity: 1; | 182 opacity: 1; |
| 189 } | 183 } |
| 190 | 184 |
| 191 .entry-box input[type=checkbox]:focus { | 185 .entry-box input[type=checkbox]:focus { |
| 192 -webkit-transition: opacity 150ms; | 186 -webkit-transition: opacity 150ms; |
| 193 } | 187 } |
| 194 | 188 |
| 195 .entry-box { | 189 .entry-box { |
| 196 -webkit-transition: background-color 150ms; | |
| 197 background-color: none; | 190 background-color: none; |
| 198 } | 191 } |
| 199 | 192 |
| 200 .entry-box:hover, .entry-box.contains-focus { | 193 .entry-box:hover, .entry-box.contains-focus { |
| 201 background-color: #e4ecf7; | 194 background-color: #e4ecf7; |
| 202 border-radius: 2px; | 195 border-radius: 2px; |
| 203 } | 196 } |
| 204 .entry .title { | 197 .entry .title { |
| 205 -webkit-box-flex: 1; | 198 -webkit-box-flex: 1; |
| 206 overflow: hidden; | 199 overflow: hidden; |
| 207 text-overflow: ellipsis; | 200 text-overflow: ellipsis; |
| 208 white-space: nowrap; | 201 white-space: nowrap; |
| 209 } | 202 } |
| 210 | 203 |
| 211 .entry .title > .starred { | 204 .entry .title { |
| 205 /* Make room for the favicon. */ | |
| 206 -webkit-padding-start: 20px; | |
| 207 | |
| 208 /* Control the favicon appearance. */ | |
| 209 background-repeat: no-repeat; | |
| 210 background-position-y: center; | |
| 211 } | |
| 212 | |
| 213 .entry .starred { | |
| 212 -webkit-margin-start: 4px; | 214 -webkit-margin-start: 4px; |
| 213 background: url('shared/images/star_small.png'); | 215 background: url('shared/images/star_small.png') no-repeat; |
| 214 background-repeat: no-repeat; | |
| 215 display: inline-block; | 216 display: inline-block; |
| 216 height: 11px; | 217 height: 11px; |
| 217 width: 11px; | 218 width: 11px; |
| 218 } | 219 } |
| 219 | 220 |
| 220 .entry .title > a { | 221 .entry .title > a { |
| 221 color: #11c; | 222 color: #11c; |
| 222 text-decoration: none; | 223 text-decoration: none; |
| 223 } | 224 } |
| 224 | 225 |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 269 | 270 |
| 270 <menu id="action-menu"> | 271 <menu id="action-menu"> |
| 271 <button id="more-from-site" i18n-content="moreFromSite"></button> | 272 <button id="more-from-site" i18n-content="moreFromSite"></button> |
| 272 <button id="remove-page" i18n-content="removeFromHistory"></button> | 273 <button id="remove-page" i18n-content="removeFromHistory"></button> |
| 273 </menu> | 274 </menu> |
| 274 | 275 |
| 275 <script src="chrome://resources/js/i18n_template.js"></script> | 276 <script src="chrome://resources/js/i18n_template.js"></script> |
| 276 <script src="chrome://resources/js/i18n_process.js"></script> | 277 <script src="chrome://resources/js/i18n_process.js"></script> |
| 277 </body> | 278 </body> |
| 278 </html> | 279 </html> |
| OLD | NEW |
