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 : |
mthiesse
2016/12/23 05:30:59
nit: does style guide require the else clause to b
dschuyler
2016/12/27 19:38:10
I recall a discussion about putting ? and : at the
dschuyler
2016/12/28 19:26:22
Ah Dan points out that there was a vote on this to
cjgrant
2017/01/04 18:24:12
I've run clang-format on the vr_shell files as par
| |
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 |