OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 /** | 5 /** |
6 * @fileoverview Provides dialog-like behaviors for the tracing UI. | 6 * @fileoverview Provides dialog-like behaviors for the tracing UI. |
7 */ | 7 */ |
8 cr.define('cr.ui.overlay', function() { | 8 cr.define('cr.ui.overlay', function() { |
9 /** | 9 /** |
10 * Gets the top, visible overlay. It makes the assumption that if multiple | 10 * Gets the top, visible overlay. It makes the assumption that if multiple |
11 * overlays are visible, the last in the byte order is topmost. | 11 * overlays are visible, the last in the byte order is topmost. |
12 * TODO(estade): rely on aria-visibility instead? | 12 * TODO(estade): rely on aria-visibility instead? |
13 * @return {HTMLElement} The overlay. | 13 * @return {HTMLElement} The overlay. |
14 */ | 14 */ |
15 function getTopOverlay() { | 15 function getTopOverlay() { |
16 var overlays = /** @type !NodeList<!HTMLElement> */( | 16 var overlays = /** @type !NodeList<!HTMLElement> */ ( |
17 document.querySelectorAll('.overlay:not([hidden])')); | 17 document.querySelectorAll('.overlay:not([hidden])')); |
18 return overlays[overlays.length - 1]; | 18 return overlays[overlays.length - 1]; |
19 } | 19 } |
20 | 20 |
21 /** | 21 /** |
22 * Returns a visible default button of the overlay, if it has one. If the | 22 * Returns a visible default button of the overlay, if it has one. If the |
23 * overlay has more than one, the first one will be returned. | 23 * overlay has more than one, the first one will be returned. |
24 * | 24 * |
25 * @param {HTMLElement} overlay The .overlay. | 25 * @param {HTMLElement} overlay The .overlay. |
26 * @return {HTMLElement} The default button. | 26 * @return {HTMLElement} The default button. |
27 */ | 27 */ |
28 function getDefaultButton(overlay) { | 28 function getDefaultButton(overlay) { |
29 function isHidden(node) { return node.hidden; } | 29 function isHidden(node) { return node.hidden; } |
30 var defaultButtons = /** @type !NodeList<!HTMLElement> */( | 30 var defaultButtons = /** @type !NodeList<!HTMLElement> */ ( |
31 overlay.querySelectorAll('.page .button-strip > .default-button')); | 31 overlay.querySelectorAll('.page .button-strip > .default-button')); |
32 for (var i = 0; i < defaultButtons.length; i++) { | 32 for (var i = 0; i < defaultButtons.length; i++) { |
33 if (!findAncestor(defaultButtons[i], isHidden)) | 33 if (!findAncestor(defaultButtons[i], isHidden)) |
34 return defaultButtons[i]; | 34 return defaultButtons[i]; |
35 } | 35 } |
36 return null; | 36 return null; |
37 } | 37 } |
38 | 38 |
39 /** @type {boolean} */ | 39 /** @type {boolean} */ |
40 var globallyInitialized = false; | 40 var globallyInitialized = false; |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
74 } | 74 } |
75 | 75 |
76 setMaxHeightAllPages(); | 76 setMaxHeightAllPages(); |
77 } | 77 } |
78 | 78 |
79 /** | 79 /** |
80 * Sets the max-height of all pages in all overlays, based on the window | 80 * Sets the max-height of all pages in all overlays, based on the window |
81 * height. | 81 * height. |
82 */ | 82 */ |
83 function setMaxHeightAllPages() { | 83 function setMaxHeightAllPages() { |
84 var pages = document.querySelectorAll( | 84 var pages = document.querySelectorAll('.overlay .page:not(.not-resizable)'); |
85 '.overlay .page:not(.not-resizable)'); | |
86 | 85 |
87 var maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px'; | 86 var maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px'; |
88 for (var i = 0; i < pages.length; i++) | 87 for (var i = 0; i < pages.length; i++) |
89 pages[i].style.maxHeight = maxHeight; | 88 pages[i].style.maxHeight = maxHeight; |
90 } | 89 } |
91 | 90 |
92 /** | 91 /** |
93 * Adds behavioral hooks for the given overlay. | 92 * Adds behavioral hooks for the given overlay. |
94 * @param {HTMLElement} overlay The .overlay. | 93 * @param {HTMLElement} overlay The .overlay. |
95 */ | 94 */ |
96 function setupOverlay(overlay) { | 95 function setupOverlay(overlay) { |
97 // Close the overlay on clicking any of the pages' close buttons. | 96 // Close the overlay on clicking any of the pages' close buttons. |
98 var closeButtons = overlay.querySelectorAll('.page > .close-button'); | 97 var closeButtons = overlay.querySelectorAll('.page > .close-button'); |
99 for (var i = 0; i < closeButtons.length; i++) { | 98 for (var i = 0; i < closeButtons.length; i++) { |
100 closeButtons[i].addEventListener('click', function(e) { | 99 closeButtons[i].addEventListener('click', function(e) { |
101 if (cr.ui.FocusOutlineManager) | 100 if (cr.ui.FocusOutlineManager) |
102 cr.ui.FocusOutlineManager.forDocument(document).updateVisibility(); | 101 cr.ui.FocusOutlineManager.forDocument(document).updateVisibility(); |
103 cr.dispatchSimpleEvent(overlay, 'cancelOverlay'); | 102 cr.dispatchSimpleEvent(overlay, 'cancelOverlay'); |
104 }); | 103 }); |
105 } | 104 } |
106 | 105 |
107 // Remove the 'pulse' animation any time the overlay is hidden or shown. | 106 // Remove the 'pulse' animation any time the overlay is hidden or shown. |
108 overlay.__defineSetter__('hidden', function(value) { | 107 overlay.__defineSetter__('hidden', function(value) { |
109 this.classList.remove('pulse'); | 108 this.classList.remove('pulse'); |
110 if (value) | 109 if (value) |
111 this.setAttribute('hidden', true); | 110 this.setAttribute('hidden', true); |
112 else | 111 else |
113 this.removeAttribute('hidden'); | 112 this.removeAttribute('hidden'); |
114 }); | 113 }); |
115 overlay.__defineGetter__('hidden', function() { | 114 overlay.__defineGetter__( |
116 return this.hasAttribute('hidden'); | 115 'hidden', function() { return this.hasAttribute('hidden'); }); |
117 }); | |
118 | 116 |
119 // Shake when the user clicks away. | 117 // Shake when the user clicks away. |
120 overlay.addEventListener('click', function(e) { | 118 overlay.addEventListener('click', function(e) { |
121 // Only pulse if the overlay was the target of the click. | 119 // Only pulse if the overlay was the target of the click. |
122 if (this != e.target) | 120 if (this != e.target) |
123 return; | 121 return; |
124 | 122 |
125 // This may be null while the overlay is closing. | 123 // This may be null while the overlay is closing. |
126 var overlayPage = this.querySelector('.page:not([hidden])'); | 124 var overlayPage = this.querySelector('.page:not([hidden])'); |
127 if (overlayPage) | 125 if (overlayPage) |
128 overlayPage.classList.add('pulse'); | 126 overlayPage.classList.add('pulse'); |
129 }); | 127 }); |
130 overlay.addEventListener('webkitAnimationEnd', function(e) { | 128 overlay.addEventListener('webkitAnimationEnd', function(e) { |
131 e.target.classList.remove('pulse'); | 129 e.target.classList.remove('pulse'); |
132 }); | 130 }); |
133 } | 131 } |
134 | 132 |
135 return { | 133 return { |
136 getDefaultButton: getDefaultButton, | 134 getDefaultButton: getDefaultButton, |
137 globalInitialization: globalInitialization, | 135 globalInitialization: globalInitialization, |
138 setupOverlay: setupOverlay, | 136 setupOverlay: setupOverlay, |
139 }; | 137 }; |
140 }); | 138 }); |
OLD | NEW |