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

Side by Side Diff: chrome/browser/resources/vr_shell/vr_shell_ui.js

Issue 2536223002: Omnibox improvements and fixes. (Closed)
Patch Set: Make unit tests compile by including chrome/browser and blink. Created 4 years 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 unified diff | Download patch
« no previous file with comments | « chrome/browser/android/vr_shell/vr_web_contents_observer.cc ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright 2016 The Chromium Authors. All rights reserved. 1 // Copyright 2016 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 var vrShellUi = (function() { 5 var vrShellUi = (function() {
6 'use strict'; 6 'use strict';
7 7
8 let scene = new ui.Scene(); 8 let scene = new ui.Scene();
9 let sceneManager; 9 let sceneManager;
10 10
(...skipping 211 matching lines...) Expand 10 before | Expand all | Expand 10 after
222 update.setVisible(false); 222 update.setVisible(false);
223 update.setLockToFieldOfView(true); 223 update.setLockToFieldOfView(true);
224 scene.updateElement(this.transientWarning.uiElementId, update); 224 scene.updateElement(this.transientWarning.uiElementId, update);
225 } 225 }
226 226
227 setEnabled(enabled) { 227 setEnabled(enabled) {
228 this.enabled = enabled; 228 this.enabled = enabled;
229 this.updateState(); 229 this.updateState();
230 } 230 }
231 231
232 setSecureOrigin(secure) { 232 setSecure(secure) {
233 this.isSecureOrigin = secure; 233 this.secure = secure;
234 this.updateState(); 234 this.updateState();
235 } 235 }
236 236
237 updateState() { 237 updateState() {
238 /** @const */ var TRANSIENT_TIMEOUT_MS = 30000; 238 /** @const */ var TRANSIENT_TIMEOUT_MS = 30000;
239 239
240 let visible = (this.enabled && !this.isSecureOrigin); 240 let visible = (this.enabled && !this.secure);
241 if (this.secureOriginTimer) { 241 if (this.secureOriginTimer) {
242 clearInterval(this.secureOriginTimer); 242 clearInterval(this.secureOriginTimer);
243 this.secureOriginTimer = null; 243 this.secureOriginTimer = null;
244 } 244 }
245 if (visible) { 245 if (visible) {
246 this.secureOriginTimer = setTimeout( 246 this.secureOriginTimer = setTimeout(
247 this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS); 247 this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS);
248 } 248 }
249 this.showOrHideWarnings(visible); 249 this.showOrHideWarnings(visible);
250 } 250 }
(...skipping 11 matching lines...) Expand all
262 let update = new api.UiElementUpdate(); 262 let update = new api.UiElementUpdate();
263 update.setVisible(false); 263 update.setVisible(false);
264 scene.updateElement(this.transientWarning.uiElementId, update); 264 scene.updateElement(this.transientWarning.uiElementId, update);
265 this.secureOriginTimer = null; 265 this.secureOriginTimer = null;
266 scene.flush(); 266 scene.flush();
267 } 267 }
268 }; 268 };
269 269
270 class Omnibox { 270 class Omnibox {
271 constructor(contentQuadId) { 271 constructor(contentQuadId) {
272 /** @const */ var VISIBILITY_TIMEOUT_MS = 3000;
273
274 this.domUiElement = new DomUiElement('#omni-container'); 272 this.domUiElement = new DomUiElement('#omni-container');
275 this.enabled = false; 273 this.enabled = false;
276 this.secure = false; 274 this.level = 0;
277 this.visibilityTimeout = VISIBILITY_TIMEOUT_MS; 275 this.visibilityTimeout = 0;
278 this.visibilityTimer = null; 276 this.visibilityTimer = null;
279 this.nativeState = {}; 277 this.nativeState = {};
280 278
281 // Initially invisible. 279 // Initially invisible.
282 let update = new api.UiElementUpdate(); 280 let update = new api.UiElementUpdate();
283 update.setVisible(false); 281 update.setVisible(false);
284 scene.updateElement(this.domUiElement.uiElementId, update); 282 scene.updateElement(this.domUiElement.uiElementId, update);
285 this.nativeState.visible = false; 283 this.nativeState.visible = false;
286 284
287 // Listen to the end of transitions, so that the box can be natively 285 // Listen to the end of transitions, so that the box can be natively
(...skipping 15 matching lines...) Expand all
303 } 301 }
304 302
305 setURL(host, path) { 303 setURL(host, path) {
306 let omnibox = this.domUiElement.domElement; 304 let omnibox = this.domUiElement.domElement;
307 omnibox.querySelector('#domain').innerHTML = host; 305 omnibox.querySelector('#domain').innerHTML = host;
308 omnibox.querySelector('#path').innerHTML = path; 306 omnibox.querySelector('#path').innerHTML = path;
309 this.resetVisibilityTimer(); 307 this.resetVisibilityTimer();
310 this.updateState(); 308 this.updateState();
311 } 309 }
312 310
313 setSecureOrigin(secure) { 311 setSecurityLevel(level) {
314 this.secure = secure; 312 this.level = level;
315 this.resetVisibilityTimer(); 313 this.resetVisibilityTimer();
316 this.updateState(); 314 this.updateState();
317 } 315 }
318 316
319 setVisibilityTimeout(milliseconds) { 317 setVisibilityTimeout(milliseconds) {
320 this.visibilityTimeout = milliseconds; 318 this.visibilityTimeout = milliseconds;
321 this.resetVisibilityTimer(); 319 this.resetVisibilityTimer();
322 this.updateState(); 320 this.updateState();
323 } 321 }
324 322
(...skipping 17 matching lines...) Expand all
342 if (e.propertyName == 'opacity' && !this.visibleAfterTransition) { 340 if (e.propertyName == 'opacity' && !this.visibleAfterTransition) {
343 this.setNativeVisibility(false); 341 this.setNativeVisibility(false);
344 } 342 }
345 } 343 }
346 344
347 updateState() { 345 updateState() {
348 if (!this.enabled) { 346 if (!this.enabled) {
349 this.setNativeVisibility(false); 347 this.setNativeVisibility(false);
350 return; 348 return;
351 } 349 }
352 350 let secure = this.level == 2 || this.level == 3;
mthiesse 2016/12/07 15:53:48 nit: enum names for these constants?
353 document.querySelector('#omni-secure-icon').style.display = 351 document.querySelector('#omni-secure-icon').style.display =
354 (this.secure ? 'block' : 'none'); 352 (secure ? 'block' : 'none');
355 document.querySelector('#omni-insecure-icon').style.display = 353 document.querySelector('#omni-insecure-icon').style.display =
356 (this.secure ? 'none' : 'block'); 354 (secure ? 'none' : 'block');
357 355
358 let state = 'idle'; 356 let state = 'idle';
359 this.visibleAfterTransition = true; 357 this.visibleAfterTransition = true;
360 if (this.loading) { 358 if (this.loading) {
361 state = 'loading'; 359 state = 'loading';
362 } else if (this.visibilityTimeout > 0 && !this.visibilityTimer) { 360 } else if (this.visibilityTimeout > 0 && !this.visibilityTimer) {
363 state = 'hide'; 361 state = 'hide';
364 this.visibleAfterTransition = false; 362 this.visibleAfterTransition = false;
365 } 363 }
366 document.querySelector('#omni').className = state; 364 document.querySelector('#omni').className = state;
(...skipping 21 matching lines...) Expand all
388 386
389 this.contentQuad = new ContentQuad(); 387 this.contentQuad = new ContentQuad();
390 let contentId = this.contentQuad.getElementId(); 388 let contentId = this.contentQuad.getElementId();
391 389
392 this.controls = new Controls(contentId); 390 this.controls = new Controls(contentId);
393 this.secureOriginWarnings = new SecureOriginWarnings(); 391 this.secureOriginWarnings = new SecureOriginWarnings();
394 this.omnibox = new Omnibox(contentId); 392 this.omnibox = new Omnibox(contentId);
395 } 393 }
396 394
397 setMode(mode, menuMode, fullscreen) { 395 setMode(mode, menuMode, fullscreen) {
396 /** @const */ var OMNIBOX_VISIBILITY_TIMEOUT_MS = 5000;
397
398 this.mode = mode; 398 this.mode = mode;
399 this.menuMode = menuMode; 399 this.menuMode = menuMode;
400 this.fullscreen = fullscreen; 400 this.fullscreen = fullscreen;
401 401
402 this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode); 402 this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
403 this.contentQuad.setFullscreen(fullscreen); 403 this.contentQuad.setFullscreen(fullscreen);
404 // TODO(crbug/643815): Set aspect ratio on content quad when available. 404 // TODO(crbug/643815): Set aspect ratio on content quad when available.
405 // TODO(amp): Don't show controls in fullscreen once MENU mode lands. 405 // TODO(amp): Don't show controls in fullscreen once MENU mode lands.
406 this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode); 406 this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode);
407 this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode); 407 this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode);
408 // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands.
409 this.omnibox.setVisibilityTimeout(
410 mode == api.Mode.STANDARD && !menuMode ?
411 0 : OMNIBOX_VISIBILITY_TIMEOUT_MS);
408 this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR); 412 this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
409 413
410 api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight, 414 api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight,
411 UI_DPR); 415 UI_DPR);
412 } 416 }
413 417
414 setSecureOrigin(secure) { 418 setSecurityLevel(level) {
415 this.secureOriginWarnings.setSecureOrigin(secure); 419 this.omnibox.setSecurityLevel(level);
416 this.omnibox.setSecureOrigin(secure); 420 }
421
422 setWebVRSecureOrigin(secure) {
423 this.secureOriginWarnings.setSecure(secure);
417 } 424 }
418 425
419 setReloadUiEnabled(enabled) { 426 setReloadUiEnabled(enabled) {
420 this.controls.setReloadUiEnabled(enabled); 427 this.controls.setReloadUiEnabled(enabled);
421 } 428 }
422 }; 429 };
423 430
424 function initialize() { 431 function initialize() {
425 sceneManager = new SceneManager(); 432 sceneManager = new SceneManager();
426 scene.flush(); 433 scene.flush();
427 434
428 api.domLoaded(); 435 api.domLoaded();
429 } 436 }
430 437
431 function command(dict) { 438 function command(dict) {
432 if ('mode' in dict) { 439 if ('mode' in dict) {
433 sceneManager.setMode(dict['mode'], dict['menuMode'], dict['fullscreen']); 440 sceneManager.setMode(dict['mode'], dict['menuMode'], dict['fullscreen']);
434 } 441 }
435 if ('secureOrigin' in dict) { 442 if ('securityLevel' in dict) {
436 sceneManager.setSecureOrigin(dict['secureOrigin']); 443 sceneManager.setSecurityLevel(dict['securityLevel']);
444 }
445 if ('webVRSecureOrigin' in dict) {
446 sceneManager.setWebVRSecureOrigin(dict['webVRSecureOrigin']);
437 } 447 }
438 if ('enableReloadUi' in dict) { 448 if ('enableReloadUi' in dict) {
439 sceneManager.setReloadUiEnabled(dict['enableReloadUi']); 449 sceneManager.setReloadUiEnabled(dict['enableReloadUi']);
440 } 450 }
441 if ('url' in dict) { 451 if ('url' in dict) {
442 let url = dict['url']; 452 let url = dict['url'];
443 sceneManager.omnibox.setURL(url['host'], url['path']); 453 sceneManager.omnibox.setURL(url['host'], url['path']);
444 } 454 }
445 if ('loading' in dict) { 455 if ('loading' in dict) {
446 sceneManager.omnibox.setLoading(dict['loading']); 456 sceneManager.omnibox.setLoading(dict['loading']);
447 } 457 }
448 scene.flush(); 458 scene.flush();
449 } 459 }
450 460
451 return { 461 return {
452 initialize: initialize, 462 initialize: initialize,
453 command: command, 463 command: command,
454 }; 464 };
455 })(); 465 })();
456 466
457 document.addEventListener('DOMContentLoaded', vrShellUi.initialize); 467 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);
OLDNEW
« no previous file with comments | « chrome/browser/android/vr_shell/vr_web_contents_observer.cc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698