| OLD | NEW |
|---|
| 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 haspromo:haspromo"> | 8 haspromo:haspromo"> |
| 9 | 9 |
| 10 <meta charset="utf-8"> | 10 <meta charset="utf-8"> |
| (...skipping 29 matching lines...) Expand all Loading... |
| 40 } | 40 } |
| 41 }; | 41 }; |
| 42 global[name] = f; | 42 global[name] = f; |
| 43 } | 43 } |
| 44 | 44 |
| 45 chrome.send('getMostVisited'); | 45 chrome.send('getMostVisited'); |
| 46 chrome.send('getRecentlyClosedTabs'); | 46 chrome.send('getRecentlyClosedTabs'); |
| 47 chrome.send('getTips'); | 47 chrome.send('getTips'); |
| 48 chrome.send('getApps'); | 48 chrome.send('getApps'); |
| 49 | 49 |
| 50 registerCallback('onShownSections'); | |
| 51 registerCallback('mostVisitedPages'); | 50 registerCallback('mostVisitedPages'); |
| 52 registerCallback('recentlyClosedTabs'); | 51 registerCallback('recentlyClosedTabs'); |
| 53 registerCallback('syncMessageChanged'); | 52 registerCallback('syncMessageChanged'); |
| 54 registerCallback('tips'); | 53 registerCallback('tips'); |
| 55 registerCallback('onHomePageSet'); | 54 registerCallback('onHomePageSet'); |
| 56 registerCallback('getAppsCallback'); | 55 registerCallback('getAppsCallback'); |
| 57 | 56 |
| 58 </script> | 57 </script> |
| 59 <!-- template data placeholder --> | 58 <!-- template data placeholder --> |
| 60 <link rel="stylesheet" href="new_new_tab.css"> | 59 <link rel="stylesheet" href="new_new_tab.css"> |
| 60 <link rel="stylesheet" href="ntp/most_visited.css"> |
| 61 <script> | 61 <script> |
| 62 | 62 |
| 63 /** | 63 /** |
| 64 * Bitmask for the different UI sections. | 64 * Bitmask for the different UI sections. |
| 65 * This matches the Section enum in ../dom_ui/shown_sections_handler.h | 65 * This matches the Section enum in ../dom_ui/shown_sections_handler.h |
| 66 * @enum {number} | 66 * @enum {number} |
| 67 */ | 67 */ |
| 68 var Section = { | 68 var Section = { |
| 69 THUMB: 1, | 69 THUMB: 1, |
| 70 // LIST is no longer used | 70 // LIST is no longer used |
| 71 RECENT: 4, | 71 RECENT: 4, |
| 72 TIPS: 8, | 72 TIPS: 8, |
| 73 SYNC: 16, | 73 SYNC: 16, |
| 74 DEBUG: 32 | 74 DEBUG: 32 |
| 75 }; | 75 }; |
| 76 | 76 |
| 77 var shownSections = templateData['shown_sections']; | 77 var shownSections = templateData['shown_sections']; |
| 78 | 78 |
| 79 function $(id) { | |
| 80 return document.getElementById(id); | |
| 81 } | |
| 82 | |
| 83 // Until themes can clear the cache, force-reload the theme stylesheet. | 79 // Until themes can clear the cache, force-reload the theme stylesheet. |
| 84 document.write('<link id="themecss" rel="stylesheet" ' + | 80 document.write('<link id="themecss" rel="stylesheet" ' + |
| 85 'href="chrome://theme/css/newtab.css?' + | 81 'href="chrome://theme/css/newtab.css?' + |
| 86 (new Date()).getTime() + '">'); | 82 Date.now() + '">'); |
| 87 | 83 |
| 88 function useSmallGrid() { | 84 function useSmallGrid() { |
| 89 return window.innerWidth <= 920; | 85 return window.innerWidth <= 920; |
| 90 } | 86 } |
| 91 | 87 |
| 92 function isRtl() { | 88 function isRtl() { |
| 93 return templateData['textdirection'] == 'rtl'; | 89 return templateData['textdirection'] == 'rtl'; |
| 94 } | 90 } |
| 95 | 91 |
| 96 // Keep track of the last small state so we can ensure that we are using the | 92 // This will get overridden in new_new_tab.js |
| 97 // right mode. This is a workaround for http://crbug.com/25329 | |
| 98 var wasSmallGrid; | |
| 99 | |
| 100 function getMostVisitedLayoutRects() { | |
| 101 var small = useSmallGrid(); | |
| 102 wasSmallGrid = small; | |
| 103 | |
| 104 var cols = 4; | |
| 105 var rows = 2; | |
| 106 var marginWidth = 10; | |
| 107 var marginHeight = 7; | |
| 108 var borderWidth = 4; | |
| 109 var thumbWidth = small ? 150 : 207; | |
| 110 var thumbHeight = small ? 93 : 129; | |
| 111 var w = thumbWidth + 2 * borderWidth + 2 * marginWidth; | |
| 112 var h = thumbHeight + 40 + 2 * marginHeight; | |
| 113 var sumWidth = cols * w - 2 * marginWidth; | |
| 114 | |
| 115 var rtl = isRtl(); | |
| 116 var rects = []; | |
| 117 | |
| 118 if (shownSections & Section.THUMB) { | |
| 119 for (var i = 0; i < rows * cols; i++) { | |
| 120 var row = Math.floor(i / cols); | |
| 121 var col = i % cols; | |
| 122 var left = rtl ? sumWidth - col * w - thumbWidth - 2 * borderWidth : | |
| 123 col * w; | |
| 124 | |
| 125 var top = row * h; | |
| 126 | |
| 127 rects[i] = {left: left, top: top}; | |
| 128 } | |
| 129 } | |
| 130 return rects; | |
| 131 } | |
| 132 | |
| 133 function applyMostVisitedRects() { | |
| 134 if (shownSections & Section.THUMB) { | |
| 135 var rects = getMostVisitedLayoutRects(); | |
| 136 var children = $('most-visited').children; | |
| 137 for (var i = 0; i < 8; i++) { | |
| 138 var t = children[i]; | |
| 139 t.style.left = rects[i].left + 'px'; | |
| 140 t.style.top = rects[i].top + 'px'; | |
| 141 t.style.right = ''; | |
| 142 var innerStyle = t.firstElementChild.style; | |
| 143 innerStyle.left = innerStyle.top = ''; | |
| 144 } | |
| 145 } | |
| 146 } | |
| 147 | |
| 148 // TODO(arv): Remove these when classList is available in HTML5. | |
| 149 // https://bugs.webkit.org/show_bug.cgi?id=20709 | |
| 150 function hasClass(el, name) { | |
| 151 return el.nodeType == 1 && el.className.split(/\s+/).indexOf(name) != -1; | |
| 152 } | |
| 153 | |
| 154 function addClass(el, name) { | |
| 155 var names = el.className.split(/\s+/); | |
| 156 if (names.indexOf(name) == -1) { | |
| 157 el.className += ' ' + name; | |
| 158 } | |
| 159 } | |
| 160 | |
| 161 function removeClass(el, name) { | |
| 162 var names = el.className.split(/\s+/); | |
| 163 el.className = names.filter(function(n) { | |
| 164 return name != n; | |
| 165 }).join(' '); | |
| 166 } | |
| 167 | |
| 168 function updateSimpleSection(id, section) { | 93 function updateSimpleSection(id, section) { |
| 169 if (shownSections & section) | 94 // All sections start off shown. |
| 170 removeClass($(id), 'hidden'); | 95 if (!(shownSections & section)) |
| 171 else | 96 document.getElementById(id).className += ' hidden'; |
| 172 addClass($(id), 'hidden'); | |
| 173 } | 97 } |
| 174 | 98 |
| 175 </script> | 99 </script> |
| 176 </head> | 100 </head> |
| 177 <body class="loading" | 101 <body class="loading" |
| 178 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> | 102 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| 179 | 103 |
| 180 <div id="container"> | 104 <div id="container"> |
| 181 <div id="main"> | 105 <div id="main"> |
| 182 | 106 |
| (...skipping 11 matching lines...) Expand all Loading... |
| 194 <hr> | 118 <hr> |
| 195 <div command="clear-all-blacklisted" | 119 <div command="clear-all-blacklisted" |
| 196 i18n-content="restorethumbnails"></div> | 120 i18n-content="restorethumbnails"></div> |
| 197 </div> | 121 </div> |
| 198 | 122 |
| 199 <div id="notification"> | 123 <div id="notification"> |
| 200 <span> </span> | 124 <span> </span> |
| 201 <span class="link"><span class="link-color"></span></span> | 125 <span class="link"><span class="link-color"></span></span> |
| 202 </div> | 126 </div> |
| 203 | 127 |
| 204 <div class="section disabled" id="apps-section"></div> | 128 <div class="sections"> |
| 129 <div class="section disabled" id="apps-section"></div> |
| 205 | 130 |
| 206 <div id="most-visited-section" class="section" section="THUMB"> | 131 <div id="most-visited-section" class="section" section="THUMB"> |
| 207 <h2 i18n-content="mostvisited"></h2> | 132 <h2 i18n-content="mostvisited"></h2> |
| 133 <div id="most-visited"></div> |
| 134 </div> |
| 208 | 135 |
| 209 <div id="most-visited"> | 136 <div id="recently-closed" class="section" section="RECENT"> |
| 210 <a class="thumbnail-container filler" tabindex="1" id="t0"> | 137 <h2 i18n-content="recentlyclosed"></h2> |
| 211 <div class="edit-mode-border"> | 138 <span> |
| 212 <div class="edit-bar"> | 139 <span class="nav"> |
| 213 <div class="pin"></div> | 140 <a href="chrome://history/" class="item" |
| 214 <div class="spacer"></div> | 141 i18n-content="viewfullhistory"></a> |
| 215 <div class="remove"></div> | 142 </span> |
| 216 </div> | 143 </span> |
| 217 <span class="thumbnail-wrapper"> | 144 </div> |
| 218 <span class="thumbnail"></span> | 145 |
| 219 </span> | 146 <div id="debug" class="section disabled" section="DEBUG"> |
| 220 </div> | 147 <h2>Debug</h2> |
| 221 <div class="title"> | 148 <div id="apps-launch-control"> |
| 222 <div></div> | 149 Open apps in:<label |
| 223 </div> | 150 ><input type="radio" name="launch-container-type" value="" |
| 224 </a> | 151 checked="true">Default</label |
| 152 ><label><input type="radio" name="launch-container-type" value="tab" |
| 153 >Tab</label |
| 154 ><label><input type="radio" name="launch-container-type" value="window" |
| 155 >Window</label |
| 156 ><label><input type="radio" name="launch-container-type" value="panel" |
| 157 >Panel</label> |
| 158 </div> |
| 225 </div> | 159 </div> |
| 226 </div> | 160 </div> |
| 227 | 161 |
| 228 <div id="recently-closed" class="section" section="RECENT"> | |
| 229 <h2 i18n-content="recentlyclosed"></h2> | |
| 230 <span> | |
| 231 <span class="nav"> | |
| 232 <a href="chrome://history/" class="item" | |
| 233 i18n-content="viewfullhistory"></a> | |
| 234 </span> | |
| 235 </span> | |
| 236 </div> | |
| 237 | |
| 238 <div id="debug" class="section disabled" section="DEBUG"> | |
| 239 <h2>Debug</h2> | |
| 240 <div id="apps-launch-control"> | |
| 241 Open apps in:<label | |
| 242 ><input type="radio" name="launch-container-type" value="" | |
| 243 checked="true">Default</label | |
| 244 ><label><input type="radio" name="launch-container-type" value="tab" | |
| 245 >Tab</label | |
| 246 ><label><input type="radio" name="launch-container-type" value="window" | |
| 247 >Window</label | |
| 248 ><label><input type="radio" name="launch-container-type" value="panel" | |
| 249 >Panel</label> | |
| 250 </div> | |
| 251 </div> | |
| 252 | |
| 253 <script> | 162 <script> |
| 254 (function() { | 163 (function() { |
| 255 updateSimpleSection('recently-closed', Section.RECENT); | 164 updateSimpleSection('recently-closed', Section.RECENT); |
| 256 updateSimpleSection('most-visited-section', Section.THUMB); | 165 updateSimpleSection('most-visited-section', Section.THUMB); |
| 257 updateSimpleSection('debug', Section.DEBUG); | 166 updateSimpleSection('debug', Section.DEBUG); |
| 258 var el = $('most-visited'); | |
| 259 for (var i = 1; i < 8; i++) { | |
| 260 el.appendChild(el.firstElementChild.cloneNode(true)).id = 't' + i; | |
| 261 } | |
| 262 | |
| 263 applyMostVisitedRects(); | |
| 264 })(); | 167 })(); |
| 265 </script> | 168 </script> |
| 266 | 169 |
| 267 <div id="sync-status"> | 170 <div id="sync-status"> |
| 268 <h2></h2> | 171 <h2></h2> |
| 269 <span></span> | 172 <span></span> |
| 270 </div> | 173 </div> |
| 271 | 174 |
| 272 <div id="attribution" class="attribution"> | 175 <div id="attribution" class="attribution"> |
| 273 <div i18n-content="attributionintro"></div> | 176 <div i18n-content="attributionintro"></div> |
| (...skipping 13 matching lines...) Expand all Loading... |
| 287 <img id="promo-image" src="chrome://theme/newtab_extensions_promo"> | 190 <img id="promo-image" src="chrome://theme/newtab_extensions_promo"> |
| 288 </a> | 191 </a> |
| 289 </div> | 192 </div> |
| 290 </div> | 193 </div> |
| 291 | 194 |
| 292 </div> <!-- container --> | 195 </div> <!-- container --> |
| 293 | 196 |
| 294 <div class="window-menu" id="window-tooltip"></div> | 197 <div class="window-menu" id="window-tooltip"></div> |
| 295 | 198 |
| 296 </body> | 199 </body> |
| 200 |
| 297 <script src="shared/js/i18n_template.js"></script> | 201 <script src="shared/js/i18n_template.js"></script> |
| 298 <script src="shared/js/local_strings.js"></script> | 202 <script src="shared/js/local_strings.js"></script> |
| 203 <script src="shared/js/class_list.js"></script> |
| 299 <script src="shared/js/parse_html_subset.js"></script> | 204 <script src="shared/js/parse_html_subset.js"></script> |
| 205 <script src="ntp/util.js"></script> |
| 206 <script src="ntp/most_visited.js"></script> |
| 300 <script src="new_new_tab.js"></script> | 207 <script src="new_new_tab.js"></script> |
| 301 <script src="ntp/most_visited.js"></script> | |
| 302 </html> | 208 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1695022:
NTP - Refactor the most visited code to uncouple it from the rest of the NTP.... (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/