| 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 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 70 let pixelY = Math.floor(rect.top); | 70 let pixelY = Math.floor(rect.top); |
| 71 let pixelWidth = Math.ceil(rect.right) - pixelX; | 71 let pixelWidth = Math.ceil(rect.right) - pixelX; |
| 72 let pixelHeight = Math.ceil(rect.bottom) - pixelY; | 72 let pixelHeight = Math.ceil(rect.bottom) - pixelY; |
| 73 | 73 |
| 74 let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight); | 74 let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight); |
| 75 element.setSize(pixelWidth / 1000, pixelHeight / 1000); | 75 element.setSize(pixelWidth / 1000, pixelHeight / 1000); |
| 76 | 76 |
| 77 // Pull additional custom properties from CSS. | 77 // Pull additional custom properties from CSS. |
| 78 let style = window.getComputedStyle(domElement); | 78 let style = window.getComputedStyle(domElement); |
| 79 element.setTranslation( | 79 element.setTranslation( |
| 80 getStyleFloat(style, '--tranX'), | 80 getStyleFloat(style, '--tranX'), getStyleFloat(style, '--tranY'), |
| 81 getStyleFloat(style, '--tranY'), | |
| 82 getStyleFloat(style, '--tranZ')); | 81 getStyleFloat(style, '--tranZ')); |
| 83 | 82 |
| 84 this.uiElementId = scene.addElement(element); | 83 this.uiElementId = scene.addElement(element); |
| 85 this.uiAnimationId = -1; | 84 this.uiAnimationId = -1; |
| 86 this.domElement = domElement; | 85 this.domElement = domElement; |
| 87 } | 86 } |
| 88 }; | 87 }; |
| 89 | 88 |
| 90 class RoundButton extends DomUiElement { | 89 class RoundButton extends DomUiElement { |
| 91 constructor(domId, callback) { | 90 constructor(domId, callback) { |
| (...skipping 25 matching lines...) Expand all Loading... |
| 117 | 116 |
| 118 onMouseLeave() { | 117 onMouseLeave() { |
| 119 this.configure(0.8, 0, 0); | 118 this.configure(0.8, 0, 0); |
| 120 } | 119 } |
| 121 }; | 120 }; |
| 122 | 121 |
| 123 class Controls { | 122 class Controls { |
| 124 constructor(contentQuadId) { | 123 constructor(contentQuadId) { |
| 125 this.buttons = []; | 124 this.buttons = []; |
| 126 let descriptors = [ | 125 let descriptors = [ |
| 127 ['#back', function() { | 126 [ |
| 127 '#back', |
| 128 function() { |
| 128 api.doAction(api.Action.HISTORY_BACK); | 129 api.doAction(api.Action.HISTORY_BACK); |
| 129 }], | 130 } |
| 130 ['#reload', function() { | 131 ], |
| 132 [ |
| 133 '#reload', |
| 134 function() { |
| 131 api.doAction(api.Action.RELOAD); | 135 api.doAction(api.Action.RELOAD); |
| 132 }], | 136 } |
| 133 ['#forward', function() { | 137 ], |
| 138 [ |
| 139 '#forward', |
| 140 function() { |
| 134 api.doAction(api.Action.HISTORY_FORWARD); | 141 api.doAction(api.Action.HISTORY_FORWARD); |
| 135 }], | 142 } |
| 143 ], |
| 136 ]; | 144 ]; |
| 137 | 145 |
| 138 /** @const */ var BUTTON_SPACING = 0.136; | 146 /** @const */ var BUTTON_SPACING = 0.136; |
| 139 | 147 |
| 140 let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5); | 148 let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5); |
| 141 for (let i = 0; i < descriptors.length; i++) { | 149 for (let i = 0; i < descriptors.length; i++) { |
| 142 // Use an invisible parent to simplify Z-axis movement on hover. | 150 // Use an invisible parent to simplify Z-axis movement on hover. |
| 143 let position = new api.UiElement(0, 0, 0, 0); | 151 let position = new api.UiElement(0, 0, 0, 0); |
| 144 position.setVisible(false); | 152 position.setVisible(false); |
| 145 position.setTranslation(startPosition + i * BUTTON_SPACING, -0.68, -1); | 153 position.setTranslation(startPosition + i * BUTTON_SPACING, -0.68, -1); |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 196 class SecureOriginWarnings { | 204 class SecureOriginWarnings { |
| 197 constructor() { | 205 constructor() { |
| 198 /** @const */ var DISTANCE = 0.7; | 206 /** @const */ var DISTANCE = 0.7; |
| 199 /** @const */ var ANGLE_UP = 16.3 * Math.PI / 180.0; | 207 /** @const */ var ANGLE_UP = 16.3 * Math.PI / 180.0; |
| 200 | 208 |
| 201 // Permanent WebVR security warning. This warning is shown near the top of | 209 // Permanent WebVR security warning. This warning is shown near the top of |
| 202 // the field of view. | 210 // the field of view. |
| 203 this.webVrSecureWarning = new DomUiElement('#webvr-not-secure-permanent'); | 211 this.webVrSecureWarning = new DomUiElement('#webvr-not-secure-permanent'); |
| 204 let update = new api.UiElementUpdate(); | 212 let update = new api.UiElementUpdate(); |
| 205 update.setScale(DISTANCE, DISTANCE, 1); | 213 update.setScale(DISTANCE, DISTANCE, 1); |
| 206 update.setTranslation(0, DISTANCE * Math.sin(ANGLE_UP), | 214 update.setTranslation( |
| 207 -DISTANCE * Math.cos(ANGLE_UP)); | 215 0, DISTANCE * Math.sin(ANGLE_UP), -DISTANCE * Math.cos(ANGLE_UP)); |
| 208 update.setRotation(1.0, 0.0, 0.0, ANGLE_UP); | 216 update.setRotation(1.0, 0.0, 0.0, ANGLE_UP); |
| 209 update.setHitTestable(false); | 217 update.setHitTestable(false); |
| 210 update.setVisible(false); | 218 update.setVisible(false); |
| 211 update.setLockToFieldOfView(true); | 219 update.setLockToFieldOfView(true); |
| 212 scene.updateElement(this.webVrSecureWarning.uiElementId, update); | 220 scene.updateElement(this.webVrSecureWarning.uiElementId, update); |
| 213 | 221 |
| 214 // Temporary WebVR security warning. This warning is shown in the center | 222 // Temporary WebVR security warning. This warning is shown in the center |
| 215 // of the field of view, for a limited period of time. | 223 // of the field of view, for a limited period of time. |
| 216 this.transientWarning = new DomUiElement( | 224 this.transientWarning = new DomUiElement('#webvr-not-secure-transient'); |
| 217 '#webvr-not-secure-transient'); | |
| 218 update = new api.UiElementUpdate(); | 225 update = new api.UiElementUpdate(); |
| 219 update.setScale(DISTANCE, DISTANCE, 1); | 226 update.setScale(DISTANCE, DISTANCE, 1); |
| 220 update.setTranslation(0, 0, -DISTANCE); | 227 update.setTranslation(0, 0, -DISTANCE); |
| 221 update.setHitTestable(false); | 228 update.setHitTestable(false); |
| 222 update.setVisible(false); | 229 update.setVisible(false); |
| 223 update.setLockToFieldOfView(true); | 230 update.setLockToFieldOfView(true); |
| 224 scene.updateElement(this.transientWarning.uiElementId, update); | 231 scene.updateElement(this.transientWarning.uiElementId, update); |
| 225 } | 232 } |
| 226 | 233 |
| 227 setEnabled(enabled) { | 234 setEnabled(enabled) { |
| 228 this.enabled = enabled; | 235 this.enabled = enabled; |
| 229 this.updateState(); | 236 this.updateState(); |
| 230 } | 237 } |
| 231 | 238 |
| 232 setSecure(secure) { | 239 setSecure(secure) { |
| 233 this.secure = secure; | 240 this.secure = secure; |
| 234 this.updateState(); | 241 this.updateState(); |
| 235 } | 242 } |
| 236 | 243 |
| 237 updateState() { | 244 updateState() { |
| 238 /** @const */ var TRANSIENT_TIMEOUT_MS = 30000; | 245 /** @const */ var TRANSIENT_TIMEOUT_MS = 30000; |
| 239 | 246 |
| 240 let visible = (this.enabled && !this.secure); | 247 let visible = (this.enabled && !this.secure); |
| 241 if (this.secureOriginTimer) { | 248 if (this.secureOriginTimer) { |
| 242 clearInterval(this.secureOriginTimer); | 249 clearInterval(this.secureOriginTimer); |
| 243 this.secureOriginTimer = null; | 250 this.secureOriginTimer = null; |
| 244 } | 251 } |
| 245 if (visible) { | 252 if (visible) { |
| 246 this.secureOriginTimer = setTimeout( | 253 this.secureOriginTimer = |
| 247 this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS); | 254 setTimeout(this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS); |
| 248 } | 255 } |
| 249 this.showOrHideWarnings(visible); | 256 this.showOrHideWarnings(visible); |
| 250 } | 257 } |
| 251 | 258 |
| 252 showOrHideWarnings(visible) { | 259 showOrHideWarnings(visible) { |
| 253 let update = new api.UiElementUpdate(); | 260 let update = new api.UiElementUpdate(); |
| 254 update.setVisible(visible); | 261 update.setVisible(visible); |
| 255 scene.updateElement(this.webVrSecureWarning.uiElementId, update); | 262 scene.updateElement(this.webVrSecureWarning.uiElementId, update); |
| 256 update = new api.UiElementUpdate(); | 263 update = new api.UiElementUpdate(); |
| 257 update.setVisible(visible); | 264 update.setVisible(visible); |
| (...skipping 19 matching lines...) Expand all Loading... |
| 277 this.nativeState = {}; | 284 this.nativeState = {}; |
| 278 | 285 |
| 279 // Initially invisible. | 286 // Initially invisible. |
| 280 let update = new api.UiElementUpdate(); | 287 let update = new api.UiElementUpdate(); |
| 281 update.setVisible(false); | 288 update.setVisible(false); |
| 282 scene.updateElement(this.domUiElement.uiElementId, update); | 289 scene.updateElement(this.domUiElement.uiElementId, update); |
| 283 this.nativeState.visible = false; | 290 this.nativeState.visible = false; |
| 284 | 291 |
| 285 // Listen to the end of transitions, so that the box can be natively | 292 // Listen to the end of transitions, so that the box can be natively |
| 286 // hidden after it finishes hiding itself. | 293 // hidden after it finishes hiding itself. |
| 287 document.querySelector('#omni').addEventListener('transitionend', | 294 document.querySelector('#omni').addEventListener( |
| 288 this.onAnimationDone.bind(this)); | 295 'transitionend', this.onAnimationDone.bind(this)); |
| 289 } | 296 } |
| 290 | 297 |
| 291 getSecurityIconElementId(level) { | 298 getSecurityIconElementId(level) { |
| 292 // See security_state.h and getSecurityIconResource() for this mapping. | 299 // See security_state.h and getSecurityIconResource() for this mapping. |
| 293 switch (level) { | 300 switch (level) { |
| 294 case 0: // NONE | 301 case 0: // NONE |
| 295 case 1: // HTTP_SHOW_WARNING | 302 case 1: // HTTP_SHOW_WARNING |
| 296 case 4: // SECURITY_WARNING | 303 case 4: // SECURITY_WARNING |
| 297 return '#omni-info-icon'; | 304 return '#omni-info-icon'; |
| 298 case 2: // SECURE: | 305 case 2: // SECURE: |
| 299 case 3: // EV_SECURE: | 306 case 3: // EV_SECURE: |
| 300 return '#omni-lock-icon'; | 307 return '#omni-lock-icon'; |
| 301 case 5: // SECURE_WITH_POLICY_INSTALLED_CERT (ChromeOS only) | 308 case 5: // SECURE_WITH_POLICY_INSTALLED_CERT (ChromeOS only) |
| 302 case 6: // DANGEROUS | 309 case 6: // DANGEROUS |
| 303 default: | 310 default: |
| 304 return '#omni-warning-icon'; | 311 return '#omni-warning-icon'; |
| 305 } | 312 } |
| 306 } | 313 } |
| 307 | 314 |
| 308 setEnabled(enabled) { | 315 setEnabled(enabled) { |
| 309 this.enabled = enabled; | 316 this.enabled = enabled; |
| 310 this.resetVisibilityTimer(); | 317 this.resetVisibilityTimer(); |
| 311 this.updateState(); | 318 this.updateState(); |
| 312 } | 319 } |
| (...skipping 24 matching lines...) Expand all Loading... |
| 337 this.updateState(); | 344 this.updateState(); |
| 338 } | 345 } |
| 339 | 346 |
| 340 resetVisibilityTimer() { | 347 resetVisibilityTimer() { |
| 341 if (this.visibilityTimer) { | 348 if (this.visibilityTimer) { |
| 342 clearInterval(this.visibilityTimer); | 349 clearInterval(this.visibilityTimer); |
| 343 this.visibilityTimer = null; | 350 this.visibilityTimer = null; |
| 344 } | 351 } |
| 345 if (this.enabled && this.visibilityTimeout > 0 && !this.loading) { | 352 if (this.enabled && this.visibilityTimeout > 0 && !this.loading) { |
| 346 this.visibilityTimer = setTimeout( | 353 this.visibilityTimer = setTimeout( |
| 347 this.onVisibilityTimer.bind(this), this.visibilityTimeout); | 354 this.onVisibilityTimer.bind(this), this.visibilityTimeout); |
| 348 } | 355 } |
| 349 } | 356 } |
| 350 | 357 |
| 351 onVisibilityTimer() { | 358 onVisibilityTimer() { |
| 352 this.visibilityTimer = null; | 359 this.visibilityTimer = null; |
| 353 this.updateState(); | 360 this.updateState(); |
| 354 } | 361 } |
| 355 | 362 |
| 356 onAnimationDone(e) { | 363 onAnimationDone(e) { |
| 357 if (e.propertyName == 'opacity' && !this.visibleAfterTransition) { | 364 if (e.propertyName == 'opacity' && !this.visibleAfterTransition) { |
| (...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 419 | 426 |
| 420 this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode); | 427 this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode); |
| 421 this.contentQuad.setFullscreen(fullscreen); | 428 this.contentQuad.setFullscreen(fullscreen); |
| 422 // TODO(crbug/643815): Set aspect ratio on content quad when available. | 429 // TODO(crbug/643815): Set aspect ratio on content quad when available. |
| 423 // TODO(amp): Don't show controls in fullscreen once MENU mode lands. | 430 // TODO(amp): Don't show controls in fullscreen once MENU mode lands. |
| 424 this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode); | 431 this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode); |
| 425 this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode); | 432 this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode); |
| 426 // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands. | 433 // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands. |
| 427 this.omnibox.setVisibilityTimeout( | 434 this.omnibox.setVisibilityTimeout( |
| 428 mode == api.Mode.STANDARD && !menuMode ? | 435 mode == api.Mode.STANDARD && !menuMode ? |
| 429 0 : OMNIBOX_VISIBILITY_TIMEOUT_MS); | 436 0 : |
| 437 OMNIBOX_VISIBILITY_TIMEOUT_MS); |
| 430 this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR); | 438 this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR); |
| 431 | 439 |
| 432 api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight, | 440 api.setUiCssSize( |
| 433 UI_DPR); | 441 uiRootElement.clientWidth, uiRootElement.clientHeight, UI_DPR); |
| 434 } | 442 } |
| 435 | 443 |
| 436 setSecurityLevel(level) { | 444 setSecurityLevel(level) { |
| 437 this.omnibox.setSecurityLevel(level); | 445 this.omnibox.setSecurityLevel(level); |
| 438 } | 446 } |
| 439 | 447 |
| 440 setWebVRSecureOrigin(secure) { | 448 setWebVRSecureOrigin(secure) { |
| 441 this.secureOriginWarnings.setSecure(secure); | 449 this.secureOriginWarnings.setSecure(secure); |
| 442 } | 450 } |
| 443 | 451 |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 476 scene.flush(); | 484 scene.flush(); |
| 477 } | 485 } |
| 478 | 486 |
| 479 return { | 487 return { |
| 480 initialize: initialize, | 488 initialize: initialize, |
| 481 command: command, | 489 command: command, |
| 482 }; | 490 }; |
| 483 })(); | 491 })(); |
| 484 | 492 |
| 485 document.addEventListener('DOMContentLoaded', vrShellUi.initialize); | 493 document.addEventListener('DOMContentLoaded', vrShellUi.initialize); |
| OLD | NEW |