diff options
author | aa@chromium.org <aa@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2010-09-30 23:37:47 +0000 |
---|---|---|
committer | aa@chromium.org <aa@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2010-09-30 23:37:47 +0000 |
commit | 181b7765139f0a43afbfd19bb9f25b6bac3e92d6 (patch) | |
tree | 69102351d6261a0427ae34600ceda6383f528b73 | |
parent | 8b78210f6a76367500196e78ab8d30cc475f4e81 (diff) | |
download | chromium_src-181b7765139f0a43afbfd19bb9f25b6bac3e92d6.zip chromium_src-181b7765139f0a43afbfd19bb9f25b6bac3e92d6.tar.gz chromium_src-181b7765139f0a43afbfd19bb9f25b6bac3e92d6.tar.bz2 |
Revert r61095 and r61128. I found several issues when testing
this and I don't feel comfortable leaving it on trunk while
they are ironed out.
The terminology in the code is a bit schizophrenic at the
moment, so for clarity:
open = big icons showing
closed = small icons showing
hidden = no icons showing (button in bottom of tab)
1. If the apps section is hidden and an app is installed, the
apps section comes back weirdly. The content is visible, but
the header is not and the menu along the bottom of the tab
is still there.
2. Sections' open state not persisted. If you click on a
header to make a section open, then refresh, that section is
closed again.
3. If you open the most visited section, then refresh, the
most visited section will look closed. But if you hover in
the empty area in the bottom of the tab, you will get
cursor changes and status bubbles. This is probably related
to 2, above.
These aren't that hard to fix probably, but there are a few
other high priority minor fixes I need to get in for m7,
and I'm afraid of this change conflicting with them for
merges. So I'm pulling this out until one of us has time to
get back to it.
TBR=thakis@chromium.org
BUG=55148
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@61130 0039d316-1c4b-4281-b951-d872f2087c98
-rw-r--r-- | chrome/browser/dom_ui/shown_sections_handler.cc | 5 | ||||
-rw-r--r-- | chrome/browser/dom_ui/shown_sections_handler.h | 12 | ||||
-rw-r--r-- | chrome/browser/resources/new_new_tab.css | 66 | ||||
-rw-r--r-- | chrome/browser/resources/new_new_tab.html | 58 | ||||
-rw-r--r-- | chrome/browser/resources/new_new_tab.js | 149 | ||||
-rw-r--r-- | chrome/browser/resources/new_tab_theme.css | 6 | ||||
-rw-r--r-- | chrome/browser/resources/ntp/apps.js | 20 | ||||
-rw-r--r-- | chrome/browser/resources/ntp/most_visited.js | 17 |
8 files changed, 19 insertions, 314 deletions
diff --git a/chrome/browser/dom_ui/shown_sections_handler.cc b/chrome/browser/dom_ui/shown_sections_handler.cc index 381ea32..e32511d 100644 --- a/chrome/browser/dom_ui/shown_sections_handler.cc +++ b/chrome/browser/dom_ui/shown_sections_handler.cc @@ -21,11 +21,10 @@ namespace { // Will cause an UMA notification if the mode of the new tab page // was changed to hide/show the most visited thumbnails. -// TODO(aa): Needs to be updated to match newest NTP - http://crbug.com/57440 void NotifySectionDisabled(int new_mode, int old_mode, Profile *profile) { // If the oldmode HAD either thumbs or lists visible. - bool old_had_it = (old_mode & THUMB) && !(old_mode & MINIMIZED_THUMB); - bool new_has_it = (new_mode & THUMB) && !(new_mode & MINIMIZED_THUMB); + bool old_had_it = old_mode & THUMB; + bool new_has_it = new_mode & THUMB; if (old_had_it && !new_has_it) { UserMetrics::RecordAction( diff --git a/chrome/browser/dom_ui/shown_sections_handler.h b/chrome/browser/dom_ui/shown_sections_handler.h index be07735..a281346 100644 --- a/chrome/browser/dom_ui/shown_sections_handler.h +++ b/chrome/browser/dom_ui/shown_sections_handler.h @@ -18,16 +18,8 @@ class PrefService; // Currently, only the THUMB and APPS sections can be toggled by the user. Other // sections are shown automatically if they have data, and hidden otherwise. enum Section { - // If one of these is set, the corresponding section shows large thumbnails, - // else it shows only a small overview list. - THUMB = 1 << 0, - APPS = 1 << 6, - - // If one of these is set, then the corresponding section is shown minimized - // at the bottom of the NTP and no data is directly visible on the NTP. - MINIMIZED_THUMB = 1 << (0 + 16), - MINIMIZED_RECENT = 1 << (2 + 16), - MINIMIZED_APPS = 1 << (6 + 16), + THUMB = 1, + APPS = 64 }; class ShownSectionsHandler : public DOMMessageHandler, diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css index 9d72dff..b3bfd35 100644 --- a/chrome/browser/resources/new_new_tab.css +++ b/chrome/browser/resources/new_new_tab.css @@ -279,8 +279,7 @@ html[anim=true][enable-section-animations=true] .section { -webkit-transition: top .15s; } -.section.disabled, -#closed-sections-bar .disabled { +.section.disabled { display: none !important; } @@ -314,7 +313,7 @@ html[anim=true] .section > h2 > .disclosure { } .section:not(.hidden) > h2 > .disclosure { - -webkit-transform: rotate(90deg); + -webkit-transform:rotate(90deg); } .section > h2 .back { @@ -332,67 +331,6 @@ html[anim=true] .section > h2 > .disclosure { z-index: 2; } -.section-close-button { - -webkit-appearance: none; - -webkit-transition: opacity .15s; - background-color: transparent; - background-image: url(chrome://theme/IDR_CLOSE_BAR); - background-position: center center; - background-repeat no-repeat; - border: 0; - height: 21px; - margin-top: -10px; - position: absolute; - right: -21px; - top: 50%; - width: 21px; - opacity: 0; - z-index: 3; -} - -html[dir=rtl] .section-close-button { - left: -21px; - right: auto; -} - -.section > h2:hover .section-close-button, -.section-close-button:hover { - opacity: 1; -} - -.section-close-button:hover { - background-image: url(chrome://theme/IDR_CLOSE_BAR_H); -} - -#closed-sections-bar { - position: fixed; - bottom: 5px; -} - -#closed-sections-bar > button { - -webkit-appearance: none; - background: none; - border: 0; - cursor: pointer; - font: inherit; - margin: 0; - margin-right: 1.5em; - padding: 0; - - /* Note: The font here should end up the same as .section > h2. A different - percentage is needed because the parent element here has a different size. */ - font-family: Helvetica, Arial, sans-serif; - font-size: 122%; - font-weight: normal; -} - -#closed-sections-bar > button > img { - -webkit-transform: rotate(90deg); - position: relative; - top: -2px; - margin-left: 1px; -} - .maxiview { padding: 5px 0 30px; position: absolute; diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html index 6f15bb4..7290e32 100644 --- a/chrome/browser/resources/new_new_tab.html +++ b/chrome/browser/resources/new_new_tab.html @@ -67,16 +67,10 @@ registerCallback('setShownSections'); * @enum {number} */ var Section = { - THUMB: 1 << 0, - APPS: 1 << 6 + THUMB: 1, + APPS: 64 }; -// These are used to hide sections and are part of the |shownSections| bitmask, -// but are not sections themselves. -var MINIMIZED_THUMB = 1 << (0 + 16); -var MINIMIZED_RECENT = 1 << (2 + 16); -var MINIMIZED_APPS = 1 << (6 + 16); - var shownSections = templateData['shown_sections']; // Until themes can clear the cache, force-reload the theme stylesheet. @@ -141,7 +135,6 @@ if ('mode' in hashParams) { <img class="disclosure" img src="ntp/ntp_disclosure_triangle.png"> <div class="back"></div> <span i18n-content="apps"></span> - <button class="section-close-button"></button> </h2> <div class="miniview"></div> </div> @@ -153,7 +146,6 @@ if ('mode' in hashParams) { <span i18n-content="mostvisited"></span> <button id="most-visited-settings" i18n-content="restorethumbnails"> </button> - <button class="section-close-button"></button> </h2> <div class="miniview"></div> </div> @@ -165,7 +157,6 @@ if ('mode' in hashParams) { <h2> <div class="back"></div> <span i18n-content="recentlyclosed"></span> - <button class="section-close-button"></button> </h2> <div class="miniview"></div> </div> @@ -177,27 +168,6 @@ if ('mode' in hashParams) { </div> </div> </div> - - <div id="closed-sections-bar"> - <!-- The default visibility of these buttons needs to be the opposite of the - default visibility of the corresponding sections. --> - <button id="apps-button" - menu="#apps-menu"> - <span i18n-content="apps"></span> - <img src="ntp/ntp_disclosure_triangle.png"> - </button> - <button id="most-visited-button" - class="disabled" - menu="#most-visited-menu"> - <span i18n-content="mostvisited"></span> - <img src="ntp/ntp_disclosure_triangle.png"> - </button> - <button id="recently-closed-button" - menu="#recently-closed-menu"> - <span i18n-content="recentlyclosed"></span> - <img src="ntp/ntp_disclosure_triangle.png"> - </button> - </div> </div> <!-- main --> <div class="window-menu" id="window-tooltip"></div> @@ -224,11 +194,6 @@ if ('mode' in hashParams) { <button command="#apps-uninstall-command"></button> </menu> -<!-- These are populated dynamically --> -<menu id="apps-menu"></menu> -<menu id="most-visited-menu"></menu> -<menu id="recently-closed-menu"></menu> - </body> <script src="shared/js/i18n_template.js"></script> @@ -261,27 +226,8 @@ cr.ui.decorate('button[menu]', cr.ui.MenuButton); </script> <script> - initializeSection('apps', MINIMIZED_APPS, Section.APPS); - initializeSection('most-visited', MINIMIZED_THUMB, Section.THUMB); - initializeSection('recently-closed', MINIMIZED_RECENT); - updateSimpleSection('apps', Section.APPS); updateSimpleSection('most-visited', Section.THUMB); - var appsInitiallyVisible = !(shownSections & MINIMIZED_APPS); - var mostVisitedInitiallyVisible = !(shownSections & MINIMIZED_THUMB); - var recentlyClosedInitiallyVisible = !(shownSections & MINIMIZED_RECENT); - // Apps and recently closed start as hidden in the HTML, most visited is - // initially visible. Adapt to the change received from the prefs by forcing - // all three sections to update. - shownSections &= ~MINIMIZED_THUMB; - shownSections |= MINIMIZED_APPS | MINIMIZED_RECENT; - setSectionVisible('apps', Section.APPS, appsInitiallyVisible, MINIMIZED_APPS); - setSectionVisible( - 'most-visited', Section.THUMB, - mostVisitedInitiallyVisible, MINIMIZED_THUMB); - setSectionVisible( - 'recently-closed', undefined, - recentlyClosedInitiallyVisible, MINIMIZED_RECENT); layoutSections(); </script> </html> diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js index 39c7718..99cb712 100644 --- a/chrome/browser/resources/new_new_tab.js +++ b/chrome/browser/resources/new_new_tab.js @@ -9,95 +9,6 @@ var MAX_MINIVIEW_ITEMS = 15; // Extra spacing at the top of the layout. var LAYOUT_SPACING_TOP = 25; -function getSectionCloseButton(sectionId) { - return document.querySelector('#' + sectionId + ' .section-close-button'); -} - -function getSectionMenuButton(sectionId) { - return $(sectionId + '-button'); -} - -function getSectionMenuButtonTextId(sectionId) { - return sectionId.replace(/-/g, ''); -} - -function setSectionVisible(sectionId, section, visible, hideMask) { - if (visible && !(shownSections & hideMask) || - !visible && (shownSections & hideMask)) - return; - - if (visible) { - if (section) { - showOnlySection(section); - } - var el = $(sectionId); - el.classList.remove('disabled'); - el = getSectionMenuButton(sectionId); - el.classList.add('disabled'); - shownSections &= ~hideMask; - } else { - if (section) { - hideSection(section); - } - var el = $(sectionId); - el.classList.add('disabled'); - el = getSectionMenuButton(sectionId); - el.classList.remove('disabled'); - shownSections |= hideMask; - } - layoutSections(); -} - -function clearClosedMenu(menu) { - menu.innerHTML = ''; -} - -function addClosedMenuEntryWithLink(menu, a) { - var span = document.createElement('span'); - a.className += ' item menuitem'; - span.appendChild(a); - menu.appendChild(span); -} - -function addClosedMenuEntry(menu, url, title, imageUrl) { - var a = document.createElement('a'); - a.href = url; - a.textContent = title; - a.style.backgroundImage = 'url(' + imageUrl + ')'; - addClosedMenuEntryWithLink(menu, a); -} - -function addClosedMenuFooter(menu, sectionId, mask, opt_section) { - menu.appendChild(document.createElement('hr')); - - var span = document.createElement('span'); - var a = span.appendChild(document.createElement('a')); - a.href = ''; - a.textContent = - localStrings.getString(getSectionMenuButtonTextId(sectionId)); - a.className = 'item'; - a.addEventListener( - 'click', - function(e) { - getSectionMenuButton(sectionId).hideMenu(); - e.preventDefault(); - setSectionVisible(sectionId, opt_section, true, mask); - shownSections &= ~mask; - saveShownSections(); - }); - menu.appendChild(span); -} - -function initializeSection(sectionId, mask, opt_section) { - var button = getSectionCloseButton(sectionId); - button.addEventListener( - 'click', - function() { - setSectionVisible(sectionId, opt_section, false, mask); - saveShownSections(); - }); -} - function updateSimpleSection(id, section) { var elm = $(id); var maxiview = getSectionMaxiview(elm); @@ -127,14 +38,10 @@ function renderRecentlyClosed() { var recentElement = $('recently-closed'); var parentEl = recentElement.lastElementChild; parentEl.textContent = ''; - var recentMenu = $('recently-closed-menu'); - clearClosedMenu(recentMenu); recentItems.forEach(function(item) { parentEl.appendChild(createRecentItem(item)); - addRecentMenuItem(recentMenu, item); }); - addClosedMenuFooter(recentMenu, 'recently-closed', MINIMIZED_RECENT); layoutRecentlyClosed(); } @@ -163,26 +70,6 @@ function createRecentItem(data) { return wrapperEl; } -function addRecentMenuItem(menu, data) { - var isWindow = data.type == 'window'; - var a = document.createElement('a'); - if (isWindow) { - a.textContent = formatTabsText(data.tabs.length); - a.className = 'window'; // To get the icon from the CSS .window rule. - a.href = ''; // To make underline show up. - } else { - a.href = data.url; - a.style.backgroundImage = 'url(chrome://favicon/' + data.url + ')'; - a.textContent = data.title; - } - function clickHandler(e) { - chrome.send('reopenTab', [String(data.sessionId)]); - e.preventDefault(); - } - a.addEventListener('click', clickHandler); - addClosedMenuEntryWithLink(menu, a); -} - function saveShownSections() { chrome.send('setShownSections', [String(shownSections)]); } @@ -315,9 +202,6 @@ function layoutSections() { for (; section = sections[i]; i++) { footerHeight += section.fixedHeight; } - // Leave room for bottom bar if it's visible. - footerHeight += $('closed-sections-bar').offsetHeight; - // Determine the height to use for the expanded section. If there isn't enough // space to show the expanded section completely, this will be the available @@ -421,7 +305,6 @@ function getSectionMaxiview(section) { return $(section.id + '-maxiview'); } -// You usually want to call |showOnlySection()| instead of this. function showSection(section) { if (!(section & shownSections)) { shownSections |= section; @@ -445,17 +328,6 @@ function showSection(section) { } } -// Show this section and hide all other sections - at most one section can -// be open at one time. -function showOnlySection(section) { - for (var p in Section) { - if (p == section) - showSection(Section[p]); - else - hideSection(Section[p]); - } -} - function hideSection(section) { if (section & shownSections) { shownSections &= ~section; @@ -502,15 +374,6 @@ function setShownSections(newShownSections) { else hideSection(Section[key]); } - setSectionVisible( - 'apps', Section.APPS, - !(newShownSections & MINIMIZED_APPS), MINIMIZED_APPS); - setSectionVisible( - 'most-visited', Section.THUMB, - !(newShownSections & MINIMIZED_THUMB), MINIMIZED_THUMB); - setSectionVisible( - 'recently-closed', undefined, - !(newShownSections & MINIMIZED_RECENT), MINIMIZED_RECENT); layoutSections(); } @@ -536,9 +399,7 @@ function layoutRecentlyClosed() { }); if (parentEl.hasChildNodes()) { - if (!(shownSections & MINIMIZED_RECENT)) { - recentElement.classList.remove('disabled'); - } + recentElement.classList.remove('disabled'); } else { recentElement.classList.add('disabled'); } @@ -837,7 +698,12 @@ function toggleSectionVisibilityAndAnimate(section) { if (shownSections & Section[section]) { hideSection(Section[section]); } else { - showOnlySection(section); + for (var p in Section) { + if (p == section) + showSection(Section[p]); + else + hideSection(Section[p]); + } } layoutSections(); saveShownSections(); @@ -1075,7 +941,6 @@ updateAttribution(); var mostVisited = new MostVisited( $('most-visited-maxiview'), document.querySelector('#most-visited .miniview'), - $('most-visited-menu'), useSmallGrid(), shownSections & Section.THUMB); diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css index 7500a4f..88e3fcc 100644 --- a/chrome/browser/resources/new_tab_theme.css +++ b/chrome/browser/resources/new_tab_theme.css @@ -102,8 +102,7 @@ body { color: $$5; /* COLOR_NTP_LINK_UNDERLINE */ } -.section > h2, -#closed-sections-bar > button { +.section > h2 { color: $$7; /* COLOR_NTP_SECTION_HEADER_TEXT */ } @@ -111,8 +110,7 @@ body { color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT_HOVER */ } -.section.hidden:not([noexpand]) > h2:hover, -#closed-sections-bar > button:hover { +.section.hidden:not([noexpand]) > h2:hover { color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT_HOVER */ } diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js index 2117afe..68a1be6 100644 --- a/chrome/browser/resources/ntp/apps.js +++ b/chrome/browser/resources/ntp/apps.js @@ -10,7 +10,6 @@ function getAppsCallback(data) { appsSectionContent.textContent = ''; appsMiniview.textContent = ''; - clearClosedMenu(apps.menu); if (data.apps.length == 0) { appsSection.classList.add('disabled'); layoutSections(); @@ -23,14 +22,10 @@ function getAppsCallback(data) { data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) { appsMiniview.appendChild(apps.createMiniviewElement(app)); - addClosedMenuEntryWithLink(apps.menu, apps.createClosedMenuElement(app)); }); - if (!(shownSections & MINIMIZED_APPS)) { - appsSection.classList.remove('disabled'); - } + appsSection.classList.remove('disabled'); } - addClosedMenuFooter(apps.menu, 'apps', MINIMIZED_APPS, Section.APPS); apps.loaded = true; maybeDoneLoading(); @@ -204,8 +199,6 @@ var apps = (function() { return { loaded: false, - menu: $('apps-menu'), - createElement: function(app) { var div = createElement(app); var a = div.firstChild; @@ -258,17 +251,6 @@ var apps = (function() { return span; }, - createClosedMenuElement: function(app) { - var a = document.createElement('a'); - a.setAttribute('app-id', app['id']); - a.textContent = app['name']; - a.href = app['launch_url']; - a.onclick = handleClick; - a.style.backgroundImage = url(app['icon_small']); - a.className = 'item'; - return a; - }, - createWebStoreElement: function() { return createElement({ 'id': 'web-store-entry', diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js index 72557ac..98f3317 100644 --- a/chrome/browser/resources/ntp/most_visited.js +++ b/chrome/browser/resources/ntp/most_visited.js @@ -41,10 +41,9 @@ var MostVisited = (function() { return Array.prototype.indexOf.call(nodes, el); } - function MostVisited(el, miniview, menu, useSmallGrid, visible) { + function MostVisited(el, miniview, useSmallGrid, visible) { this.element = el; this.miniview = miniview; - this.menu = menu; this.useSmallGrid_ = useSmallGrid; this.visible_ = visible; @@ -537,7 +536,6 @@ var MostVisited = (function() { this.data_ = data; this.updateMostVisited_(); this.updateMiniview_(); - this.updateMenu_(); }, updateMostVisited_: function() { @@ -611,19 +609,6 @@ var MostVisited = (function() { updateMiniviewClipping(this.miniview); }, - updateMenu_: function() { - clearClosedMenu(this.menu); - var data = this.data.slice(0, MAX_MINIVIEW_ITEMS); - for (var i = 0, item; item = data[i]; i++) { - if (!item.filler) { - addClosedMenuEntry( - this.menu, item.url, item.title, 'chrome://favicon/' + item.url); - } - } - addClosedMenuFooter( - this.menu, 'most-visited', MINIMIZED_THUMB, Section.THUMB); - }, - handleClick_: function(e) { var target = e.target; if (target.classList.contains('pin')) { |