OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 | 5 |
6 /** | 6 /** |
7 * @fileoverview Utilities for rendering most visited thumbnails and titles. | 7 * @fileoverview Utilities for rendering most visited thumbnails and titles. |
8 */ | 8 */ |
9 | 9 |
10 <include src="instant_iframe_validation.js"> | 10 <include src="instant_iframe_validation.js"> |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
89 return params; | 89 return params; |
90 } | 90 } |
91 | 91 |
92 | 92 |
93 /** | 93 /** |
94 * Creates a new most visited link element. | 94 * Creates a new most visited link element. |
95 * @param {Object} params URL parameters containing styles for the link. | 95 * @param {Object} params URL parameters containing styles for the link. |
96 * @param {string} href The destination for the link. | 96 * @param {string} href The destination for the link. |
97 * @param {string} title The title for the link. | 97 * @param {string} title The title for the link. |
98 * @param {string|undefined} text The text for the link or none. | 98 * @param {string|undefined} text The text for the link or none. |
| 99 * @param {string|undefined} direction The text direction. |
99 * @param {string|undefined} provider A provider name (max 8 alphanumeric | 100 * @param {string|undefined} provider A provider name (max 8 alphanumeric |
100 * characters) used for logging. Undefined if suggestion is not coming from | 101 * characters) used for logging. Undefined if suggestion is not coming from |
101 * the server. | 102 * the server. |
102 * @return {HTMLAnchorElement} A new link element. | 103 * @return {HTMLAnchorElement} A new link element. |
103 */ | 104 */ |
104 function createMostVisitedLink(params, href, title, text, provider) { | 105 function createMostVisitedLink(params, href, title, text, direction, provider) { |
105 var styles = getMostVisitedStyles(params, !!text); | 106 var styles = getMostVisitedStyles(params, !!text); |
106 var link = document.createElement('a'); | 107 var link = document.createElement('a'); |
107 link.style.color = styles.color; | 108 link.style.color = styles.color; |
108 link.style.fontSize = styles.fontSize + 'px'; | 109 link.style.fontSize = styles.fontSize + 'px'; |
109 if (styles.fontFamily) | 110 if (styles.fontFamily) |
110 link.style.fontFamily = styles.fontFamily; | 111 link.style.fontFamily = styles.fontFamily; |
| 112 if (styles.textAlign) |
| 113 link.style.textAlign = styles.textAlign; |
| 114 if (styles.textFadePos) { |
| 115 var dir = /^rtl$/i.test(direction) ? 'to left' : 'to right'; |
| 116 // The fading length in pixels is passed by the caller. |
| 117 var mask = 'linear-gradient(' + dir + ', rgba(0,0,0,1), rgba(0,0,0,1) ' + |
| 118 styles.textFadePos + 'px, rgba(0,0,0,0))'; |
| 119 link.style.textOverflow = 'clip'; |
| 120 link.style.webkitMask = mask; |
| 121 } |
111 | 122 |
112 link.href = href; | 123 link.href = href; |
113 link.title = title; | 124 link.title = title; |
114 link.target = '_top'; | 125 link.target = '_top'; |
115 // Exclude links from the tab order. The tabIndex is added to the thumbnail | 126 // Exclude links from the tab order. The tabIndex is added to the thumbnail |
116 // parent container instead. | 127 // parent container instead. |
117 link.tabIndex = '-1'; | 128 link.tabIndex = '-1'; |
118 if (text) | 129 if (text) |
119 link.textContent = text; | 130 link.textContent = text; |
120 link.addEventListener('mouseover', function() { | 131 link.addEventListener('mouseover', function() { |
(...skipping 24 matching lines...) Expand all Loading... |
145 } | 156 } |
146 // Else follow <a> normally, so transition type would be LINK. | 157 // Else follow <a> normally, so transition type would be LINK. |
147 }); | 158 }); |
148 | 159 |
149 return link; | 160 return link; |
150 } | 161 } |
151 | 162 |
152 | 163 |
153 /** | 164 /** |
154 * Decodes most visited styles from URL parameters. | 165 * Decodes most visited styles from URL parameters. |
155 * - f: font-family | 166 * - f: font-family. |
156 * - fs: font-size as a number in pixels. | 167 * - fs: font-size as a number in pixels. |
| 168 * - ta: text-align property, as a string. |
| 169 * - tf: specifying a text fade starting position, in pixels. |
157 * - c: A hexadecimal number interpreted as a hex color code. | 170 * - c: A hexadecimal number interpreted as a hex color code. |
158 * @param {Object.<string, string>} params URL parameters specifying style. | 171 * @param {Object.<string, string>} params URL parameters specifying style. |
159 * @param {boolean} isTitle if the style is for the Most Visited Title. | 172 * @param {boolean} isTitle if the style is for the Most Visited Title. |
160 * @return {Object} Styles suitable for CSS interpolation. | 173 * @return {Object} Styles suitable for CSS interpolation. |
161 */ | 174 */ |
162 function getMostVisitedStyles(params, isTitle) { | 175 function getMostVisitedStyles(params, isTitle) { |
163 var styles = { | 176 var styles = { |
164 color: '#777', | 177 color: '#777', |
165 fontFamily: '', | 178 fontFamily: '', |
166 fontSize: 11 | 179 fontSize: 11 |
167 }; | 180 }; |
168 var apiHandle = chrome.embeddedSearch.newTabPage; | 181 var apiHandle = chrome.embeddedSearch.newTabPage; |
169 var themeInfo = apiHandle.themeBackgroundInfo; | 182 var themeInfo = apiHandle.themeBackgroundInfo; |
170 if (isTitle && themeInfo && !themeInfo.usingDefaultTheme) { | 183 if (isTitle && themeInfo && !themeInfo.usingDefaultTheme) { |
171 styles.color = convertArrayToRGBAColor(themeInfo.textColorRgba) || | 184 styles.color = convertArrayToRGBAColor(themeInfo.textColorRgba) || |
172 styles.color; | 185 styles.color; |
173 } else if ('c' in params) { | 186 } else if ('c' in params) { |
174 styles.color = convertToHexColor(parseInt(params.c, 16)) || styles.color; | 187 styles.color = convertToHexColor(parseInt(params.c, 16)) || styles.color; |
175 } | 188 } |
176 if ('f' in params && /^[-0-9a-zA-Z ,]+$/.test(params.f)) | 189 if ('f' in params && /^[-0-9a-zA-Z ,]+$/.test(params.f)) |
177 styles.fontFamily = params.f; | 190 styles.fontFamily = params.f; |
178 if ('fs' in params && isFinite(parseInt(params.fs, 10))) | 191 if ('fs' in params && isFinite(parseInt(params.fs, 10))) |
179 styles.fontSize = parseInt(params.fs, 10); | 192 styles.fontSize = parseInt(params.fs, 10); |
| 193 if ('ta' in params && /^[-0-9a-zA-Z ,]+$/.test(params.ta)) |
| 194 styles.textAlign = params.ta; |
| 195 if ('tf' in params) { |
| 196 var tf = parseInt(params.tf, 10); |
| 197 if (isFinite(tf)) |
| 198 styles.textFadePos = tf; |
| 199 } |
180 return styles; | 200 return styles; |
181 } | 201 } |
182 | 202 |
183 | 203 |
184 /** | 204 /** |
185 * @param {string} location A location containing URL parameters. | 205 * @param {string} location A location containing URL parameters. |
186 * @param {function(Object, Object)} fill A function called with styles and | 206 * @param {function(Object, Object)} fill A function called with styles and |
187 * data to fill. | 207 * data to fill. |
188 */ | 208 */ |
189 function fillMostVisited(location, fill) { | 209 function fillMostVisited(location, fill) { |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
234 if (navigator.sendBeacon) { | 254 if (navigator.sendBeacon) { |
235 navigator.sendBeacon(url); | 255 navigator.sendBeacon(url); |
236 } else { | 256 } else { |
237 // if sendBeacon is not enabled, we fallback for "a ping". | 257 // if sendBeacon is not enabled, we fallback for "a ping". |
238 var a = document.createElement('a'); | 258 var a = document.createElement('a'); |
239 a.href = '#'; | 259 a.href = '#'; |
240 a.ping = url; | 260 a.ping = url; |
241 a.click(); | 261 a.click(); |
242 } | 262 } |
243 } | 263 } |
OLD | NEW |