diff options
author | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2022-02-04 17:20:24 +0100 |
---|---|---|
committer | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2022-02-12 08:15:25 +0000 |
commit | 8fa0776f1f79e91fc9c0b9c1ba11a0a29c05196b (patch) | |
tree | 788d8d7549712682703a0310ca4a0f0860d4802b /chromium/chrome/browser/resources/tab_strip/alert_indicator.js | |
parent | 606d85f2a5386472314d39923da28c70c60dc8e7 (diff) |
BASELINE: Update Chromium to 98.0.4758.90
Change-Id: Ib7c41539bf8a8e0376bd639f27d68294de90f3c8
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>
Diffstat (limited to 'chromium/chrome/browser/resources/tab_strip/alert_indicator.js')
-rw-r--r-- | chromium/chrome/browser/resources/tab_strip/alert_indicator.js | 216 |
1 files changed, 0 insertions, 216 deletions
diff --git a/chromium/chrome/browser/resources/tab_strip/alert_indicator.js b/chromium/chrome/browser/resources/tab_strip/alert_indicator.js deleted file mode 100644 index 2fd6e32fb99..00000000000 --- a/chromium/chrome/browser/resources/tab_strip/alert_indicator.js +++ /dev/null @@ -1,216 +0,0 @@ -// Copyright 2019 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -import './strings.m.js'; - -import {CustomElement} from 'chrome://resources/js/custom_element.js'; -import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js'; - -import {TabAlertState} from './tab_strip.mojom-webui.js'; - -/** @const {string} */ -const MAX_WIDTH = '16px'; - -/** - * @param {!TabAlertState} alertState - * @return {string} - */ -function getAriaLabel(alertState) { - // The existing labels for alert states currently expects to format itself - // using the title of the tab (eg. "Website - Audio is playing"). The WebUI - // tab strip will provide the title of the tab elsewhere outside of this - // element, so just provide an empty string as the title here. This also - // allows for multiple labels for the same title (eg. "Website - Audio is - // playing - VR is presenting"). - switch (alertState) { - case TabAlertState.kMediaRecording: - return loadTimeData.getStringF('mediaRecording', ''); - case TabAlertState.kTabCapturing: - return loadTimeData.getStringF('tabCapturing', ''); - case TabAlertState.kAudioPlaying: - return loadTimeData.getStringF('audioPlaying', ''); - case TabAlertState.kAudioMuting: - return loadTimeData.getStringF('audioMuting', ''); - case TabAlertState.kBluetoothConnected: - return loadTimeData.getStringF('bluetoothConnected', ''); - case TabAlertState.kUsbConnected: - return loadTimeData.getStringF('usbConnected', ''); - case TabAlertState.kHidConnected: - return loadTimeData.getStringF('hidConnected', ''); - case TabAlertState.kSerialConnected: - return loadTimeData.getStringF('serialConnected', ''); - case TabAlertState.kPipPlaying: - return loadTimeData.getStringF('pipPlaying', ''); - case TabAlertState.kDesktopCapturing: - return loadTimeData.getStringF('desktopCapturing', ''); - case TabAlertState.kVrPresentingInHeadset: - return loadTimeData.getStringF('vrPresenting', ''); - default: - return ''; - } -} - -/** @type {!Map<!TabAlertState, string>} */ -const ALERT_STATE_MAP = new Map([ - [TabAlertState.kMediaRecording, 'media-recording'], - [TabAlertState.kTabCapturing, 'tab-capturing'], - [TabAlertState.kAudioPlaying, 'audio-playing'], - [TabAlertState.kAudioMuting, 'audio-muting'], - [TabAlertState.kBluetoothConnected, 'bluetooth-connected'], - [TabAlertState.kUsbConnected, 'usb-connected'], - [TabAlertState.kHidConnected, 'hid-connected'], - [TabAlertState.kSerialConnected, 'serial-connected'], - [TabAlertState.kPipPlaying, 'pip-playing'], - [TabAlertState.kDesktopCapturing, 'desktop-capturing'], - [TabAlertState.kVrPresentingInHeadset, 'vr-presenting'], -]); - -/** - * Use for mapping to CSS attributes. - * @param {!TabAlertState} alertState - * @return {string} - */ -function getAlertStateAttribute(alertState) { - return ALERT_STATE_MAP.get(alertState) || ''; -} - -export class AlertIndicatorElement extends CustomElement { - static get template() { - return `{__html_template__}`; - } - - constructor() { - super(); - - /** @private {!TabAlertState} */ - this.alertState_; - - /** @private {number} */ - this.fadeDurationMs_ = 125; - - /** - * An animation that is currently in-flight to fade the element in. - * @private {?Animation} - */ - this.fadeInAnimation_ = null; - - /** - * An animation that is currently in-flight to fade the element out. - * @private {?Animation} - */ - this.fadeOutAnimation_ = null; - - /** - * A promise that resolves when the fade out animation finishes or rejects - * if a fade out animation is canceled. - * @private {?Promise} - */ - this.fadeOutAnimationPromise_ = null; - } - - /** @return {!TabAlertState} */ - get alertState() { - return this.alertState_; - } - - /** @param {!TabAlertState} alertState */ - set alertState(alertState) { - this.setAttribute('alert-state_', getAlertStateAttribute(alertState)); - this.setAttribute('aria-label', getAriaLabel(alertState)); - this.alertState_ = alertState; - } - - /** @param {number} duration */ - overrideFadeDurationForTesting(duration) { - this.fadeDurationMs_ = duration; - } - - show() { - if (this.fadeOutAnimation_) { - // Cancel any fade out animations to prevent the element from fading out - // and being removed. At this point, the tab's alertStates have changed - // to a state in which this indicator should be visible. - this.fadeOutAnimation_.cancel(); - this.fadeOutAnimation_ = null; - this.fadeOutAnimationPromise_ = null; - } - - if (this.fadeInAnimation_) { - // If the element was already faded in, don't fade it in again - return; - } - - - if (this.alertState_ === TabAlertState.kMediaRecording || - this.alertState_ === TabAlertState.kTabCapturing || - this.alertState_ === TabAlertState.kDesktopCapturing) { - // Fade in and out 2 times and then fade in - const totalDuration = 2600; - this.fadeInAnimation_ = this.animate( - [ - {opacity: 0, maxWidth: 0, offset: 0}, - {opacity: 1, maxWidth: MAX_WIDTH, offset: 200 / totalDuration}, - {opacity: 0, maxWidth: MAX_WIDTH, offset: 1200 / totalDuration}, - {opacity: 1, maxWidth: MAX_WIDTH, offset: 1400 / totalDuration}, - {opacity: 0, maxWidth: MAX_WIDTH, offset: 2400 / totalDuration}, - {opacity: 1, maxWidth: MAX_WIDTH, offset: 1}, - ], - { - duration: totalDuration, - easing: 'linear', - fill: 'forwards', - }); - } else { - this.fadeInAnimation_ = this.animate( - [ - {opacity: 0, maxWidth: 0}, - {opacity: 1, maxWidth: MAX_WIDTH}, - ], - { - duration: this.fadeDurationMs_, - fill: 'forwards', - }); - } - } - - /** @return {!Promise} */ - hide() { - if (this.fadeInAnimation_) { - // Cancel any fade in animations to prevent the element from fading in. At - // this point, the tab's alertStates have changed to a state in which this - // indicator should not be visible. - this.fadeInAnimation_.cancel(); - this.fadeInAnimation_ = null; - } - - if (this.fadeOutAnimationPromise_) { - return this.fadeOutAnimationPromise_; - } - - this.fadeOutAnimationPromise_ = new Promise((resolve, reject) => { - this.fadeOutAnimation_ = this.animate( - [ - {opacity: 1, maxWidth: MAX_WIDTH}, - {opacity: 0, maxWidth: 0}, - ], - { - duration: this.fadeDurationMs_, - fill: 'forwards', - }); - this.fadeOutAnimation_.addEventListener('cancel', () => { - reject(); - }); - this.fadeOutAnimation_.addEventListener('finish', () => { - this.remove(); - this.fadeOutAnimation_ = null; - this.fadeOutAnimationPromise_ = null; - resolve(); - }); - }); - - return this.fadeOutAnimationPromise_; - } -} - -customElements.define('tabstrip-alert-indicator', AlertIndicatorElement); |