summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources/ntp
diff options
context:
space:
mode:
Diffstat (limited to 'chrome/browser/resources/ntp')
-rw-r--r--chrome/browser/resources/ntp/apps.css92
-rw-r--r--chrome/browser/resources/ntp/apps.js79
2 files changed, 122 insertions, 49 deletions
diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index bbd5b38..1cbfdce 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -142,21 +142,21 @@ menu > button.default {
}
html.apps-promo-visible #apps-promo {
- display: block;
+ background: url('chrome://theme/IDR_WEBSTORE_ICON') no-repeat;
+ height: 125px;
+ -webkit-padding-start: 125px;
+ display: table-cell;
+ vertical-align: text-bottom;
}
-#apps-promo > h3 {
- font-size: 16px;
- margin-top: 1em;
- margin-bottom: 0.25em;
-}
-
-#apps-promo-text1 {
- margin-top: 0;
+#apps-promo-heading {
+ font-size: 115%;
+ font-weight: bold;
+ margin-bottom: 5px;
+ -webkit-margin-start: 3px;
}
#apps-promo-hide {
- float: right;
-webkit-appearance: none;
-webkit-transition: opacity .15s;
background-color: transparent;
@@ -165,27 +165,13 @@ html.apps-promo-visible #apps-promo {
font-family: inherit;
font-size: 90%;
text-decoration: underline;
+ margin-top: 2px;
}
html[dir=rtl] #apps-promo-hide {
float: left;
}
-html.apps-promo-visible .app.web-store-entry {
- position: absolute;
- left: 100%;
- top: 0;
- -webkit-margin-start: 22px;
-}
-
-html.apps-promo-visible[dir=rtl] .app.web-store-entry {
- right: 100%;
-}
-
-html.apps-promo-visible .app.web-store-entry a {
- font-weight: bold;
-}
-
/*
We position the web store entry all by its lonesome in the top of the rightmost
column when there is at least one full row of apps. Note that this is similar,
@@ -201,3 +187,59 @@ never set .loner while the promo is running.
html[dir=rtl] .app.web-store-entry.loner {
right: 100%;
}
+
+/* g-button CSS styles (see go/buttons) */
+@media screen, projection {
+ g-button-basic * {
+ margin: 0;
+ padding: 0;
+ }
+
+ .g-button-basic {
+ direction: ltr;
+ line-height: 1.2;
+ width: 20em;
+ max-width: 795px;
+ background-color: #cadef4;
+ border: 1px solid #ccc;
+ padding: 15px;
+ text-align: center;
+ overflow: visible;
+ }
+
+ .g-button-basic div {
+ font-size: 1.3em;
+ background: url('g-button-chocobo-basic-1.png') no-repeat;
+ background-color: #5679a5;
+ }
+
+ .g-button-basic div span span a {
+ display: block;
+ color: #fff!important;
+ background: url('g-button-chocobo-basic-2.png') no-repeat right bottom;
+ padding: 8px 18px 13px 13px;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ .g-button-basic div span {
+ display: block;
+ background: url('g-button-chocobo-basic-1.png') no-repeat right -400px;
+ height: 1%;
+ }
+
+ .g-button-basic p {
+ text-align: center;
+ margin: 10px 0 0;
+ }
+
+ .g-button-basic {
+ padding: 0;
+ background: none;
+ border: 0;
+ }
+
+ .g-button-basic div span span {
+ background: url('g-button-chocobo-basic-1.png') no-repeat left bottom;
+ }
+}
diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index 89f61dc..a9ea308 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -18,6 +18,7 @@ function getAppsCallback(data) {
var appsSectionContent = $('apps-content');
var appsMiniview = appsSection.getElementsByClassName('miniview')[0];
var appsPromo = $('apps-promo');
+ var appsPromoLink = $('apps-promo-link');
var appsPromoPing = APP_LAUNCH_URL.PING_WEBSTORE + '+' + apps.showPromo;
var webStoreEntry, webStoreMiniEntry;
@@ -48,8 +49,6 @@ function getAppsCallback(data) {
markNewApps(data.apps);
apps.data = data.apps;
- if (!apps.detachWebstoreEntry)
- apps.data.push('web-store-entry');
clearClosedMenu(apps.menu);
@@ -62,9 +61,33 @@ function getAppsCallback(data) {
appsSectionContent.appendChild(apps.createElement(app));
});
- webStoreEntry = apps.createWebStoreElement();
- webStoreEntry.querySelector('a').setAttribute('ping', appsPromoPing);
- appsSectionContent.appendChild(webStoreEntry);
+ if (data.showPromo) {
+ // Add the promo content...
+ $('apps-promo-heading').textContent = data.promoHeader;
+ appsPromoLink.href = data.promoLink;
+ appsPromoLink.textContent = data.promoButton;
+ appsPromoLink.ping = appsPromoPing;
+ $('apps-promo-hide').textContent = data.promoExpire;
+
+ // ... then display the promo.
+ document.documentElement.classList.add('apps-promo-visible');
+ } else {
+ document.documentElement.classList.remove('apps-promo-visible');
+ }
+
+ // Only show the web store entry if there are apps installed, since the promo
+ // is sufficient otherwise.
+ if (data.apps.length > 0) {
+ webStoreEntry = apps.createWebStoreElement();
+ webStoreEntry.querySelector('a').ping = appsPromoPing;
+ appsSectionContent.appendChild(webStoreEntry);
+ if (apps.detachWebstoreEntry) {
+ webStoreEntry.classList.add('loner');
+ } else {
+ webStoreEntry.classList.remove('loner');
+ apps.data.push('web-store-entry');
+ }
+ }
data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) {
appsMiniview.appendChild(apps.createMiniviewElement(app));
@@ -72,7 +95,7 @@ function getAppsCallback(data) {
});
if (data.apps.length < MAX_MINIVIEW_ITEMS) {
webStoreMiniEntry = apps.createWebStoreMiniElement();
- webStoreEntry.querySelector('a').setAttribute('ping', appsPromoPing);
+ webStoreMiniEntry.querySelector('a').ping = appsPromoPing;
appsMiniview.appendChild(webStoreMiniEntry);
addClosedMenuEntryWithLink(apps.menu,
apps.createWebStoreClosedMenuElement());
@@ -86,24 +109,14 @@ function getAppsCallback(data) {
addClosedMenuFooter(apps.menu, 'apps', MENU_APPS, Section.APPS);
apps.loaded = true;
- if (apps.showPromo)
- document.documentElement.classList.add('apps-promo-visible');
- else
- document.documentElement.classList.remove('apps-promo-visible');
- var appsPromoLink = $('apps-promo-link');
if (appsPromoLink)
- appsPromoLink.setAttribute('ping', appsPromoPing);
+ appsPromoLink.ping = appsPromoPing;
maybeDoneLoading();
// Disable the animations when the app launcher is being (re)initailized.
apps.layout({disableAnimations:true});
- if (apps.detachWebstoreEntry)
- webStoreEntry.classList.add('loner');
- else
- webStoreEntry.classList.remove('loner');
-
if (isDoneLoading()) {
updateMiniviewClipping(appsMiniview);
layoutSections();
@@ -175,6 +188,11 @@ var apps = (function() {
chrome.send('launchApp', args);
}
+ function isAppSectionMaximized() {
+ return getAppLaunchType() == APP_LAUNCH.NTP_APPS_MAXIMIZED &&
+ !$('apps').classList.contains('disabled');
+ }
+
function isAppsMenu(node) {
return node.id == 'apps-menu';
}
@@ -216,6 +234,7 @@ var apps = (function() {
};
var currentApp;
+ var promoHasBeenSeen = false;
function addContextMenu(el, app) {
el.addEventListener('contextmenu', cr.ui.contextMenuHandler);
@@ -347,6 +366,14 @@ var apps = (function() {
this.invalidate_();
},
+ maybePingPromoSeen_: function() {
+ if (promoHasBeenSeen || !this.showPromo || !isAppSectionMaximized())
+ return;
+
+ promoHasBeenSeen = true;
+ chrome.send('promoSeen', []);
+ },
+
// DragAndDropDelegate
dragContainer: $('apps-content'),
@@ -564,10 +591,14 @@ var apps = (function() {
},
layoutImpl_: function() {
- var apps = this.data;
+ var apps = this.data || [];
var rects = this.getLayoutRects_(apps.length);
var appsContent = this.dragContainer;
+ // Ping the PROMO_SEEN histogram only when the promo is maximized, and
+ // maximum once per NTP load.
+ this.maybePingPromoSeen_();
+
if (!this.visible)
return;
@@ -651,8 +682,8 @@ var apps = (function() {
var a = div.firstChild;
a.onclick = handleClick;
- a.setAttribute('ping',
- getAppPingUrl('PING_BY_ID', this.showPromo, 'NTP_APPS_MAXIMIZED'));
+ a.ping = getAppPingUrl(
+ 'PING_BY_ID', this.showPromo, 'NTP_APPS_MAXIMIZED');
a.style.backgroundImage = url(app['icon_big']);
if (app.isNew) {
div.setAttribute('new', 'new');
@@ -691,8 +722,8 @@ var apps = (function() {
a.textContent = app['name'];
a.href = app['launch_url'];
a.onclick = handleClick;
- a.setAttribute('ping',
- getAppPingUrl('PING_BY_ID', this.showPromo, 'NTP_APPS_COLLAPSED'));
+ a.ping = getAppPingUrl(
+ 'PING_BY_ID', this.showPromo, 'NTP_APPS_COLLAPSED');
a.style.backgroundImage = url(app['icon_small']);
a.className = 'item';
span.appendChild(a);
@@ -708,8 +739,8 @@ var apps = (function() {
a.textContent = app['name'];
a.href = app['launch_url'];
a.onclick = handleClick;
- a.setAttribute('ping',
- getAppPingUrl('PING_BY_ID', this.showPromo, 'NTP_APPS_MENU'));
+ a.ping = getAppPingUrl(
+ 'PING_BY_ID', this.showPromo, 'NTP_APPS_MENU');
a.style.backgroundImage = url(app['icon_small']);
a.className = 'item';
generated by cgit v1.1 at 2025-05-29 03:05:25 +0000