Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(175)

Side by Side Diff: chrome/browser/resources/ntp4/bookmarks_page.js

Issue 7776020: Revert 98859 - [ntp4] More UI refinements. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: Created 9 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2011 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 cr.define('ntp4', function() { 5 cr.define('ntp4', function() {
6 'use strict'; 6 'use strict';
7 7
8 var localStrings = new LocalStrings; 8 var localStrings = new LocalStrings;
9 9
10 /** 10 /**
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
52 title.textContent = this.data.title; 52 title.textContent = this.data.title;
53 53
54 if (this.data.url) { 54 if (this.data.url) {
55 var button = this.querySelector('.button'); 55 var button = this.querySelector('.button');
56 button.href = title.href = this.data.url; 56 button.href = title.href = this.data.url;
57 } 57 }
58 58
59 var faviconDiv = this.querySelector('.favicon'); 59 var faviconDiv = this.querySelector('.favicon');
60 var faviconUrl; 60 var faviconUrl;
61 if (this.data.url) { 61 if (this.data.url) {
62 faviconUrl = 'chrome://favicon/size/16/' + this.data.url; 62 faviconUrl = 'chrome://favicon/size/32/' + this.data.url;
63 chrome.send('getFaviconDominantColor', 63 chrome.send('getFaviconDominantColor',
64 [faviconUrl, id, 'ntp4.setBookmarksFaviconDominantColor']); 64 [faviconUrl, id, 'ntp4.setBookmarksFaviconDominantColor']);
65 } else { 65 } else {
66 // TODO(csilv): We need a large (32px) icon for this URL.
66 faviconUrl = 'chrome://theme/IDR_BOOKMARK_BAR_FOLDER'; 67 faviconUrl = 'chrome://theme/IDR_BOOKMARK_BAR_FOLDER';
67 // TODO(csilv): Should we vary this color by platform? 68 // TODO(csilv): Should we vary this color by platform?
68 this.stripeColor = '#919191'; 69 this.stripeColor = '#919191';
69 } 70 }
70 faviconDiv.style.backgroundImage = url(faviconUrl); 71 faviconDiv.style.backgroundImage = url(faviconUrl);
71 72
72 this.addEventListener('click', this.handleClick_.bind(this)); 73 this.addEventListener('click', this.handleClick_.bind(this));
73 }, 74 },
74 75
75 /** 76 /**
76 * Sets the color of the favicon dominant color bar. 77 * Sets the color of the favicon dominant color bar.
77 * @param {string} color The css-parsable value for the color. 78 * @param {string} color The css-parsable value for the color.
78 */ 79 */
79 set stripeColor(color) { 80 set stripeColor(color) {
80 this.querySelector('.color-stripe').style.backgroundColor = color; 81 this.querySelector('.color-stripe').style.backgroundColor = color;
81 }, 82 },
82 83
83 /** 84 /**
84 * Set the size and position of the bookmark tile. 85 * Set the size and position of the bookmark tile.
85 * @param {number} size The total size of |this|. 86 * @param {number} size The total size of |this|.
86 * @param {number} x The x-position. 87 * @param {number} x The x-position.
87 * @param {number} y The y-position. 88 * @param {number} y The y-position.
88 * animate. 89 * animate.
89 */ 90 */
90 setBounds: function(size, x, y) { 91 setBounds: function(size, x, y) {
91 this.style.width = size + 'px'; 92 this.style.width = this.style.height = size + 'px';
92 this.style.height = heightForWidth(size) + 'px';
93
94 this.style.left = x + 'px'; 93 this.style.left = x + 'px';
95 this.style.right = x + 'px';
96 this.style.top = y + 'px'; 94 this.style.top = y + 'px';
97 }, 95 },
98 96
99 /** 97 /**
100 * Invoked when a bookmark is clicked 98 * Invoked when a bookmark is clicked
101 * @param {Event} e The click event. 99 * @param {Event} e The click event.
102 * @private 100 * @private
103 */ 101 */
104 handleClick_: function(e) { 102 handleClick_: function(e) {
105 if (e.target.classList.contains('close-button')) { 103 if (e.target.classList.contains('close-button')) {
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
168 maxColCount: 6, 166 maxColCount: 6,
169 167
170 // The smallest a tile can be. 168 // The smallest a tile can be.
171 minTileWidth: 150, 169 minTileWidth: 150,
172 // The biggest a tile can be. 170 // The biggest a tile can be.
173 maxTileWidth: 150, 171 maxTileWidth: 150,
174 }; 172 };
175 TilePage.initGridValues(bookmarksPageGridValues); 173 TilePage.initGridValues(bookmarksPageGridValues);
176 174
177 /** 175 /**
178 * Calculates the height for a bookmarks tile for a given width. The size
179 * is based on a desired size of 96x72 ratio.
180 * @return {number} The height.
181 */
182 function heightForWidth(width) {
183 // The 2s are for borders, the 31 is for the title.
184 return (width - 2) * 72 / 96 + 2 + 31;
185 }
186
187 /**
188 * Creates a new BookmarksPage object. 176 * Creates a new BookmarksPage object.
189 * @constructor 177 * @constructor
190 * @extends {TilePage} 178 * @extends {TilePage}
191 */ 179 */
192 function BookmarksPage() { 180 function BookmarksPage() {
193 var el = new TilePage(bookmarksPageGridValues); 181 var el = new TilePage(bookmarksPageGridValues);
194 el.__proto__ = BookmarksPage.prototype; 182 el.__proto__ = BookmarksPage.prototype;
195 el.initialize(); 183 el.initialize();
196 184
197 return el; 185 return el;
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after
280 } 268 }
281 } 269 }
282 return false; 270 return false;
283 }, 271 },
284 272
285 /** @inheritDoc */ 273 /** @inheritDoc */
286 shouldAcceptDrag: function(dataTransfer) { 274 shouldAcceptDrag: function(dataTransfer) {
287 return false; 275 return false;
288 }, 276 },
289 277
290 /** @inheritDoc */
291 heightForWidth: heightForWidth,
292
293 /** 278 /**
294 * Invoked before a batch import begins. We will ignore added/changed 279 * Invoked before a batch import begins. We will ignore added/changed
295 * notifications while the operation is in progress. 280 * notifications while the operation is in progress.
296 */ 281 */
297 bookmarkImportBegan: function() { 282 bookmarkImportBegan: function() {
298 this.importing = true; 283 this.importing = true;
299 }, 284 },
300 285
301 /** 286 /**
302 * Invoked after a batch import finishes. We will reload the bookmarks 287 * Invoked after a batch import finishes. We will reload the bookmarks
(...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after
457 }; 442 };
458 443
459 return { 444 return {
460 BookmarksPage: BookmarksPage, 445 BookmarksPage: BookmarksPage,
461 initBookmarkChevron: initBookmarkChevron, 446 initBookmarkChevron: initBookmarkChevron,
462 setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor 447 setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor
463 }; 448 };
464 }); 449 });
465 450
466 window.addEventListener('load', ntp4.initBookmarkChevron); 451 window.addEventListener('load', ntp4.initBookmarkChevron);
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/bookmarks_page.css ('k') | chrome/browser/resources/ntp4/most_visited_page.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698