Commit aed5ae4a authored by Alexander Alekseev's avatar Alexander Alekseev Committed by Commit Bot

Chrome OS: Update Discover code, make it loadable as a separate source.

This CL updates OOBE Discover code to make it loadable as an app.

Bug: 864686
Change-Id: I1e9840041f193ce2d69e0defd34f2ab56f8dcbb1
Reviewed-on: https://chromium-review.googlesource.com/1186185
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: default avatarMichael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#586112}
parent 1c9af66d
/* Copyright 2018 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
body {
align-content: center;
display: flex;
justify-content: center;
margin: unset;
padding: unset;
}
......@@ -3,15 +3,26 @@
build:buildType;
highlight:highlightStrength;
lang:language">
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<title i18n-content="title"></title>
<link rel="import" href="chrome://resources/html/polymer.html">
<script src="chrome://oobe/discover/discover_ui.js"></script>
</head>
<body>
<include src="../oobe_dialog.html">
<include src="discover_components.html">
</body>
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<title i18n-content="title"></title>
<link rel="stylesheet" href="discover_app.css">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome://oobe/strings.js"></script>
<script src="chrome://resources/js/i18n_template.js"></script>
</head>
<body>
<include src="../hd-iron-icon.html">
<include src="../oobe_buttons.html">
<include src="../oobe_dialog.html">
<include src="discover_components.html">
<discover-ui id="discoverUI" class="block"></discover-ui>
<script src="chrome://oobe/discover_app.js"></script>
</body>
</html>
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
// Install a global error handler so stack traces are included in logs.
window.onerror = function(message, file, line, column, error) {
console.error(error.stack);
};
// <include src="../hd-iron-icon.js">
// <include src="../oobe_buttons.js">
// <include src="../oobe_dialog.js">
// <include src="../oobe_dialog_host_behavior.js">
// <include src="discover_components.js">
/**
* @fileoverview Discover UI based on a stripped down OOBE controller.
*/
cr.define('cr.ui.Oobe', function() {
return {
/**
* Reports that JS side is ready.
*/
initialize: function() {
chrome.send('screenStateInitialize');
$('discoverUI').onBeforeShow();
},
// Dummy Oobe functions not present with stripped login UI.
enableKeyboardFlow: function(data) {},
refreshA11yInfo: function(data) {},
setClientAreaSize: function(data) {},
showAPIKeysNotice: function(data) {},
showOobeUI: function(data) {},
showShutdown: function(data) {},
showVersion: function(data) {},
updateDeviceRequisition: function(data) {},
updateOobeConfiguration: function(data) {},
/**
* Reloads content of the page.
* @param {!Object} data New dictionary with i18n values.
*/
reloadContent: function(data) {
loadTimeData.overrideValues(data);
i18nTemplate.process(document, loadTimeData);
$('discoverUI').updateLocalizedContent();
},
};
});
var Oobe = cr.ui.Oobe;
document.addEventListener('DOMContentLoaded', function() {
Oobe.initialize();
});
......@@ -3,9 +3,48 @@
found in the LICENSE file. */
:host {
border-radius: 4px;
border-radius: 18px;
box-shadow: 0 2px 10px rgba(0,0,0,0.18);
display: flex;
flex-direction: column;
height: 246px;
width: 246px;
flex-direction: row;
font-family: var(--oobe-title-font-family);
height: 208px;
position: relative;
width: 312px;
}
:host([highlight]) {
height: 208px;
width: 640px;
}
#background-container {
z-index: 1;
}
#gradient-container {
z-index: 2;
}
#gradient {
background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
height: 112px;
width: 100%;
}
#label-container {
margin-bottom: 16px;
z-index: 3;
}
#icon {
height: 32px;
padding-inline-end: 8px;
width: 32px;
}
#title {
color: rgb(32, 33, 36);
font-size: 18sp;
line-height: 24px;
}
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<!--
Discover module card.
Attributes:
* highlight - Switch card to 'highlight card' mode.
Example:
<discover-card>
<div i18n-content="someText"></div>
......@@ -8,7 +13,25 @@
-->
<dom-module id="discover-card">
<template>
<style include="iron-flex iron-flex-alignment iron-positioning"></style>
<link rel="stylesheet" href="../oobe_fonts.css">
<link rel="stylesheet" href="discover_card.css">
<slot></slot>
<div class="fit layout vertical center end-justified">
<div id="background-container"
class="fit layout horizontal center center-justified">
<slot name="background"></slot>
</div>
<div id="gradient-container" class="fit layout vertical end-justified">
<div id="gradient"></div>
</div>
<div id="label-container" class="layout horizontal center">
<div id="icon">
<slot name="icon"></slot>
</div>
<div id="title">
<slot name="title"></slot>
</div>
</div>
</div>
</template>
</dom-module>
......@@ -6,8 +6,7 @@
// <include src="discover_module_behavior.js">
// <include src="discover_card.js">
// --- Modules.
// <include src="discover_module_behavior.js">
// --- Modules
// TODO: add modules here.
// --- These depend on modules.
......
......@@ -18,7 +18,7 @@ var DiscoverModuleBehaviorImpl = {
/**
* Discover module name. Must be set explicitly.
*/
moduleName: {
module: {
type: String,
readOnly: true,
value: '',
......@@ -26,8 +26,8 @@ var DiscoverModuleBehaviorImpl = {
},
sendMessage: function(message, parameters) {
assert(this.moduleName.length > 0);
chrome.send('discover.' + this.moduleName + '.' + message, parameters);
assert(this.module.length > 0);
chrome.send('discover.' + this.module + '.' + message, parameters);
},
show: function() {},
......
/* Copyright 2018 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
:host {
display: block;
height: 640px;
width: 768px;
}
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<!--
Discover App object. Manages all Discover UI behavior.
......@@ -12,13 +13,14 @@
- All modules must have class "module" and on-click event handler:
<discover-module1 class="module" module="module1" hidden
on-click="onCardClick_">
<discover-module1 class="module" module="module1" hidden>
</discover-module1>
- All cards must have class "card" and slot "cards":
- All cards must have class "card", slot "cards", and on-click event handler
if you need to switch to the module on click:
<discover-module1-card class="card" slot="cards" module="module1">
<discover-module1-card class="card" slot="cards" module="module1"
on-click="onCardClick_">
</discover-module1-card>
- All modules and cards must have correct attribute |module| with value
......@@ -26,10 +28,19 @@
-->
<dom-module id="discover-ui">
<template>
<link rel="stylesheet" href="discover_ui.css">
<discover-welcome id="discoverWelcome"
on-module-continue="startLinearFlow_" on-module-skip="end_">
<!-- TODO (alemate): add module cards here -->
<discover-redeem-offers-card class="card" slot="cards"
module="redeem-offers">
</discover-redeem-offers-card>
<discover-launch-help-app-card class="card" slot="cards"
module="launch-help-app">
</discover-launch-help-app-card>
<discover-sync-files-card class="card" slot="cards"
module="sync-files">
</discover-sync-files-card>
</discover-welcome>
<!-- TODO (alemate): add modules -->
<!-- TODO (alemate): add modules -->
</template>
</dom-module>
......@@ -48,7 +48,7 @@
*/
onBeforeShow: function() {
OobeDialogHostBehavior.onBeforeShow.call(this);
this.$.discoverWelcome.onBeforeShow();
this.propagateFullScreenMode('#discoverWelcome');
this.propagateFullScreenMode('.module');
this.$.discoverWelcome.show();
......@@ -92,7 +92,7 @@
* @private
*/
onCardClick_: function(event) {
let module = event.target.module;
let module = event.target.getAttribute('module');
this.showModule_(module);
},
......
......@@ -65,7 +65,8 @@ Polymer({
},
onBeforeShow: function() {
var isOobe = window.hasOwnProperty('Oobe') && Oobe.getInstance() &&
var isOobe = window.hasOwnProperty('Oobe') &&
window.hasOwnProperty('DISPLAY_TYPE') && Oobe.getInstance() &&
Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE;
if (isOobe || document.documentElement.hasAttribute('full-screen-dialog'))
this.fullScreenDialog = true;
......
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