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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 6354016: Fix layout glitches in NTP. Also, lots of naming cleanup. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 9 years, 11 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') | chrome/browser/resources/new_new_tab.js » ('J')
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 bookmarkbarattached:bookmarkbarattached; 4 bookmarkbarattached:bookmarkbarattached;
5 hasattribution:hasattribution; 5 hasattribution:hasattribution;
6 anim:anim; 6 anim:anim;
7 syncispresent:syncispresent; 7 syncispresent:syncispresent;
8 customlogo:customlogo" 8 customlogo:customlogo"
9 install-animation-enabled="true"> 9 install-animation-enabled="true">
10 <head> 10 <head>
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
68 /** 68 /**
69 * Bitmask for the different UI sections. 69 * Bitmask for the different UI sections.
70 * This matches the Section enum in ../dom_ui/shown_sections_handler.h 70 * This matches the Section enum in ../dom_ui/shown_sections_handler.h
71 * @enum {number} 71 * @enum {number}
72 */ 72 */
73 var Section = { 73 var Section = {
74 THUMB: 1 << 0, 74 THUMB: 1 << 0,
75 APPS: 1 << 6 75 APPS: 1 << 6
76 }; 76 };
77 77
78 // These are used to hide sections and are part of the |shownSections| bitmask, 78 // These are used to put sections into menu mode and are part of the
79 // but are not sections themselves. 79 // |shownSections| bitmask, but are not sections themselves.
80 var MINIMIZED_THUMB = 1 << (0 + 16); 80 var MENU_THUMB = 1 << (0 + 16);
81 var MINIMIZED_RECENT = 1 << (2 + 16); 81 var MENU_RECENT = 1 << (2 + 16);
82 var MINIMIZED_APPS = 1 << (6 + 16); 82 var MENU_APPS = 1 << (6 + 16);
83 83
84 // TODO(aa): This state is duplicated. We keep this variable up to date, but we
85 // also have the same information in the DOM. We can probably just have the DOM
86 // be the truth and translate to and from the bitmask when needed.
84 var shownSections = templateData['shown_sections']; 87 var shownSections = templateData['shown_sections'];
85 88
86 // Until themes can clear the cache, force-reload the theme stylesheet. 89 // Until themes can clear the cache, force-reload the theme stylesheet.
87 document.write('<link id="themecss" rel="stylesheet" ' + 90 document.write('<link id="themecss" rel="stylesheet" ' +
88 'href="chrome://theme/css/newtab.css?' + 91 'href="chrome://theme/css/newtab.css?' +
89 Date.now() + '">'); 92 Date.now() + '">');
90 93
91 function useSmallGrid() { 94 function useSmallGrid() {
92 return window.innerWidth <= 940; 95 return window.innerWidth <= 940;
93 } 96 }
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after
171 <span i18n-content="mostvisited"></span> 174 <span i18n-content="mostvisited"></span>
172 <button id="most-visited-settings" i18n-content="restorethumbnails"> 175 <button id="most-visited-settings" i18n-content="restorethumbnails">
173 </button> 176 </button>
174 <button class="section-close-button"></button> 177 <button class="section-close-button"></button>
175 </h2> 178 </h2>
176 <div class="miniview"></div> 179 <div class="miniview"></div>
177 </div> 180 </div>
178 181
179 <!-- Start this section disabled because it might not have data, and looks 182 <!-- Start this section disabled because it might not have data, and looks
180 silly without any. --> 183 silly without any. -->
181 <div id="recently-closed" class="section hidden disabled" section="RECENT" 184 <div id="recently-closed" class="section collapsed disabled"
182 noexpand="true"> 185 section="RECENT" noexpand="true">
183 <h2> 186 <h2>
184 <div class="back"></div> 187 <div class="back"></div>
185 <span i18n-content="recentlyclosed"></span> 188 <span i18n-content="recentlyclosed"></span>
186 <button class="section-close-button"></button> 189 <button class="section-close-button"></button>
187 </h2> 190 </h2>
188 <div class="miniview"></div> 191 <div class="miniview"></div>
189 </div> 192 </div>
190 193
191 <!-- Start disabled until sync is enabled and foreign sessions are 194 <!-- Start disabled until sync is enabled and foreign sessions are
192 available. --> 195 available. -->
193 <div id="foreign-sessions" class="section hidden disabled" section="SYNC"> 196 <div id="foreign-sessions" class="section collapsed disabled"
197 section="SYNC">
194 <h2> 198 <h2>
195 <div class="back"></div> 199 <div class="back"></div>
196 <span i18n-content="foreignsessions"></span> 200 <span i18n-content="foreignsessions"></span>
197 </h2> 201 </h2>
198 <div class="miniview"></div> 202 <div class="miniview"></div>
199 </div> 203 </div>
200 204
201 <div id="sync-status" class="section disabled"> 205 <div id="sync-status" class="section disabled">
202 <div> 206 <div>
203 <h3></h3> 207 <h3></h3>
204 <span></span> 208 <span></span>
205 </div> 209 </div>
206 </div> 210 </div>
207 </div> 211 </div>
208 212
209 <div id="closed-sections-bar"> 213 <div id="closed-sections-bar">
210 <!-- The default visibility of these buttons needs to be the opposite of the 214 <!-- The default visibility of these buttons needs to be the opposite of the
211 default visibility of the corresponding sections. --> 215 default visibility of the corresponding sections. -->
212 <button id="apps-button" 216 <button id="apps-button"
213 menu="#apps-menu"> 217 menu="#apps-menu">
214 <span i18n-content="apps"></span> 218 <span i18n-content="apps"></span>
215 <img src="ntp/ntp_disclosure_triangle.png"> 219 <img src="ntp/ntp_disclosure_triangle.png">
216 </button> 220 </button>
217 <button id="most-visited-button" 221 <button id="most-visited-button"
218 class="disabled"
219 menu="#most-visited-menu"> 222 menu="#most-visited-menu">
220 <span i18n-content="mostvisited"></span> 223 <span i18n-content="mostvisited"></span>
221 <img src="ntp/ntp_disclosure_triangle.png"> 224 <img src="ntp/ntp_disclosure_triangle.png">
222 </button> 225 </button>
223 <button id="recently-closed-button" 226 <button id="recently-closed-button"
224 menu="#recently-closed-menu"> 227 menu="#recently-closed-menu">
225 <span i18n-content="recentlyclosed"></span> 228 <span i18n-content="recentlyclosed"></span>
226 <img src="ntp/ntp_disclosure_triangle.png"> 229 <img src="ntp/ntp_disclosure_triangle.png">
227 </button> 230 </button>
228 </div> 231 </div>
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after
293 <script> 296 <script>
294 cr.ui.decorate('menu', cr.ui.Menu); 297 cr.ui.decorate('menu', cr.ui.Menu);
295 cr.ui.decorate('command', cr.ui.Command); 298 cr.ui.decorate('command', cr.ui.Command);
296 cr.ui.decorate('button[menu]', cr.ui.MenuButton); 299 cr.ui.decorate('button[menu]', cr.ui.MenuButton);
297 300
298 if (cr.isChromeOS) 301 if (cr.isChromeOS)
299 $('closed-sections-bar').setAttribute('chromeos', true); 302 $('closed-sections-bar').setAttribute('chromeos', true);
300 303
301 initializeLogin(); 304 initializeLogin();
302 305
303 initializeSection('apps', MINIMIZED_APPS, Section.APPS); 306 initializeSection('apps', MENU_APPS, Section.APPS);
304 initializeSection('most-visited', MINIMIZED_THUMB, Section.THUMB); 307 initializeSection('most-visited', MENU_THUMB, Section.THUMB);
305 initializeSection('recently-closed', MINIMIZED_RECENT); 308 initializeSection('recently-closed', MENU_RECENT);
306 309
307 updateSimpleSection('apps', Section.APPS); 310 updateSimpleSection('apps', Section.APPS);
308 updateSimpleSection('most-visited', Section.THUMB); 311 updateSimpleSection('most-visited', Section.THUMB);
309 var appsInitiallyVisible = !(shownSections & MINIMIZED_APPS); 312 var appsInitiallyMenu = (shownSections & MENU_APPS);
310 var mostVisitedInitiallyVisible = !(shownSections & MINIMIZED_THUMB); 313 var mostVisitedInitiallyMenu = (shownSections & MENU_THUMB);
311 var recentlyClosedInitiallyVisible = !(shownSections & MINIMIZED_RECENT); 314 var recentlyClosedInitiallyMenu = (shownSections & MENU_RECENT);
312 // Apps and recently closed start as hidden in the HTML, most visited is 315 setSectionMenuMode('apps', Section.APPS, appsInitiallyMenu, MENU_APPS);
313 // initially visible. Adapt to the change received from the prefs by forcing 316 setSectionMenuMode('most-visited', Section.THUMB, mostVisitedInitiallyMenu,
314 // all three sections to update. 317 MENU_THUMB);
315 shownSections &= ~MINIMIZED_THUMB; 318 setSectionMenuMode('recently-closed', undefined, recentlyClosedInitiallyMenu,
Aaron Boodman 2011/01/22 00:38:41 We no longer need to torture shownSections this wa
316 shownSections |= MINIMIZED_APPS | MINIMIZED_RECENT; 319 MENU_RECENT);
317 setSectionVisible('apps', Section.APPS, appsInitiallyVisible, MINIMIZED_APPS);
318 setSectionVisible(
319 'most-visited', Section.THUMB,
320 mostVisitedInitiallyVisible, MINIMIZED_THUMB);
321 setSectionVisible(
322 'recently-closed', undefined,
323 recentlyClosedInitiallyVisible, MINIMIZED_RECENT);
324
325 // This is insane, but we use the CSS class 'disabled' for both 'minimized'
326 // sections and sections that are actually disabled, as in not accessible in
327 // any way.
328 //
329 // The above code syncs up the DOM and shownSection wrt minimized. But we
330 // don't know until we receive the apps data whether the apps section will be
331 // disabled or not. So we need to add the 'disabled' class back to the apps
332 // section here. We remove it later, once we know for sure we want it to be
333 // enabled.
334 //
335 // See also: crbug.com/67273.
336 $('apps').classList.add('disabled');
Aaron Boodman 2011/01/22 00:38:41 No longer need this because we now have separate c
337 320
338 layoutSections(); 321 layoutSections();
339 </script> 322 </script>
340 </html> 323 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/new_new_tab.css ('k') | chrome/browser/resources/new_new_tab.js » ('j') | chrome/browser/resources/new_new_tab.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698