| 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 |