Chromium Code Reviews| OLD | NEW |
|---|---|
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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); |
| OLD | NEW |