Skip to content

GitLab

T
tangled
Commit fe05e571 authored by Alexander Alekseev's avatar Alexander Alekseev Committed by Commit Bot
Browse files
Options

Revert "ChromeOS OOBE: Add Welcome screen animations." 

This reverts commit 04b716f7.

Reason for revert: Broke build.

Original change's description:
> ChromeOS OOBE: Add Welcome screen animations.
> 
> This Cl replaces static images with animations.
> 
> Bug: 852038
> Change-Id: I8185420aed0ed23c080ac0bc7a2270d3ac4c5b7b
> Reviewed-on: https://chromium-review.googlesource.com/1166590
> Commit-Queue: Alexander Alekseev <alemate@chromium.org>
> Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#581735}

TBR=alemate@chromium.org,wzang@chromium.org

Change-Id: Ife8153c5136c12b3973f44cb231c40d897188343
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 852038
Reviewed-on: https://chromium-review.googlesource.com/1168325Reviewed-by: default avatarAlexander Alekseev <alemate@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#581737}
parent ce49639f
Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 269 deletions
chrome/browser/resources/chromeos/login/oobe_welcome.js
View file @ fe05e571
...@@ -94,10 +94,6 @@ Polymer({ ...@@ -94,10 +94,6 @@ Polymer({
if (behavior.onBeforeShow) if (behavior.onBeforeShow)
behavior.onBeforeShow.call(this); behavior.onBeforeShow.call(this);
}); });
let activeScreen = this.getActiveScreen_();
if (activeScreen.show)
activeScreen.show();
}, },
/** /**
......
chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html
View file @ fe05e571
...@@ -66,41 +66,17 @@ ...@@ -66,41 +66,17 @@
<div class="layout vertical end-justified" id="titleContainer"> <div class="layout vertical end-justified" id="titleContainer">
<h1 id="title">[[i18nDynamic(locale, 'welcomeScreenGreeting')]]</h1> <h1 id="title">[[i18nDynamic(locale, 'welcomeScreenGreeting')]]</h1>
</div> </div>
<div class="welcome-illustration"> <div class="welcome-illustration" hidden="[[isInTabletMode]]">
<if expr="chromeos and _google_chrome"> <img srcset="images/welcome_illustration_1x.png 1x,
<video muted hidden oobe_devices="laptop_G" images/welcome_illustration_2x.png 2x">
oobe_orientations="portrait,landscape" oobe_types="intro" </div>
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_intro.webm"> <div class="welcome-illustration" hidden="[[!isInTabletMode]]">
</video> <img hidden="[[!isInPortraitMode]]"
<video muted loop hidden oobe_devices="laptop_G" srcset="images/welcome_illustration_tablet_mode_portraight_1x.png 1x,
oobe_orientations="portrait,landscape" oobe_types="loop" images/welcome_illustration_tablet_mode_portraight_2x.png 2x">
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_loop.webm"> <img hidden="[[isInPortraitMode]]"
</video> srcset="images/welcome_illustration_tablet_mode_1x.png 1x,
<video muted hidden oobe_devices="laptop" images/welcome_illustration_tablet_mode_2x.png 2x">
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_intro.webm">
</video>
<video muted loop hidden oobe_devices="laptop"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_loop.webm">
</video>
<video muted hidden oobe_devices="tablet_G"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_intro.webm">
</video>
<video muted loop hidden oobe_devices="tablet_G"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_loop.webm">
</video>
<video muted hidden oobe_devices="tablet"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_intro.webm">
</video>
<video muted loop hidden oobe_devices="tablet"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop.webm">
</video>
</if>
</div> </div>
<div hidden="[[!debuggingLinkVisible]]"> <div hidden="[[!debuggingLinkVisible]]">
<a href="#" on-tap="onDebuggingLinkClicked_"> <a href="#" on-tap="onDebuggingLinkClicked_">
......
chrome/browser/resources/chromeos/login/oobe_welcome_dialog.js
View file @ fe05e571
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
// found in the LICENSE file. // found in the LICENSE file.
{ {
const LONG_TOUCH_TIME_MS = 1000; var LONG_TOUCH_TIME_MS = 1000;
function TitleLongTouchDetector(element, callback) { function LongTouchDetector(element, callback) {
this.callback_ = callback; this.callback_ = callback;
element.addEventListener('touchstart', this.onTouchStart_.bind(this)); element.addEventListener('touchstart', this.onTouchStart_.bind(this));
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
element.addEventListener('mouseleave', this.killTimer_.bind(this)); element.addEventListener('mouseleave', this.killTimer_.bind(this));
} }
TitleLongTouchDetector.prototype = { LongTouchDetector.prototype = {
/** /**
* This is timeout ID used to kill window timeout that fires "detected" * This is timeout ID used to kill window timeout that fires "detected"
* callback if touch event was cancelled. * callback if touch event was cancelled.
...@@ -57,195 +57,6 @@ ...@@ -57,195 +57,6 @@
}, },
}; };
const VIDEO_DEVICE = {
LAPTOP: 'laptop',
TABLET: 'tablet',
LAPTOP_G: 'laptop_G',
TABLET_G: 'tablet_G',
};
const VIDEO_ORIENTATION = {
PORTRAIT: 'portrait',
LANDSCAPE: 'landscape',
};
const VIDEO_TYPE = {
INTRO: 'intro',
LOOP: 'loop',
};
class WelcomeVideoController {
/**
* This calculates key that is used to identify <video> node in internal
* mapping between possible video configurations and actual videos.
*
* @param {VIDEO_DEVICE} device Allowed device type.
* @param {VIDEO_ORIENTATION} orientation Allowed orientation.
* @param {VIDEO_TYPE} type Allowed type.
* @return {String} Returns <video> key to be stored in this.videos.
* @private
*/
calcKey_(device, orientation, type) {
return device + '-' + orientation + '-' + type;
}
/**
* @param {VIDEO_DEVICE} device Allowed device type.
* @param {VIDEO_ORIENTATION} orientation Allowed orientation.
*/
constructor(device, orientation) {
this.devices = new Set();
this.orientations = new Set();
this.types = new Set();
for (let key in VIDEO_DEVICE)
this.devices.add(VIDEO_DEVICE[key]);
for (let key in VIDEO_ORIENTATION)
this.orientations.add(VIDEO_ORIENTATION[key]);
for (let key in VIDEO_TYPE)
this.types.add(VIDEO_TYPE[key]);
assert(this.devices.has(device));
assert(this.orientations.has(orientation));
this.device = device;
this.orientation = orientation;
this.type = VIDEO_TYPE.INTRO;
// This is map from 'device-orientation-video_type' to video DOM object.
this.videos = new Map();
}
/**
* Returns currently playing video.
* If none are playing, falls back to currently visible one, because
* it might have accidentally stopped because of media error.
*
* @return {Object|null} Returns <video> DOM node.
* @private
*/
getActiveVideo_() {
for (let node of this.videos.values()) {
if (!node.paused)
return node;
}
// Media decode error stops video play. Try 'hidden' instead.
for (let node of this.videos.values()) {
if (!node.hasAttribute('hidden'))
return node;
}
return null;
}
/**
* @param {Object} video <video> DOM node with valid |oobe_devices|,
* |oobe_orientations| and |oobe_types|.
* |oobe_devices| is a comma-separated list of VIDEO_DEVICE values.
* |oobe_orientations| is a comma-separated list of VIDEO_ORIENTATION
* values.
* |oobe_types| is a comma-separated list of VIDEO_TYPE values.
*/
add(video) {
// Split strings by comma and trim space.
let devices = video.getAttribute('oobe_devices')
.split(',')
.map((str) => str.replace(/\s/g, ''));
let orientations = video.getAttribute('oobe_orientations')
.split(',')
.map((str) => str.replace(/\s/g, ''));
let types = video.getAttribute('oobe_types')
.split(',')
.map((str) => str.replace(/\s/g, ''));
for (let device of devices) {
assert(this.devices.has(device));
for (let orientation of orientations) {
assert(this.orientations.has(orientation));
for (let type of types) {
assert(this.types.has(type));
let key = this.calcKey_(device, orientation, type);
assert(!this.videos.has(key));
this.videos.set(key, video);
if (type == VIDEO_TYPE.INTRO)
video.addEventListener('ended', (event) => {
event.target.setAttribute('hidden', '');
this.type = VIDEO_TYPE.LOOP;
this.play();
});
}
}
}
}
/**
* Hides all videos.
* @private
*/
hideAll_() {
for (let node of this.videos.values())
node.setAttribute('hidden', '');
}
/**
* Updates screen configuration, and switches to appropriate video to match
* it.
*
* @param {String} device Allowed device type.
* @param {String} orientation Allowed orientation.
*/
updateConfiguration(device, orientation) {
assert(this.devices.has(device));
assert(this.orientations.has(orientation));
if (device === this.device && orientation === this.orientation)
return;
this.device = device;
this.orientation = orientation;
let previousVideo = this.getActiveVideo_();
let nextKey = this.calcKey_(device, orientation, this.type);
let nextVideo = this.videos.get(nextKey);
// Some video may match more than one key.
if (previousVideo === nextVideo)
return;
if (previousVideo)
previousVideo.pause();
if (previousVideo && nextVideo)
nextVideo.currentTime = previousVideo.currentTime;
this.hideAll_();
if (nextVideo) {
nextVideo.removeAttribute('hidden');
nextVideo.play();
}
}
/**
* Starts active video.
*/
play() {
if (this.getActiveVideo_())
return;
let key = this.calcKey_(this.device, this.orientation, this.type);
let video = this.videos.get(key);
if (video) {
video.removeAttribute('hidden');
video.play();
}
}
}
Polymer({ Polymer({
is: 'oobe-welcome-dialog', is: 'oobe-welcome-dialog',
...@@ -276,44 +87,19 @@ ...@@ -276,44 +87,19 @@
/** /**
* True when in tablet mode. * True when in tablet mode.
*/ */
isInTabletMode: { isInTabletMode: Boolean,
type: Boolean,
observer: 'updateVideoMode_',
},
/** /**
* True when scree orientation is portrait. * True when scree orientation is portraight.
*/ */
isInPortraitMode: { isInPortraitMode: Boolean,
type: Boolean,
observer: 'updateVideoMode_',
}
},
getVideoDeviceType_: function() {
return this.isInTabletMode ? VIDEO_DEVICE.TABLET : VIDEO_DEVICE.LAPTOP;
},
getVideoOrientationType_: function() {
return this.isInPortraitMode ? VIDEO_ORIENTATION.PORTRAIT :
VIDEO_ORIENTATION.LANDSCAPE;
},
updateVideoMode_: function() {
this.welcomeVideoController_.updateConfiguration(
this.getVideoDeviceType_(), this.getVideoOrientationType_());
}, },
/** /**
* @private {TitleLongTouchDetector} * @private {LongTouchDetector}
*/ */
titleLongTouchDetector_: null, titleLongTouchDetector_: null,
/**
* @private {WelcomeVideoController}
*/
welcomeVideoController_: null,
/** /**
* This is stored ID of currently focused element to restore id on returns * This is stored ID of currently focused element to restore id on returns
* to this dialog from Language / Timezone Selection dialogs. * to this dialog from Language / Timezone Selection dialogs.
...@@ -355,20 +141,14 @@ ...@@ -355,20 +141,14 @@
}, },
attached: function() { attached: function() {
this.welcomeVideoController_ = new WelcomeVideoController( this.titleLongTouchDetector_ = new LongTouchDetector(
this.getVideoDeviceType_(), this.getVideoOrientationType_());
let videos = Polymer.dom(this.root).querySelectorAll('video');
for (let video of videos)
this.welcomeVideoController_.add(video);
this.titleLongTouchDetector_ = new TitleLongTouchDetector(
this.$.title, this.onTitleLongTouch_.bind(this)); this.$.title, this.onTitleLongTouch_.bind(this));
this.focus(); this.focus();
}, },
focus: function() { focus: function() {
this.onWindowResize(); this.onWindowResize();
let focusedElement = this.$[this.focusedElement_]; var focusedElement = this.$[this.focusedElement_];
if (focusedElement) if (focusedElement)
focusedElement.focus(); focusedElement.focus();
}, },
...@@ -378,7 +158,6 @@ ...@@ -378,7 +158,6 @@
*/ */
show: function() { show: function() {
this.focus(); this.focus();
this.welcomeVideoController_.play();
}, },
/** /**
......
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