Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1564)

Unified Diff: chrome/browser/resources/vr_shell/vr_shell_ui.js

Issue 2622593003: Move the omnibox natively when showing or hiding. (Closed)
Patch Set: Add comment; rebase. Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/resources/vr_shell/vr_shell_ui.css ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index cc974796c91bea613f9fc91bae1f075661f67da6..6f0802e77c8270503550b9df3fb65ba67553c181 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -81,9 +81,11 @@ var vrShellUi = (function() {
// Pull additional custom properties from CSS.
let style = window.getComputedStyle(domElement);
+ this.translationX = getStyleFloat(style, '--tranX');
+ this.translationY = getStyleFloat(style, '--tranY');
+ this.translationZ = getStyleFloat(style, '--tranZ');
element.setTranslation(
- getStyleFloat(style, '--tranX'), getStyleFloat(style, '--tranY'),
- getStyleFloat(style, '--tranZ'));
+ this.translationX, this.translationY, this.translationZ);
this.uiElementId = ui.addElement(element);
this.uiAnimationId = -1;
@@ -287,15 +289,15 @@ var vrShellUi = (function() {
};
class Omnibox {
- constructor(contentQuadId) {
+ constructor() {
this.domUiElement = new DomUiElement('#omnibox-container');
this.enabled = false;
+ this.hidden = false;
this.loading = false;
this.loadingProgress = 0;
this.level = 0;
this.visibilityTimeout = 0;
this.visibilityTimer = null;
- this.visibleAfterTransition = false;
this.nativeState = {};
// Initially invisible.
@@ -304,13 +306,15 @@ var vrShellUi = (function() {
ui.updateElement(this.domUiElement.uiElementId, update);
this.nativeState.visible = false;
- // Pull colors from CSS so that Javascript can set the progress indicator
- // gradient programmatically.
+ // Pull some CSS properties so that Javascript can reconfigure the omnibox
+ // programmatically.
let border =
this.domUiElement.domElement.querySelector('#omnibox-border');
let style = window.getComputedStyle(border);
this.statusBarColor = getStyleString(style, '--statusBarColor');
this.backgroundColor = style.backgroundColor;
+ this.fadeTimeMs = getStyleFloat(style, '--fadeTimeMs');
+ this.fadeYOffset = getStyleFloat(style, '--fadeYOffset');
// Listen to the end of transitions, so that the box can be natively
// hidden after it finishes hiding itself.
@@ -395,7 +399,7 @@ var vrShellUi = (function() {
}
onAnimationDone(e) {
- if (e.propertyName == 'opacity' && !this.visibleAfterTransition) {
+ if (e.propertyName == 'opacity' && this.hidden) {
this.setNativeVisibility(false);
}
}
@@ -420,14 +424,24 @@ var vrShellUi = (function() {
indicator.style.background = this.backgroundColor;
}
- // Make the box fade away if it's disappearing.
- if (!this.loading && this.visibilityTimeout > 0 &&
- !this.visibilityTimer) {
- document.querySelector('#omnibox-border').className = 'hidden';
- this.visibleAfterTransition = false;
- } else {
- document.querySelector('#omnibox-border').className = '';
- this.visibleAfterTransition = true;
+ let shouldBeHidden =
+ !this.loading && this.visibilityTimeout > 0 && !this.visibilityTimer;
+ if (shouldBeHidden != this.hidden) {
+ // Make the box fade away if it's disappearing.
+ this.hidden = shouldBeHidden;
+ document.querySelector('#omnibox-border').className =
+ this.hidden ? 'hidden' : '';
+
+ // Drop the position as it fades, or raise the position if appearing.
+ let yOffset = this.hidden ? this.fadeYOffset : 0;
+ let animation =
+ new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
+ animation.setTranslation(
+ this.domUiElement.translationX,
+ this.domUiElement.translationY + yOffset,
+ this.domUiElement.translationZ);
+ ui.addAnimation(animation);
+ ui.flush();
}
this.setNativeVisibility(true);
@@ -456,7 +470,7 @@ var vrShellUi = (function() {
this.controls = new Controls(contentId);
this.secureOriginWarnings = new SecureOriginWarnings();
- this.omnibox = new Omnibox(contentId);
+ this.omnibox = new Omnibox();
}
setMode(mode, menuMode, fullscreen) {
« no previous file with comments | « chrome/browser/resources/vr_shell/vr_shell_ui.css ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698