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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/new_new_tab.html

Issue 269095: NTP: Fix startup visual state ... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 11 years, 2 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
« no previous file with comments | « chrome/browser/resources/new_new_tab.css ('k') | chrome/browser/resources/new_new_tab.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html i18n-values=" 2 <html i18n-values="
3 dir:textdirection; 3 dir:textdirection;
4 firstview:firstview; 4 firstview:firstview;
5 bookmarkbarattached:bookmarkbarattached; 5 bookmarkbarattached:bookmarkbarattached;
6 hasattribution:hasattribution; 6 hasattribution:hasattribution;
7 anim:anim; 7 anim:anim;
8 syncispresent:syncispresent; 8 syncispresent:syncispresent;
9 showsetashomepage:showsetashomepage"> 9 showsetashomepage:showsetashomepage">
10 10
(...skipping 25 matching lines...) Expand all
36 logEvent(name + ' is not yet ready. Waiting for DOMContentLoaded'); 36 logEvent(name + ' is not yet ready. Waiting for DOMContentLoaded');
37 document.addEventListener('DOMContentLoaded', function() { 37 document.addEventListener('DOMContentLoaded', function() {
38 logEvent('Calling the new ' + name); 38 logEvent('Calling the new ' + name);
39 global[name].apply(null, args); 39 global[name].apply(null, args);
40 }); 40 });
41 } 41 }
42 }; 42 };
43 global[name] = f; 43 global[name] = f;
44 } 44 }
45 45
46 chrome.send('getShownSections');
47 chrome.send('getMostVisited'); 46 chrome.send('getMostVisited');
48 chrome.send('getRecentlyClosedTabs'); 47 chrome.send('getRecentlyClosedTabs');
49 chrome.send('getTips'); 48 chrome.send('getTips');
50 49
51 registerCallback('onShownSections'); 50 registerCallback('onShownSections');
52 registerCallback('mostVisitedPages'); 51 registerCallback('mostVisitedPages');
53 registerCallback('recentlyClosedTabs'); 52 registerCallback('recentlyClosedTabs');
54 registerCallback('syncMessageChanged'); 53 registerCallback('syncMessageChanged');
55 registerCallback('tips'); 54 registerCallback('tips');
56 55
57 </script> 56 </script>
57 <!-- template data placeholder -->
58 <link rel="stylesheet" href="new_new_tab.css"> 58 <link rel="stylesheet" href="new_new_tab.css">
59 <script> 59 <script>
60
61 /**
62 * Bitmask for the different UI sections.
63 * This matches the Section enum in ../dom_ui/shown_sections_handler.h
64 * @enum {number}
65 */
66 var Section = {
67 THUMB: 1,
68 LIST: 2,
69 RECENT: 4
70 };
71
72 var shownSections = templateData['shown_sections'];
73
74 function $(id) {
75 return document.getElementById(id);
76 }
77
60 // Until themes can clear the cache, force-reload the theme stylesheet. 78 // Until themes can clear the cache, force-reload the theme stylesheet.
61 document.write('<link id="themecss" rel="stylesheet" ' + 79 document.write('<link id="themecss" rel="stylesheet" ' +
62 'href="chrome://theme/css/newtab.css?' + 80 'href="chrome://theme/css/newtab.css?' +
63 (new Date()).getTime() + '">'); 81 (new Date()).getTime() + '">');
82
83 function useSmallGrid() {
84 return window.innerWidth <= 920;
85 }
86
87 function isRtl() {
88 return templateData['textdirection'] == 'rtl';
89 }
90
91 function getMostVisitedLayoutRects() {
92 var small = useSmallGrid();
93
94 var cols = 4;
95 var rows = 2;
96 var marginWidth = 10;
97 var marginHeight = 7;
98 var borderWidth = 4;
99 var thumbWidth = small ? 150 : 207;
100 var thumbHeight = small ? 93 : 129;
101 var w = thumbWidth + 2 * borderWidth + 2 * marginWidth;
102 var h = thumbHeight + 40 + 2 * marginHeight;
103 var sumWidth = cols * w - 2 * marginWidth;
104 // Since the list mode does not have a toolbar move it down a little to add
105 // some spacing at the top.
106 var LIST_TOP_SPACING = 22;
107
108 if (shownSections & Section.LIST) {
109 h = 34;
110 rows = 8;
111 cols = 1;
112 }
113
114 var rtl = isRtl();
115 var rects = [];
116
117 if (shownSections & Section.THUMB || shownSections & Section.LIST) {
118 for (var i = 0; i < rows * cols; i++) {
119 var row, col, left, top;
120 if (shownSections & Section.THUMB) {
121 row = Math.floor(i / cols);
122 col = i % cols;
123 } else {
124 col = Math.floor(i / rows);
125 row = i % rows;
126 }
127
128 if (shownSections & Section.THUMB) {
129 left = rtl ? sumWidth - col * w - thumbWidth - 2 * borderWidth :
130 col * w;
131 } else {
132 left = rtl ? sumWidth - col * w - w + 2 * marginWidth : col * w;
133 }
134 top = row * h;
135
136 if (shownSections & Section.LIST) {
137 top += LIST_TOP_SPACING;
138 }
139
140 rects[i] = {left: left, top: top};
141 }
142 }
143 return rects;
144 }
145
146 function applyMostVisitedRects() {
147 var isList = shownSections & Section.LIST;
148 if (shownSections & Section.THUMB || isList) {
149 var rects = getMostVisitedLayoutRects();
150 var rtlList = isRtl() && isList;
151 var children = $('most-visited').children;
152 for (var i = 0; i < 8; i++) {
153 var t = children[i];
154 t.style.left = rtlList ? '' : rects[i].left + 'px';
155 t.style.top = rects[i].top + 'px';
156 t.style.right = '';
157 var innerStyle = t.firstElementChild.style;
158 innerStyle.left = innerStyle.top = '';
159 }
160 }
161 }
162
64 </script> 163 </script>
65 </head> 164 </head>
66 <body class="loading" 165 <body class="loading"
67 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> 166 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
68 167
69 <div id="main"> 168 <div id="main">
70 169
71 <div id="view-toolbar" 170 <div id="view-toolbar"
72 ><input type=checkbox id="thumb-checkbox" checked 171 ><input type=checkbox id="thumb-checkbox" checked
73 i18n-values="title:showhidethumbnailtooltip" 172 i18n-values="title:showhidethumbnailtooltip"
74 ><input type=checkbox id="list-checkbox" 173 ><input type=checkbox id="list-checkbox"
75 i18n-values="title:showhidelisttooltip" 174 i18n-values="title:showhidelisttooltip"
76 ><input type="button" id="option-button" 175 ><input type="button" id="option-button"
77 i18n-values="title:pagedisplaytooltip"></div> 176 i18n-values="title:pagedisplaytooltip"></div>
78 177
79 <div id="option-menu" class="window-menu"> 178 <div id="option-menu" class="window-menu">
80 <div command="hide" section="THUMB" i18n-content="mostvisited"></div> 179 <div command="hide" section="THUMB" i18n-content="mostvisited"></div>
81 <div command="hide" section="RECENT" i18n-content="recentlyclosed"></div> 180 <div command="hide" section="RECENT" i18n-content="recentlyclosed"></div>
82 <hr> 181 <hr>
83 <div command="clear-all-blacklisted" 182 <div command="clear-all-blacklisted"
84 i18n-content="restorethumbnails"></div> 183 i18n-content="restorethumbnails"></div>
85 </div> 184 </div>
86 185
186 <script>
187 $('thumb-checkbox').checked = shownSections & Section.THUMB;
188 $('list-checkbox').checked = shownSections & Section.LIST;
189 </script>
190
87 <div id="notification"> 191 <div id="notification">
88 <span>&nbsp;</span> 192 <span>&nbsp;</span>
89 <span class="link"><span class="link-color"></span></span> 193 <span class="link"><span class="link-color"></span></span>
90 </div> 194 </div>
91 195
92 <div id="most-visited"> 196 <div id="most-visited">
93 <a class="thumbnail-container filler" tabindex="1" id="t0"> 197 <a class="thumbnail-container filler" tabindex="1" id="t0">
94 <div class="edit-mode-border"> 198 <div class="edit-mode-border">
95 <div class="edit-bar"> 199 <div class="edit-bar">
96 <div class="pin"></div> 200 <div class="pin"></div>
97 <div class="spacer"></div> 201 <div class="spacer"></div>
98 <div class="remove"></div> 202 <div class="remove"></div>
99 </div> 203 </div>
100 <span class="thumbnail-wrapper"> 204 <span class="thumbnail-wrapper">
101 <span class="thumbnail"></span> 205 <span class="thumbnail"></span>
102 </span> 206 </span>
103 </div> 207 </div>
104 <div class="title"> 208 <div class="title">
105 <div></div> 209 <div></div>
106 </div> 210 </div>
107 </a> 211 </a>
212 </div>
108 213
109 <a class="thumbnail-container filler" tabindex="1" id="t1"> 214 <script>
110 <div class="edit-mode-border"> 215 (function() {
111 <div class="edit-bar"> 216 var el = $('most-visited');
112 <div class="pin"></div> 217 if (shownSections & Section.LIST) {
113 <div class="spacer"></div> 218 el.className += ' list';
114 <div class="remove"></div> 219 } else if (!(shownSections & Section.THUMB)) {
115 </div> 220 el.className += ' collapsed';
116 <span class="thumbnail-wrapper"> 221 }
117 <span class="thumbnail"></span>
118 </span>
119 </div>
120 <div class="title">
121 <div></div>
122 </div>
123 </a>
124 222
125 <a class="thumbnail-container filler" tabindex="1" id="t2"> 223 for (var i = 1; i < 8; i++) {
126 <div class="edit-mode-border"> 224 el.appendChild(el.firstElementChild.cloneNode(true)).id = 't' + i;
127 <div class="edit-bar"> 225 }
128 <div class="pin"></div>
129 <div class="spacer"></div>
130 <div class="remove"></div>
131 </div>
132 <span class="thumbnail-wrapper">
133 <span class="thumbnail"></span>
134 </span>
135 </div>
136 <div class="title">
137 <div></div>
138 </div>
139 </a>
140 226
141 <a class="thumbnail-container filler" tabindex="1" id="t3"> 227 applyMostVisitedRects();
142 <div class="edit-mode-border"> 228 })();
143 <div class="edit-bar"> 229 </script>
144 <div class="pin"></div>
145 <div class="spacer"></div>
146 <div class="remove"></div>
147 </div>
148 <span class="thumbnail-wrapper">
149 <span class="thumbnail"></span>
150 </span>
151 </div>
152 <div class="title">
153 <div></div>
154 </div>
155 </a>
156
157 <a class="thumbnail-container filler" tabindex="1" id="t4">
158 <div class="edit-mode-border">
159 <div class="edit-bar">
160 <div class="pin"></div>
161 <div class="spacer"></div>
162 <div class="remove"></div>
163 </div>
164 <span class="thumbnail-wrapper">
165 <span class="thumbnail"></span>
166 </span>
167 </div>
168 <div class="title">
169 <div></div>
170 </div>
171 </a>
172
173 <a class="thumbnail-container filler" tabindex="1" id="t5">
174 <div class="edit-mode-border">
175 <div class="edit-bar">
176 <div class="pin"></div>
177 <div class="spacer"></div>
178 <div class="remove"></div>
179 </div>
180 <span class="thumbnail-wrapper">
181 <span class="thumbnail"></span>
182 </span>
183 </div>
184 <div class="title">
185 <div></div>
186 </div>
187 </a>
188
189 <a class="thumbnail-container filler" tabindex="1" id="t6">
190 <div class="edit-mode-border">
191 <div class="edit-bar">
192 <div class="pin"></div>
193 <div class="spacer"></div>
194 <div class="remove"></div>
195 </div>
196 <span class="thumbnail-wrapper">
197 <span class="thumbnail"></span>
198 </span>
199 </div>
200 <div class="title">
201 <div></div>
202 </div>
203 </a>
204
205 <a class="thumbnail-container filler" tabindex="1" id="t7">
206 <div class="edit-mode-border">
207 <div class="edit-bar">
208 <div class="pin"></div>
209 <div class="spacer"></div>
210 <div class="remove"></div>
211 </div>
212 <span class="thumbnail-wrapper">
213 <span class="thumbnail"></span>
214 </span>
215 </div>
216 <div class="title">
217 <div></div>
218 </div>
219 </a>
220
221 </div>
222 230
223 <div id="recently-closed"> 231 <div id="recently-closed">
224 <h2 i18n-content="recentlyclosed"></h2> 232 <h2 i18n-content="recentlyclosed"></h2>
225 <span class="nav"> 233 <span class="nav">
226 <a href="chrome://history/" class="item" 234 <a href="chrome://history/" class="item"
227 i18n-content="viewfullhistory"></a> 235 i18n-content="viewfullhistory"></a>
228 </span> 236 </span>
229 </div> 237 </div>
238 <script>
239 if (!(shownSections & Section.RECENT)) {
240 $('recently-closed').className = 'collapsed';
241 }
242 </script>
230 243
231 <div id="sync-status"> 244 <div id="sync-status">
232 <h2></h2> 245 <h2></h2>
233 <span></span> 246 <span></span>
234 </div> 247 </div>
235 248
236 <div id="set-as-homepage"> 249 <div id="set-as-homepage">
237 <button class="link"> 250 <button class="link">
238 <span class="link-color" i18n-content="makethishomepage"></span> 251 <span class="link-color" i18n-content="makethishomepage"></span>
239 </button> 252 </button>
(...skipping 10 matching lines...) Expand all
250 263
251 <div id="themes-promo"> 264 <div id="themes-promo">
252 <a i18n-values="href:themelink"> 265 <a i18n-values="href:themelink">
253 <img src="ntp_themes_promo.png"> 266 <img src="ntp_themes_promo.png">
254 </a> 267 </a>
255 </div> 268 </div>
256 269
257 <div class="window-menu" id="window-tooltip"></div> 270 <div class="window-menu" id="window-tooltip"></div>
258 271
259 </body> 272 </body>
273 <script src="i18n_template.js"></script>
260 <script src="local_strings.js"></script> 274 <script src="local_strings.js"></script>
261 <script src="new_new_tab.js"></script> 275 <script src="new_new_tab.js"></script>
262 </html> 276 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/new_new_tab.css ('k') | chrome/browser/resources/new_new_tab.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698