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

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

Issue 2600683002: Run tools/clang-format-js on some of chrome/browser/resources/ (Closed)
Patch Set: event_handler.js Created 3 years, 12 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 unified diff | Download patch
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 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
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
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
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
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
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
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
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);
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698