Skip to content

GitLab

T
tangled
Commit 9ea64714 authored by Chris Pickel's avatar Chris Pickel Committed by Commit Bot
Browse files
Options

Local NTP: implement Doodle resize API 

A postMessage call from the doodle resizes the iframe. The event data
supports these parameters.
  cmd (required): must be "resizeDoodle".
  width (optional): a CSS width (with units) or null. Because the doodle
    cannot know the size of the outer page, only "100%" (full page
    width) and null (default width) are recommended.
  height (optional): a CSS height (with units) or null for the default
    (200px). Must not be a percentage, but otherwise any units are OK.
  duration (optional): a CSS duration, such as 130ms or 1s. If null or
    absent, 0s (no transition) is assumed.

If a second resize is requested while a first resize is in in
transition, the doodle will eventually reach the size from the second
call, but the interpretation of the duration is not defined.

Bug: 761994
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9f6afe956e710001a45a9b327748a74eab36ea01
Reviewed-on: https://chromium-review.googlesource.com/804034
Commit-Queue: Chris Pickel <sfiera@chromium.org>
Reviewed-by: default avatarMarc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521700}
parent bfc43c93
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 81 deletions
chrome/browser/resources/local_ntp/local_ntp.css
View file @ 9ea64714
......@@ -11,6 +11,11 @@ html {
/* We add an extra pixel because rounding errors on different zooms can
* make the width shorter than it should be. */
+ 1px);
--logo-height: 200px; /* Normal height of a doodle. */
--logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */
--logo-margin-bottom: 24px; /* Between logo and fakebox. */
--tile-height: 128px;
--tile-margin: 16px;
--tile-width: 154px;
......@@ -69,9 +74,11 @@ button {
display: flex;
flex-direction: column;
height: 100%;
margin: 0 auto;
text-align: -webkit-center;
width: var(--content-width);
}
#logo,
#fakebox-container {
flex-shrink: 0;
}
.non-google-page #ntp-contents {
......@@ -83,14 +90,10 @@ body.hide-fakebox-logo #fakebox {
visibility: hidden;
}
#search {
margin: 0 calc(var(--tile-margin) / 2);
width: calc(100% - var(--tile-margin));
}
#logo {
height: 249px;
margin-bottom: 24px;
height: calc(var(--logo-height) + var(--logo-margin-bottom));
margin-top: var(--logo-margin-top);
min-height: fit-content;
position: relative;
}
......@@ -98,12 +101,6 @@ body.hide-fakebox-logo #fakebox {
display: none;
}
#logo-default,
#logo-non-white,
#logo-doodle {
position: absolute;
}
#logo-default,
#logo-doodle {
opacity: 0;
......@@ -135,9 +132,10 @@ body.hide-fakebox-logo #fakebox {
#logo-non-white {
background-image: url(../../../../ui/webui/resources/images/google_logo.svg);
background-repeat: no-repeat;
bottom: var(--logo-margin-bottom);
height: 92px;
left: calc(50% - 272px/2);
top: 157px;
position: absolute;
width: 272px;
}
......@@ -159,19 +157,13 @@ body.alternate-logo #logo-non-white {
display: none;
}
#logo-doodle {
/* Normally, logos are aligned with tiles and bounded to their left and right
* edges. Doodles may be larger than this. In order that they are centered and
* cropped, instead of left-aligned, give them 100px of extra space on the
* left and the right side.
*/
left: -100px;
right: -100px;
top: 44px;
}
#logo-doodle-button {
/* An image logo is allowed to spill into the margin below, so it's not a
* real bottom margin. If the image extends further than that margin, it
* is cropped. */
margin: 0 auto;
max-height: calc(var(--logo-height) + var(--logo-margin-bottom));
overflow: hidden;
}
.non-white-bg #logo-doodle-button,
......@@ -181,8 +173,9 @@ body.alternate-logo #logo-non-white {
#logo-doodle-iframe {
border: 0;
height: 228px;
width: 100%;
height: var(--logo-height);
margin: 0 auto var(--logo-margin-bottom) auto;
width: var(--content-width);
}
#logo-doodle-notifier {
......@@ -194,9 +187,9 @@ body.alternate-logo #logo-non-white {
cursor: pointer;
display: inline-block;
height: 24px;
left: 148px;
left: calc(50% + 148px);
padding: 0;
position: relative;
position: absolute;
top: 100px;
width: 24px;
}
......@@ -259,6 +252,11 @@ body.alternate-logo #logo-non-white {
0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102));
}
#fakebox-container {
margin: 0 auto 8px auto;
width: var(--content-width);
}
#fakebox {
background-color: #fff;
border-radius: 2px;
......@@ -267,14 +265,13 @@ body.alternate-logo #logo-non-white {
font-size: 18px;
height: 44px;
line-height: 36px;
margin-bottom: 8px;
max-width: 672px;
margin: 0 calc(var(--tile-margin) / 2 + 1px) 0 calc(var(--tile-margin) / 2);
outline: none;
position: relative;
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.non-google-page #fakebox {
.non-google-page #fakebox-container {
display: none;
}
......@@ -400,6 +397,7 @@ body.fakebox-focused #fakebox-cursor {
max-height: calc(100% - var(--mv-notice-height));
position: relative;
text-align: -webkit-auto;
width: var(--content-width);
}
#mv-notice-x {
......
chrome/browser/resources/local_ntp/local_ntp.html
View file @ 9ea64714
......@@ -23,28 +23,28 @@
<div id="one-google" class="hidden"></div>
<div id="ntp-contents">
<div id="search">
<!-- Container for the logo, whether default or doodle. -->
<div id="logo">
<!-- The logo that is displayed in the absence of a doodle. -->
<div id="logo-default" title="Google"></div>
<!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
<div id="logo-non-white" title="Google"></div>
<!-- A doodle, if any: its link and image. -->
<div id="logo-doodle">
<button id="logo-doodle-button">
<img id="logo-doodle-image"></img>
</button>
<iframe id="logo-doodle-iframe"></iframe>
<!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
<button id="logo-doodle-notifier">
<div class="outer ball0"><div class="inner"></div></div>
<div class="outer ball1"><div class="inner"></div></div>
<div class="outer ball2"><div class="inner"></div></div>
<div class="outer ball3"><div class="inner"></div></div>
</button>
</div>
<div id="logo">
<!-- The logo that is displayed in the absence of a doodle. -->
<div id="logo-default" title="Google"></div>
<!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
<div id="logo-non-white" title="Google"></div>
<!-- A doodle, if any: its link and image. -->
<div id="logo-doodle">
<button id="logo-doodle-button">
<img id="logo-doodle-image"></img>
</button>
<iframe id="logo-doodle-iframe"></iframe>
<!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
<button id="logo-doodle-notifier">
<div class="outer ball0"><div class="inner"></div></div>
<div class="outer ball1"><div class="inner"></div></div>
<div class="outer ball2"><div class="inner"></div></div>
<div class="outer ball3"><div class="inner"></div></div>
</button>
</div>
</div>
<div id="fakebox-container">
<div id="fakebox">
<div id="fakebox-text"></div>
<input id="fakebox-input" autocomplete="off" tabindex="-1" type="url"
......@@ -53,6 +53,7 @@
<button id="fakebox-microphone" hidden></button>
</div>
</div>
<div id="most-visited">
<!-- The container for the tiles. The MV iframe goes in here. -->
<div id="mv-tiles"></div>
......
chrome/browser/resources/local_ntp/local_ntp.js
View file @ 9ea64714
......@@ -535,7 +535,7 @@ function registerKeyHandler(element, keycode, handler) {
function handlePostMessage(event) {
var cmd = event.data.cmd;
var args = event.data;
if (cmd == 'loaded') {
if (cmd === 'loaded') {
tilesAreLoaded = true;
if (configData.isGooglePage && !$('one-google-loader')) {
// Load the OneGoogleBar script. It'll create a global variable name "og"
......@@ -550,11 +550,19 @@ function handlePostMessage(event) {
injectOneGoogleBar(og);
};
}
} else if (cmd == 'tileBlacklisted') {
} else if (cmd === 'tileBlacklisted') {
showNotification();
lastBlacklistedTile = args.tid;
ntpApiHandle.deleteMostVisitedItem(args.tid);
} else if (cmd === 'resizeDoodle') {
let width = args.width || null;
let height = args.height || null;
let duration = args.duration || '0s';
let iframe = $(IDS.LOGO_DOODLE_IFRAME);
iframe.style.transition = 'width ' + duration + ', height ' + duration;
iframe.style.width = width;
iframe.style.height = height;
}
}
......
chrome/test/data/local_ntp/local_ntp_browsertest.html
View file @ 9ea64714
......@@ -14,36 +14,37 @@
<script src="local_ntp_browsertest.js" charset="utf-8"></script>
<template id="local-ntp-template">
<div id="ntp-contents">
<div id="search">
<!-- Container for the logo, whether default or doodle. -->
<div id="logo">
<!-- The logo that is displayed in the absence of a doodle. -->
<div id="logo-default" title="Google"></div>
<!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
<div id="logo-non-white" title="Google"></div>
<!-- A doodle, if any: its link and image. -->
<div id="logo-doodle">
<button id="logo-doodle-button">
<img id="logo-doodle-image"></img>
</button>
<iframe id="logo-doodle-iframe"></iframe>
<!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
<button id="logo-doodle-notifier">
<div class="outer ball0"><div class="inner"></div></div>
<div class="outer ball1"><div class="inner"></div></div>
<div class="outer ball2"><div class="inner"></div></div>
<div class="outer ball3"><div class="inner"></div></div>
</button>
</div>
<div id="logo">
<!-- The logo that is displayed in the absence of a doodle. -->
<div id="logo-default" title="Google"></div>
<!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
<div id="logo-non-white" title="Google"></div>
<!-- A doodle, if any: its link and image. -->
<div id="logo-doodle">
<button id="logo-doodle-button">
<img id="logo-doodle-image"></img>
</button>
<iframe id="logo-doodle-iframe"></iframe>
<!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
<button id="logo-doodle-notifier">
<div class="outer ball0"><div class="inner"></div></div>
<div class="outer ball1"><div class="inner"></div></div>
<div class="outer ball2"><div class="inner"></div></div>
<div class="outer ball3"><div class="inner"></div></div>
</button>
</div>
</div>
<div id="fakebox-container">
<div id="fakebox">
<div id="fakebox-text"></div>
<input id="fakebox-input" autocomplete="off" tabIndex="-1" type="url"
<input id="fakebox-input" autocomplete="off" tabindex="-1" type="url"
aria-hidden="true">
<div id="fakebox-cursor"></div>
<button id="fakebox-microphone" hidden></button>
</div>
</div>
<div id="most-visited">
<!-- The container for the tiles. The MV iframe goes in here. -->
<div id="mv-tiles"></div>
......
chrome/test/data/local_ntp/voice_browsertest.html
View file @ 9ea64714
......@@ -64,7 +64,7 @@
</template>
<template id="voice-speech-template">
<div id="ntp-contents">
<div id="search">
<div id="fakebox-container">
<div id="fakebox">
<div id="fakebox-text"></div>
<input id="fakebox-input" autocomplete="off" tabIndex="-1" type="url"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment