From a616d400611c859af00c4f2986f326959ef4b6e4 Mon Sep 17 00:00:00 2001 From: "aa@chromium.org" Date: Thu, 26 Aug 2010 05:29:54 +0000 Subject: First set of changes for M7 NTP. This doesn't do any behavior changes -- it just implements the styling. So we still have multi expand, and the recently closed section is still toggleable. I also didn't make the changes to the placement or text of the web store icon. I will make those separately. Screen caps: http://aaronboodman.com/z_dropbox/cr3156049/ BUG=53248 Review URL: http://codereview.chromium.org/3156049 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@57473 0039d316-1c4b-4281-b951-d872f2087c98 --- chrome/browser/resources/new_new_tab.css | 81 +++++++++--------------------- chrome/browser/resources/new_new_tab.html | 33 +++++------- chrome/browser/resources/new_new_tab.js | 16 ++++-- chrome/browser/resources/new_tab_theme.css | 33 +++++------- chrome/browser/resources/ntp/apps.css | 3 +- chrome/browser/resources/ntp/apps.js | 20 ++------ 6 files changed, 68 insertions(+), 118 deletions(-) (limited to 'chrome/browser/resources') diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css index 80d991c..fe76ed2 100644 --- a/chrome/browser/resources/new_new_tab.css +++ b/chrome/browser/resources/new_new_tab.css @@ -18,10 +18,9 @@ html[mode=app-launcher] { #main { -webkit-box-sizing: border-box; -webkit-transition: width .15s; - background: url(chrome://theme/IDR_PRODUCT_LOGO) no-repeat 0 6px; margin: 0 auto; min-height: 100%; - padding-bottom: 25px; /* Make room for the bottom positioned footer. */ + padding:10px 0 20px; position: relative; width: 920px; } @@ -215,6 +214,10 @@ html[dir=rtl] .item { max-width: none !important; } +#most-visited { + margin-bottom: 20px; +} + .nav > a { /* no icon */ padding: 0; @@ -245,12 +248,6 @@ html[dir=rtl] .item { margin: 0 10px; } -#top-bar { - display: -webkit-box; - -webkit-box-align: center; - min-height: 56px; -} - .notification.hidden { opacity: 0; pointer-events: none; @@ -340,11 +337,6 @@ html[dir=rtl] #option-menu > [command=hide]:before { font-family: inherit; } -#apps-section { - padding: 10px 0px; - border-top: 0; -} - #apps-launch-control { margin-top: 10px; } @@ -368,29 +360,37 @@ html[dir=rtl] #option-menu > [command=hide]:before { display: none !important; } -.section + :not(.hidden) { - border-top: 0; -} - .section > div { margin-bottom: 10px; } .section > h2 { - display: inline-block; - margin: 0; - font-size: 100%; + background-position: 0 center; + background-repeat: no-repeat; + -webkit-background-size: 100% 26px; cursor: pointer; - margin-top: 10px; - margin-bottom: 10px; + display: block; + font-family: Helvetica, Arial, sans-serif; + font-size: 16px; + font-weight: normal; + margin:10px 0; + -webkit-margin-collapse: separate; } -.section > h2:hover { - text-decoration: underline; +.section > h2 > img { + margin-left:-13px; + padding-right:4px; +} + +.section:not(.hidden) > h2 > img { + -webkit-transform:rotate(90deg); +} + +.section > h2 > span { + padding-right: 4px; } .section.hidden { - display: inline; border: 0; } @@ -398,10 +398,6 @@ html[dir=rtl] #option-menu > [command=hide]:before { display: none !important; } -.section > h2 { - margin-right: 5px; -} - .section.hidden > h2 { margin-right: 0px; } @@ -410,10 +406,6 @@ html[dir=rtl] #option-menu > [command=hide]:before { border-right: 0; } -.section.hidden + .hidden > h2 { - padding-left: 5px; -} - .section:last-child { border-bottom: 0; } @@ -422,10 +414,6 @@ html[dir=rtl] #option-menu > [command=hide]:before { display: inline-block; } -#apps { - margin-top: 10px; -} - .section > * { font-size: 12px; } @@ -454,22 +442,3 @@ html[dir=rtl] #option-menu > [command=hide]:before { margin-right: 10px; } } - -#footer { - bottom: 0; - padding-bottom: 5px; - position: absolute; - text-align: end; - width: 100%; -} - -#footer hr { - border: 0; - display: inline; - margin: 0; - padding: 0; -} - -#footer hr:after { - content: "|"; -} diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html index c8a01b5..0c04940 100644 --- a/chrome/browser/resources/new_new_tab.html +++ b/chrome/browser/resources/new_new_tab.html @@ -71,7 +71,8 @@ var Section = { RECENT: 4, // TIPS is no longer used SYNC: 16, - DEBUG: 32 + DEBUG: 32, + APPS: 64 }; var shownSections = templateData['shown_sections']; @@ -125,11 +126,6 @@ if ('mode' in hashParams) {
-
- -
-
@@ -144,20 +140,25 @@ if ('mode' in hashParams) {
-
+
+

+
+
-

+

-

+

-

Debug

+

Debug

Open apps in:
- -
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js index b9404a6..c0f32bf 100644 --- a/chrome/browser/resources/new_new_tab.js +++ b/chrome/browser/resources/new_new_tab.js @@ -587,6 +587,9 @@ OptionMenu.prototype = { } }; +// TODO(aa): The 'clear-all-blacklisted' feature needs to move into a menu in +// the most visited section. +/* var optionMenu = new OptionMenu($('option-button'), $('option-menu')); optionMenu.commands = { 'clear-all-blacklisted' : function() { @@ -604,10 +607,16 @@ optionMenu.commands = { saveShownSections(); } }; +*/ $('main').addEventListener('click', function(e) { - if (e.target.tagName == 'H2') { - var p = e.target.parentNode; + var p = e.target; + while (p && p.tagName != 'H2') { + p = p.parentNode; + } + + if (p) { + p = p.parentNode; var section = p.getAttribute('section'); if (section) { if (shownSections & Section[section]) @@ -806,7 +815,8 @@ function callGetSyncMessageIfSyncIsPresent() { } function hideAllMenus() { - optionMenu.hide(); + // TODO(aa): See comment in definition of optionMenu. + //optionMenu.hide(); } window.addEventListener('blur', hideAllMenus); diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css index 150d3be..7597812 100644 --- a/chrome/browser/resources/new_tab_theme.css +++ b/chrome/browser/resources/new_tab_theme.css @@ -16,10 +16,8 @@ body { overflow: auto; } -#main { - background: url(chrome://theme/IDR_PRODUCT_LOGO?$1) no-repeat 0 8px; -} - +/* TODO(aa): Is this still in use? The styling may be incorrect with M7 NTP + rework. */ #notification.first-run { background-color: $$1; /* COLOR_NTP_SECTION */ border-color: $$2; /* COLOR_NTP_SECTION_BORDER */ @@ -107,25 +105,22 @@ body { color: $$6; /* COLOR_NTP_LINK_UNDERLINE */ } -#top-bar { - border-bottom: 1px solid $$2; /* COLOR_NTP_SECTION_BORDER */ +.section > h2 { + color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */ + background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND); } -.section { - border-top: 1px solid $$2; /* COLOR_NTP_SECTION_BORDER */ - border-bottom: 1px solid $$2; /* COLOR_NTP_SECTION_BORDER */ +.section > h2:hover { + color: $$9; + background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_H); } -.section.hidden + :not(.hidden) { - border-top: 1px solid $$2; /* COLOR_NTP_SECTION_BORDER */; +.section:not(.hidden) > h2 { + background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_A); } -.section.hidden + .hidden > h2 { - border-left: 1px solid $$2; /* COLOR_NTP_SECTION_BORDER */ -} - -.section > h2 { - color: $8; /* COLOR_NTP_TEXT */ +.section > h2 > span { + background: $2; /* COLOR_NTP_BACKGROUND */ } #apps-section a { @@ -137,7 +132,3 @@ body { color: $$3; /* COLOR_NTP_SECTION_TEXT */ background-color: $$1; /* COLOR_NTP_SECTION */; } - -#footer hr { - color: $$2; /* COLOR_NTP_SECTION_BORDER */ -} diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css index 67c7b70..3acaedd 100644 --- a/chrome/browser/resources/ntp/apps.css +++ b/chrome/browser/resources/ntp/apps.css @@ -35,7 +35,8 @@ background: rgba(255, 255, 255, 0) /* transparent white */ no-repeat center 10px; background-size: 96px 96px; - font-weight: bold; + font-family: Helvetica, Arial; + font-size: 14px; overflow: hidden; padding: 111px 10px 10px; /* 10 + 96 + 5 */ text-align: center; diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js index 41c2e6e..64b490f 100644 --- a/chrome/browser/resources/ntp/apps.js +++ b/chrome/browser/resources/ntp/apps.js @@ -5,26 +5,14 @@ function getAppsCallback(data) { logEvent('recieved apps'); var appsSection = $('apps-section'); - var debugSection = $('debug'); - appsSection.textContent = ''; + var appsSectionContent = $('apps-section-content'); + appsSectionContent.textContent = ''; data.apps.forEach(function(app) { - appsSection.appendChild(apps.createElement(app)); + appsSectionContent.appendChild(apps.createElement(app)); }); - // TODO(aa): Figure out what to do with the debug mode when we turn apps on - // for everyone. - if (appsSection.hasChildNodes()) { - appsSection.classList.remove('disabled'); - if (data.showDebugLink) { - debugSection.classList.remove('disabled'); - } - - appsSection.appendChild(apps.createWebStoreElement()); - } else { - appsSection.classList.add('disabled'); - debugSection.classList.add('disabled'); - } + appsSectionContent.appendChild(apps.createWebStoreElement()); } var apps = { -- cgit v1.1