feat(toolbar-button-clicked) Enhance toolbar buttons with notify click

- add possibility to allow execution of the button's routine besides triggering
`toolbarButtonClicked` API event
- keep backwards compatibility
- get rid of `ToolbarButton`

config.js

     //     alwaysVisible: false
     // },
 
-    // Toolbar buttons which have their click event exposed through the API on
-    // `toolbarButtonClicked` event instead of executing the normal click routine.
+    // Toolbar buttons which have their click/tap event exposed through the API on
+    // `toolbarButtonClicked`. Passing a string for the button key will
+    // prevent execution of the click/tap routine; passing an object with `key` and
+    // `preventExecution` flag on false will not prevent execution of the click/tap
+    // routine. Below array with mixed mode for passing the buttons.
     // buttonsWithNotifyClick: [
-    //    'camera',
-    //    'chat',
-    //    'closedcaptions',
-    //    'desktop',
-    //    'download',
-    //    'embedmeeting',
-    //    'etherpad',
-    //    'feedback',
-    //    'filmstrip',
-    //    'fullscreen',
-    //    'hangup',
-    //    'help',
-    //    'invite',
-    //    'livestreaming',
-    //    'microphone',
-    //    'mute-everyone',
-    //    'mute-video-everyone',
-    //    'participants-pane',
-    //    'profile',
-    //    'raisehand',
-    //    'recording',
-    //    'security',
-    //    'select-background',
-    //    'settings',
-    //    'shareaudio',
-    //    'sharedvideo',
-    //    'shortcuts',
-    //    'stats',
-    //    'tileview',
-    //    'toggle-camera',
-    //    'videoquality',
-    //    '__end'
+    //     'camera',
+    //     {
+    //         key: 'chat',
+    //         preventExecution: false
+    //     },
+    //     {
+    //         key: 'closedcaptions',
+    //         preventExecution: true
+    //     },
+    //     'desktop',
+    //     'download',
+    //     'embedmeeting',
+    //     'etherpad',
+    //     'feedback',
+    //     'filmstrip',
+    //     'fullscreen',
+    //     'hangup',
+    //     'help',
+    //     {
+    //         key: 'invite',
+    //         preventExecution: false
+    //     },
+    //     'livestreaming',
+    //     'microphone',
+    //     'mute-everyone',
+    //     'mute-video-everyone',
+    //     'participants-pane',
+    //     'profile',
+    //     {
+    //         key: 'raisehand',
+    //         preventExecution: true
+    //     },
+    //     'recording',
+    //     'security',
+    //     'select-background',
+    //     'settings',
+    //     'shareaudio',
+    //     'sharedvideo',
+    //     'shortcuts',
+    //     'stats',
+    //     'tileview',
+    //     'toggle-camera',
+    //     'videoquality',
+    //     // The add passcode button from the security dialog.
+    //     {
+    //         key: 'add-passcode',
+    //         preventExecution: false
+    //     }
+    //     '__end'
     // ],
 
     // List of pre meeting screens buttons to hide. The values must be one or more of the 5 allowed buttons:

modules/API/API.js

      * Notify external application ( if API is enabled) that a toolbar button was clicked.
      *
      * @param {string} key - The key of the toolbar button.
+     * @param {boolean} preventExecution - Whether execution of the button click was prevented or not.
      * @returns {void}
      */
-    notifyToolbarButtonClicked(key: string) {
+    notifyToolbarButtonClicked(key: string, preventExecution: boolean) {
         this._sendEvent({
             name: 'toolbar-button-clicked',
-            key
+            key,
+            preventExecution
         });
     }
 

react/features/base/toolbox/components/AbstractAudioMuteButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-
         this._setAudioMuted(!this._isAudioMuted());
     }
 

react/features/base/toolbox/components/AbstractButton.js

 
 import React, { Component } from 'react';
 
+import { NOTIFY_CLICK_MODE } from '../../../toolbox/constants';
 import { combineStyles } from '../../styles';
 
 import type { Styles } from './AbstractToolboxItem';
      */
     afterClick: ?Function,
 
+    /**
+     * The button's key.
+     */
+    buttonKey?: string,
+
     /**
      * Extra styles which will be applied in conjunction with `styles` or
      * `toggledStyles` when the button is disabled;.
      */
      handleClick?: Function,
 
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string,
+
     /**
      * Whether to show the label or not.
      */
     visible: boolean
 };
 
+declare var APP: Object;
+
 /**
  * Default style for disabled buttons.
  */
         this._onClick = this._onClick.bind(this);
     }
 
+    /**
+     * Helper function to be implemented by subclasses, which should be used
+     * to handle a key being down.
+     *
+     * @protected
+     * @returns {void}
+     */
+    _onKeyDown() {
+        // To be implemented by subclass.
+    }
+
     /**
      * Helper function to be implemented by subclasses, which should be used
      * to handle the button being clicked / pressed.
     _onClick: (*) => void;
 
     /**
-     * Handles clicking / pressing the button, and toggles the audio mute state
-     * accordingly.
+     * Handles clicking / pressing the button.
      *
      * @param {Object} e - Event.
      * @private
      * @returns {void}
      */
     _onClick(e) {
-        const { afterClick } = this.props;
+        const { afterClick, handleClick, notifyMode, buttonKey } = this.props;
+
+        if (typeof APP !== 'undefined' && notifyMode) {
+            APP.API.notifyToolbarButtonClicked(
+                buttonKey, notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY
+            );
+        }
+
+        if (notifyMode !== NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY) {
+            if (handleClick) {
+                handleClick();
+            }
+
+            this._handleClick();
+        }
 
-        this._handleClick();
         afterClick && afterClick(e);
 
         // blur after click to release focus from button to allow PTT.
             <ToolboxItem
                 disabled = { this._isDisabled() }
                 onClick = { this._onClick }
+                onKeyDown = { this._onKeyDown }
                 { ...props } />
         );
     }

react/features/base/toolbox/components/AbstractVideoMuteButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-
         this._setVideoMuted(!this._isVideoMuted());
     }
 

react/features/base/toolbox/components/ToolboxItem.web.js

 import { Tooltip } from '../../tooltip';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
-import type { Props } from './AbstractToolboxItem';
+import type { Props as AbstractToolboxItemProps } from './AbstractToolboxItem';
+
+type Props = AbstractToolboxItemProps & {
+
+    /**
+    * On key down handler.
+    */
+    onKeyDown: Function
+};
 
 /**
  * Web implementation of {@code AbstractToolboxItem}.
             disabled,
             elementAfter,
             onClick,
+            onKeyDown,
             showLabel,
             tooltipPosition,
             toggled
             'aria-label': this.accessibilityLabel,
             className: className + (disabled ? ' disabled' : ''),
             onClick: disabled ? undefined : onClick,
+            onKeyDown: disabled ? undefined : onKeyDown,
             onKeyPress: this._onKeyPress,
             tabIndex: 0,
             role: showLabel ? 'menuitem' : 'button'

react/features/base/toolbox/components/web/ToolboxButtonWithIcon.js

 
 import React from 'react';
 
+import { NOTIFY_CLICK_MODE } from '../../../../toolbox/constants';
 import { Icon } from '../../../icons';
 import { Tooltip } from '../../../tooltip';
 
 type Props = {
 
+    /**
+     * The button's key.
+     */
+    buttonKey?: string,
+
     /**
      * The decorated component (ToolboxButton).
      */
      */
     iconDisabled: boolean,
 
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string,
+
     /**
      * Click handler for the small icon.
      */
     iconId: string
 };
 
+declare var APP: Object;
+
 /**
  * Displays the `ToolboxButtonWithIcon` component.
  *
         icon,
         iconDisabled,
         iconTooltip,
+        buttonKey,
+        notifyMode,
         onIconClick,
         onIconKeyDown,
         styles,
             = 'settings-button-small-icon settings-button-small-icon--disabled';
     } else {
         iconProps.className = 'settings-button-small-icon';
-        iconProps.onClick = onIconClick;
+        iconProps.onClick = () => {
+            if (typeof APP !== 'undefined' && notifyMode) {
+                APP.API.notifyToolbarButtonClicked(
+                    buttonKey, notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY
+                );
+            }
+
+            if (notifyMode !== NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY) {
+                onIconClick();
+            }
+        };
         iconProps.onKeyDown = onIconKeyDown;
         iconProps.role = 'button';
         iconProps.tabIndex = 0;

react/features/chat/components/web/ChatButton.js

         // Unused.
     }
 
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @protected
-     * @returns {void}
-     */
-    _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-    }
-
     /**
      * Indicates whether this button is in toggled state or not.
      *

react/features/embed-meeting/components/EmbedMeetingButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('embed.meeting'));
         dispatch(openDialog(EmbedMeetingDialog));

react/features/etherpad/components/SharedDocumentButton.web.js

 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
 import { toggleDocument } from '../../etherpad/actions';
 
-
 type Props = AbstractButtonProps & {
 
     /**
      * @returns {void}
      */
     _handleClick() {
-        const { _editing, dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _editing, dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent(
             'toggle.etherpad',

react/features/feedback/components/FeedbackButton.web.js

      * @returns {void}
      */
     _handleClick() {
-        const { _conference, dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _conference, dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('feedback'));
         dispatch(openFeedbackDialog(_conference));

react/features/invite/components/add-people-dialog/web/InviteButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('invite'));
         dispatch(beginAddPeople());

react/features/keyboard-shortcuts/components/KeyboardShortcutsButton.web.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('shortcuts'));
         dispatch(openKeyboardShortcutsDialog());

react/features/local-recording/components/LocalRecordingButton.web.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('local.recording'));
         dispatch(openDialog(LocalRecordingInfoDialog));

react/features/participants-pane/components/web/ParticipantsPaneButton.js

     label = 'toolbar.participants';
     tooltip = 'toolbar.participants';
 
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @protected
-     * @returns {void}
-     */
-    _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-    }
-
     /**
      * Indicates whether this button is in toggled state or not.
      *

react/features/reactions/components/web/RaiseHandButton.js

+// @flow
+
+import { translate } from '../../../base/i18n';
+import { IconRaisedHand } from '../../../base/icons';
+import { getLocalParticipant, hasRaisedHand } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+
+
+/**
+ * The type of the React {@code Component} props of {@link RaiseHandButton}.
+ */
+type Props = AbstractButtonProps & {
+
+    /**
+     * Whether or not the hand is raised.
+     */
+     raisedHand: boolean,
+};
+
+/**
+ * Implementation of a button for raising hand.
+ */
+class RaiseHandButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand';
+    icon = IconRaisedHand;
+    label = 'toolbar.raiseHand';
+    toggledLabel = 'toolbar.raiseHand';
+
+    /**
+     * Retrieves tooltip dynamically.
+     */
+    get tooltip() {
+        return 'toolbar.raiseHand';
+    }
+
+    /**
+     * Required by linter due to AbstractButton overwritten prop being writable.
+     *
+     * @param {string} _value - The value.
+     */
+    set tooltip(_value) {
+        // Unused.
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        return this.props.raisedHand;
+    }
+}
+
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {Object}
+ */
+const mapStateToProps = state => {
+    const localParticipant = getLocalParticipant(state);
+
+    return {
+        raisedHand: hasRaisedHand(localParticipant)
+    };
+};
+
+export default translate(connect(mapStateToProps)(RaiseHandButton));

react/features/reactions/components/web/ReactionsMenuButton.js

 
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
-import { IconArrowUp, IconRaisedHand } from '../../../base/icons';
-import { getLocalParticipant, hasRaisedHand } from '../../../base/participants';
+import { IconArrowUp } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
-import ToolbarButton from '../../../toolbox/components/web/ToolbarButton';
 import { toggleReactionsMenuVisibility } from '../../actions.web';
 import { type ReactionEmojiProps } from '../../constants';
 import { getReactionsQueue, isReactionsEnabled } from '../../functions.any';
 import { getReactionsMenuVisibility } from '../../functions.web';
 
+import RaiseHandButton from './RaiseHandButton';
 import ReactionEmoji from './ReactionEmoji';
 import ReactionsMenuPopup from './ReactionsMenuPopup';
 
      */
     _reactionsEnabled: Boolean,
 
+    /**
+     * The button's key.
+     */
+     buttonKey?: string,
+
     /**
      * Redux dispatch function.
      */
     isMobile: boolean,
 
     /**
-     * Whether or not the local participant's hand is raised.
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
      */
-    raisedHand: boolean,
+    notifyMode?: string,
 
     /**
      * The array of reactions to be displayed.
  */
 function ReactionsMenuButton({
     _reactionsEnabled,
+    buttonKey,
     dispatch,
     handleClick,
     isOpen,
     isMobile,
-    raisedHand,
+    notifyMode,
     reactionsQueue,
     t
 }: Props) {
         dispatch(toggleReactionsMenuVisibility());
     }, [ dispatch ]);
 
-    const raiseHandButton = (<ToolbarButton
-        accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
-        icon = { IconRaisedHand }
-        key = 'raise-hand'
-        onClick = { handleClick }
-        toggled = { raisedHand }
-        tooltip = { t('toolbar.raiseHand') } />);
-
     return (
         <div className = 'reactions-menu-popup-container'>
             <ReactionsMenuPopup>
-                {!_reactionsEnabled || isMobile ? raiseHandButton
+                {!_reactionsEnabled || isMobile ? (
+                    <RaiseHandButton
+                        buttonKey = { buttonKey }
+                        handleClick = { handleClick }
+                        notifyMode = { notifyMode } />)
                     : (
                         <ToolboxButtonWithIcon
                             ariaControls = 'reactions-menu-dialog'
                             ariaExpanded = { isOpen }
                             ariaHasPopup = { true }
                             ariaLabel = { t('toolbar.accessibilityLabel.reactionsMenu') }
+                            buttonKey = { buttonKey }
                             icon = { IconArrowUp }
                             iconDisabled = { false }
                             iconId = 'reactions-menu-button'
                             iconTooltip = { t(`toolbar.${isOpen ? 'closeReactionsMenu' : 'openReactionsMenu'}`) }
+                            notifyMode = { notifyMode }
                             onIconClick = { toggleReactionsMenu }>
-                            {raiseHandButton}
+                            <RaiseHandButton
+                                buttonKey = { buttonKey }
+                                handleClick = { handleClick }
+                                notifyMode = { notifyMode } />
                         </ToolboxButtonWithIcon>
                     )}
             </ReactionsMenuPopup>
  * @returns {Object}
  */
 function mapStateToProps(state) {
-    const localParticipant = getLocalParticipant(state);
-
     return {
         _reactionsEnabled: isReactionsEnabled(state),
         isOpen: getReactionsMenuVisibility(state),
         isMobile: isMobileBrowser(),
-        reactionsQueue: getReactionsQueue(state),
-        raisedHand: hasRaisedHand(localParticipant)
+        reactionsQueue: getReactionsQueue(state)
     };
 }
 

react/features/recording/components/LiveStream/AbstractLiveStreamButton.js

      * @returns {void}
      */
     async _handleClick() {
-        const { _isLiveStreamRunning, dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _isLiveStreamRunning, dispatch } = this.props;
 
         const dialogShown = await dispatch(maybeShowPremiumFeatureDialog(FEATURES.RECORDING));
 

react/features/recording/components/Recording/AbstractRecordButton.js

      * @returns {void}
      */
     async _handleClick() {
-        const { _isRecordingRunning, dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _isRecordingRunning, dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent(
             'recording.button',

react/features/screen-share/components/ShareAudioButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         dispatch(startAudioScreenShareFlow());
         dispatch(setOverflowMenuVisible(false));

react/features/security/components/security-dialog/AbstractSecurityDialogButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { _locked, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _locked } = this.props;
 
         sendAnalytics(createToolbarEvent('toggle.security', { enable: !_locked }));
         this._handleClickSecurityButton();

react/features/security/components/security-dialog/web/PasswordSection.js

 
 import { translate } from '../../../../base/i18n';
 import { copyText } from '../../../../base/util';
+import { NOTIFY_CLICK_MODE } from '../../../../toolbox/constants';
 
 import PasswordForm from './PasswordForm';
 
+const KEY = 'add-passcode';
+
 type Props = {
 
+    /**
+     * Toolbar buttons which have their click exposed through the API.
+     */
+     buttonsWithNotifyClick: Array<string | Object>,
+
     /**
      * Whether or not the current user can modify the current password.
      */
     t: Function
 };
 
+declare var APP: Object;
+
 /**
  * Component that handles the password manipulation from the invite dialog.
  *
  * @returns {React$Element<any>}
  */
 function PasswordSection({
+    buttonsWithNotifyClick,
     canEditPassword,
     conference,
     locked,
      * @returns {void}
      */
     function onTogglePasswordEditState() {
-        setPasswordEditEnabled(!passwordEditEnabled);
+        if (typeof APP === 'undefined' || !buttonsWithNotifyClick?.length) {
+            setPasswordEditEnabled(!passwordEditEnabled);
+
+            return;
+        }
+
+        let notifyMode;
+        const notify = buttonsWithNotifyClick.find(
+            (btn: string | Object) =>
+                (typeof btn === 'string' && btn === KEY)
+                || (typeof btn === 'object' && btn.key === KEY)
+        );
+
+        if (notify) {
+            notifyMode = typeof notify === 'string' || notify.preventExecution
+                ? NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY
+                : NOTIFY_CLICK_MODE.ONLY_NOTIFY;
+            APP.API.notifyToolbarButtonClicked(
+                KEY, notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY
+            );
+        }
+
+        if (notifyMode === NOTIFY_CLICK_MODE.ONLY_NOTIFY) {
+            setPasswordEditEnabled(!passwordEditEnabled);
+        }
     }
 
     /**

react/features/security/components/security-dialog/web/SecurityDialog.js

 
 type Props = {
 
+    /**
+     * Toolbar buttons which have their click exposed through the API.
+     */
+     _buttonsWithNotifyClick: Array<string | Object>,
+
     /**
      * Whether or not the current user can modify the current password.
      */
  * @returns {React$Element<any>}
  */
 function SecurityDialog({
+    _buttonsWithNotifyClick,
     _canEditPassword,
     _conference,
     _locked,
             <div className = 'security-dialog'>
                 <LobbySection />
                 <PasswordSection
+                    buttonsWithNotifyClick = { _buttonsWithNotifyClick }
                     canEditPassword = { _canEditPassword }
                     conference = { _conference }
                     locked = { _locked }
         locked,
         password
     } = state['features/base/conference'];
-    const { roomPasswordNumberOfDigits } = state['features/base/config'];
+    const { roomPasswordNumberOfDigits, buttonsWithNotifyClick } = state['features/base/config'];
 
     const showE2ee = Boolean(e2eeSupported) && isLocalParticipantModerator(state);
 
     return {
+        _buttonsWithNotifyClick: buttonsWithNotifyClick,
         _canEditPassword: isLocalParticipantModerator(state),
         _conference: conference,
         _dialIn: state['features/invite'],

react/features/settings/components/web/SettingsButton.js

      * @returns {void}
      */
     _handleClick() {
-        const {
-            defaultTab = SETTINGS_TABS.DEVICES,
-            dispatch,
-            handleClick
-        } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { defaultTab = SETTINGS_TABS.DEVICES, dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('settings'));
         dispatch(openSettingsDialog(defaultTab));

react/features/shared-video/components/web/SharedVideoButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-
         this._doToggleSharedVideo();
     }
 

react/features/speaker-stats/components/web/SpeakerStatsButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('speaker.stats'));
         dispatch(openDialog(SpeakerStats));

react/features/subtitles/components/AbstractClosedCaptionButton.js

      * @returns {void}
      */
     async _handleClick() {
-        const { _requestingSubtitles, dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _requestingSubtitles, dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('transcribing.ccButton',
             {

react/features/toolbox/components/AudioMuteButton.js

 import { translate } from '../../base/i18n';
 import { MEDIA_TYPE } from '../../base/media';
 import { connect } from '../../base/redux';
-import { AbstractAudioMuteButton } from '../../base/toolbox/components';
+import { AbstractAudioMuteButton, AbstractButton } from '../../base/toolbox/components';
 import type { AbstractButtonProps } from '../../base/toolbox/components';
 import { isLocalTrackMuted } from '../../base/tracks';
 import { muteLocal } from '../../video-menu/actions';
                 ACTION_SHORTCUT_TRIGGERED,
                 { enable: !this._isAudioMuted() }));
 
-        super._handleClick();
+        AbstractButton.prototype._onClick.call(this);
     }
 
     /**

react/features/toolbox/components/DownloadButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { _downloadAppsUrl, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _downloadAppsUrl } = this.props;
 
         sendAnalytics(createToolbarEvent('download.pressed'));
         openURLInBrowser(_downloadAppsUrl);

react/features/toolbox/components/HelpButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { _userDocumentationURL, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _userDocumentationURL } = this.props;
 
         sendAnalytics(createToolbarEvent('help.pressed'));
         openURLInBrowser(_userDocumentationURL);

react/features/toolbox/components/MuteEveryoneButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, localParticipantId, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch, localParticipantId } = this.props;
 
         sendAnalytics(createToolbarEvent('mute.everyone.pressed'));
         dispatch(openDialog(MuteEveryoneDialog, {

react/features/toolbox/components/MuteEveryonesVideoButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, localParticipantId, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch, localParticipantId } = this.props;
 
         sendAnalytics(createToolbarEvent('mute.everyone.pressed'));
         dispatch(openDialog(MuteEveryonesVideoDialog, {

react/features/toolbox/components/VideoMuteButton.js

     setVideoMuted
 } from '../../base/media';
 import { connect } from '../../base/redux';
-import { AbstractVideoMuteButton } from '../../base/toolbox/components';
+import { AbstractButton, AbstractVideoMuteButton } from '../../base/toolbox/components';
 import type { AbstractButtonProps } from '../../base/toolbox/components';
 import { getLocalVideoType, isLocalCameraTrackMuted } from '../../base/tracks';
 import { isVideoMuteButtonDisabled } from '../functions';
                 ACTION_SHORTCUT_TRIGGERED,
                 { enable: !this._isVideoMuted() }));
 
-        super._handleClick();
+        AbstractButton.prototype._onClick.call(this);
     }
 
     /**

react/features/toolbox/components/web/AudioSettingsButton.js

 
 type Props = {
 
+    /**
+     * The button's key.
+     */
+     buttonKey?: string,
+
     /**
      * External handler for click action.
      */
      */
     isDisabled: boolean,
 
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string,
+
     /**
      * Used for translation.
      */
      * @returns {void}
      */
     _onClick() {
-        const { handleClick, onAudioOptionsClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { onAudioOptionsClick } = this.props;
 
         onAudioOptionsClick();
     }
      * @inheritdoc
      */
     render() {
-        const { handleClick, hasPermissions, isDisabled, visible, isOpen, t } = this.props;
+        const { hasPermissions, isDisabled, visible, isOpen, buttonKey, notifyMode, t } = this.props;
         const settingsDisabled = !hasPermissions
             || isDisabled
             || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
                     ariaExpanded = { isOpen }
                     ariaHasPopup = { true }
                     ariaLabel = { t('toolbar.audioSettings') }
+                    buttonKey = { buttonKey }
                     icon = { IconArrowUp }
                     iconDisabled = { settingsDisabled }
                     iconId = 'audio-settings-button'
                     iconTooltip = { t('toolbar.audioSettings') }
+                    notifyMode = { notifyMode }
                     onIconClick = { this._onClick }
                     onIconKeyDown = { this._onEscClick }>
-                    <AudioMuteButton handleClick = { handleClick } />
+                    <AudioMuteButton
+                        buttonKey = { buttonKey }
+                        notifyMode = { notifyMode } />
                 </ToolboxButtonWithIcon>
             </AudioSettingsPopup>
-        ) : <AudioMuteButton handleClick = { handleClick } />;
+        ) : <AudioMuteButton
+            buttonKey = { buttonKey }
+            notifyMode = { notifyMode } />;
     }
 }
 

react/features/toolbox/components/web/FullscreenButton.js

         // Unused.
     }
 
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @protected
-     * @returns {void}
-     */
-    _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-    }
-
     /**
      * Indicates whether this button is in toggled state or not.
      *

react/features/toolbox/components/web/OverflowMenuButton.js

 
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
 import { translate } from '../../../base/i18n';
-import { IconHorizontalPoints } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
 import { type ReactionEmojiProps } from '../../../reactions/constants';
 
 import Drawer from './Drawer';
 import JitsiPortal from './JitsiPortal';
-import ToolbarButton from './ToolbarButton';
+import OverflowToggleButton from './OverflowToggleButton';
 
 /**
  * The type of the React {@code Component} props of {@link OverflowMenuButton}.
 
         // Bind event handlers so they are only bound once per instance.
         this._onCloseDialog = this._onCloseDialog.bind(this);
-        this._onToggleDialogVisibility
-            = this._onToggleDialogVisibility.bind(this);
+        this._toggleDialogVisibility
+            = this._toggleDialogVisibility.bind(this);
         this._onEscClick = this._onEscClick.bind(this);
     }
 
                 {
                     overflowDrawer ? (
                         <>
-                            {this._renderToolbarButton()}
+                            <OverflowToggleButton
+                                handleClick = { this._toggleDialogVisibility }
+                                isOpen = { isOpen }
+                                onKeyDown = { this._onEscClick } />
                             <JitsiPortal>
                                 <Drawer
                                     isOpen = { isOpen }
                             isOpen = { isOpen }
                             onClose = { this._onCloseDialog }
                             placement = 'top-end'>
-                            {this._renderToolbarButton()}
+                            <OverflowToggleButton
+                                handleClick = { this._toggleDialogVisibility }
+                                isOpen = { isOpen }
+                                onKeyDown = { this._onEscClick } />
                         </InlineDialog>
                     )
                 }
         );
     }
 
-    _renderToolbarButton: () => React$Node;
-
-    /**
-     * Renders the actual toolbar overflow menu button.
-     *
-     * @returns {ReactElement}
-     */
-    _renderToolbarButton() {
-        const { ariaControls, isOpen, t } = this.props;
-
-        return (
-            <ToolbarButton
-                accessibilityLabel =
-                    { t('toolbar.accessibilityLabel.moreActions') }
-                aria-controls = { ariaControls }
-                aria-haspopup = 'true'
-                icon = { IconHorizontalPoints }
-                onClick = { this._onToggleDialogVisibility }
-                onKeyDown = { this._onEscClick }
-                toggled = { isOpen }
-                tooltip = { t('toolbar.moreActions') } />
-        );
-    }
-
     _onCloseDialog: () => void;
 
     /**
         this.props.onVisibilityChange(false);
     }
 
-    _onToggleDialogVisibility: () => void;
+    _toggleDialogVisibility: () => void;
 
     /**
      * Callback invoked to signal that an event has occurred that should change
      * @private
      * @returns {void}
      */
-    _onToggleDialogVisibility() {
+    _toggleDialogVisibility() {
         sendAnalytics(createToolbarEvent('overflow'));
 
         this.props.onVisibilityChange(!this.props.isOpen);

react/features/toolbox/components/web/OverflowToggleButton.js

+// @flow
+
+import { translate } from '../../../base/i18n';
+import { IconHorizontalPoints } from '../../../base/icons';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+
+
+/**
+ * The type of the React {@code Component} props of {@link OverflowToggleButton}.
+ */
+type Props = AbstractButtonProps & {
+
+    /**
+     * Whether the more options menu is open.
+     */
+    isOpen: boolean,
+
+    /**
+     * External handler for key down action.
+     */
+     onKeyDown: Function,
+};
+
+/**
+ * Implementation of a button for toggleing the overflow menu.
+ */
+class OverflowToggleButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.moreActions';
+    icon = IconHorizontalPoints;
+    label = 'toolbar.moreActions';
+    toggledLabel = 'toolbar.moreActions';
+
+    /**
+     * Retrieves tooltip dynamically.
+     */
+    get tooltip() {
+        return 'toolbar.moreActions';
+    }
+
+    /**
+     * Required by linter due to AbstractButton overwritten prop being writable.
+     *
+     * @param {string} _value - The value.
+     */
+    set tooltip(_value) {
+        // Unused.
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        return this.props.isOpen;
+    }
+
+    /**
+     * Indicates whether a key was pressed.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _onKeyDown() {
+        this.props.onKeyDown();
+    }
+}
+
+
+export default translate(OverflowToggleButton);

react/features/toolbox/components/web/ProfileButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, _unclickable, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch, _unclickable } = this.props;
 
         if (!_unclickable) {
             sendAnalytics(createToolbarEvent('profile'));

react/features/toolbox/components/web/ShareDesktopButton.js

         // Unused.
     }
 
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @protected
-     * @returns {void}
-     */
-    _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-    }
-
     /**
      * Indicates whether this button is in toggled state or not.
      *

react/features/toolbox/components/web/ToggleCameraButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         dispatch(toggleCamera());
     }

react/features/toolbox/components/web/ToolbarButton.js

-/* @flow */
-
-import React from 'react';
-
-import { Icon } from '../../../base/icons';
-import { Tooltip } from '../../../base/tooltip';
-import AbstractToolbarButton from '../AbstractToolbarButton';
-import type { Props as AbstractToolbarButtonProps }
-    from '../AbstractToolbarButton';
-
-/**
- * The type of the React {@code Component} props of {@link ToolbarButton}.
- */
-export type Props = AbstractToolbarButtonProps & {
-
-    /**
-     * The text to display in the tooltip.
-     */
-    tooltip: string,
-
-    /**
-     * From which direction the tooltip should appear, relative to the
-     * button.
-     */
-    tooltipPosition: string,
-
-    /**
-     * KeyDown handler.
-     */
-    onKeyDown?: Function
-};
-
-/**
- * Represents a button in the toolbar.
- *
- * @augments AbstractToolbarButton
- */
-class ToolbarButton extends AbstractToolbarButton<Props> {
-    /**
-     * Default values for {@code ToolbarButton} component's properties.
-     *
-     * @static
-     */
-    static defaultProps = {
-        tooltipPosition: 'top'
-    };
-
-    /**
-     * Initializes a new {@code ToolbarButton} instance.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this._onKeyPress = this._onKeyPress.bind(this);
-        this._onClick = this._onClick.bind(this);
-    }
-
-    _onKeyPress: (Object) => void;
-
-    /**
-     * Handles 'Enter' and Space key on the button to trigger onClick for accessibility.
-     *
-     * @param {Object} event - The key event.
-     * @private
-     * @returns {void}
-     */
-    _onKeyPress(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.props.onClick();
-        }
-    }
-    _onClick: (Object) => void;
-
-    /**
-     * Handles button click.
-     *
-     * @param {Object} e - The key event.
-     * @private
-     * @returns {void}
-     */
-    _onClick(e) {
-        this.props.onClick(e);
-
-        // blur after click to release focus from button to allow PTT.
-        e && e.currentTarget && e.currentTarget.blur();
-    }
-
-    /**
-     * Renders the button of this {@code ToolbarButton}.
-     *
-     * @param {Object} children - The children, if any, to be rendered inside
-     * the button. Presumably, contains the icon of this {@code ToolbarButton}.
-     * @protected
-     * @returns {ReactElement} The button of this {@code ToolbarButton}.
-     */
-    _renderButton(children) {
-        return (
-            <div
-                aria-label = { this.props.accessibilityLabel }
-                aria-pressed = { this.props.toggled }
-                className = 'toolbox-button'
-                onClick = { this._onClick }
-                onKeyDown = { this.props.onKeyDown }
-                onKeyPress = { this._onKeyPress }
-                role = 'button'
-                tabIndex = { 0 }>
-                { this.props.tooltip
-                    ? <Tooltip
-                        content = { this.props.tooltip }
-                        position = { this.props.tooltipPosition }>
-                        { children }
-                    </Tooltip>
-                    : children }
-            </div>
-        );
-    }
-
-    /**
-     * Renders the icon of this {@code ToolbarButton}.
-     *
-     * @inheritdoc
-     */
-    _renderIcon() {
-        return (
-            <div className = { `toolbox-icon ${this.props.toggled ? 'toggled' : ''}` }>
-                <Icon src = { this.props.icon } />
-            </div>
-        );
-    }
-}
-
-export default ToolbarButton;

react/features/toolbox/components/web/Toolbox.js

     setToolbarHovered,
     showToolbox
 } from '../../actions';
-import { THRESHOLDS, NOT_APPLICABLE, DRAWER_MAX_HEIGHT } from '../../constants';
+import { THRESHOLDS, NOT_APPLICABLE, DRAWER_MAX_HEIGHT, NOTIFY_CLICK_MODE } from '../../constants';
 import { isToolboxVisible } from '../../functions';
 import DownloadButton from '../DownloadButton';
 import HangupButton from '../HangupButton';
     /**
      * Toolbar buttons which have their click exposed through the API.
      */
-    _buttonsWithNotifyClick: Array<string>,
+    _buttonsWithNotifyClick: Array<string | Object>,
 
     /**
      * Whether or not the chat feature is currently displayed.
     }
 
     /**
-     * Overwrites click handlers for buttons in case click is exposed through the iframe API.
+     * Sets the notify click mode for the buttons.
      *
      * @param {Object} buttons - The list of toolbar buttons.
      * @returns {void}
      */
-    _overwriteButtonsClickHandlers(buttons) {
+    _setButtonsNotifyClickMode(buttons) {
         if (typeof APP === 'undefined' || !this.props._buttonsWithNotifyClick?.length) {
             return;
         }
 
         Object.values(buttons).forEach((button: any) => {
-            if (
-                typeof button === 'object'
-                && this.props._buttonsWithNotifyClick.includes(button.key)
-            ) {
-                button.handleClick = () => APP.API.notifyToolbarButtonClicked(button.key);
+            if (typeof button === 'object') {
+                const notify = this.props._buttonsWithNotifyClick.find(
+                    (btn: string | Object) =>
+                        (typeof btn === 'string' && btn === button.key)
+                        || (typeof btn === 'object' && btn.key === button.key)
+                );
+
+                if (notify) {
+                    const notifyMode = typeof notify === 'string' || notify.preventExecution
+                        ? NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY
+                        : NOTIFY_CLICK_MODE.ONLY_NOTIFY;
+
+                    button.notifyMode = notifyMode;
+                }
             }
         });
     }
 
         const buttons = this._getAllButtons();
 
-        this._overwriteButtonsClickHandlers(buttons);
+        this._setButtonsNotifyClickMode(buttons);
         const isHangupVisible = isToolbarButtonEnabled('hangup', _toolbarButtons);
         const { order } = THRESHOLDS.find(({ width }) => _clientWidth > width)
             || THRESHOLDS[THRESHOLDS.length - 1];
                         {mainMenuButtons.map(({ Content, key, ...rest }) => Content !== Separator && (
                             <Content
                                 { ...rest }
+                                buttonKey = { key }
                                 key = { key } />))}
 
                         {Boolean(overflowMenuButtons.length) && (
                                                 {showSeparator && <Separator key = { `hr${group}` } />}
                                                 <Content
                                                     { ...rest }
+                                                    buttonKey = { key }
                                                     key = { key }
                                                     showLabel = { true } />
                                             </Fragment>

react/features/toolbox/components/web/VideoSettingsButton.js

 
 type Props = {
 
+    /**
+     * The button's key.
+     */
+     buttonKey?: string,
+
     /**
      * External handler for click action.
      */
      */
     isDisabled: boolean,
 
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string,
+
     /**
      * Flag controlling the visibility of the button.
      * VideoSettings popup is currently disabled on mobile browsers
      * @returns {void}
      */
     _onClick() {
-        const { handleClick, onVideoOptionsClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { onVideoOptionsClick } = this.props;
 
         onVideoOptionsClick();
     }
      * @inheritdoc
      */
     render() {
-        const { handleClick, t, visible, isOpen } = this.props;
+        const { t, visible, isOpen, buttonKey, notifyMode } = this.props;
 
         return visible ? (
             <VideoSettingsPopup>
                     ariaExpanded = { isOpen }
                     ariaHasPopup = { true }
                     ariaLabel = { this.props.t('toolbar.videoSettings') }
+                    buttonKey = { buttonKey }
                     icon = { IconArrowUp }
                     iconDisabled = { this._isIconDisabled() }
                     iconId = 'video-settings-button'
                     iconTooltip = { t('toolbar.videoSettings') }
+                    notifyMode = { notifyMode }
                     onIconClick = { this._onClick }
                     onIconKeyDown = { this._onEscClick }>
-                    <VideoMuteButton handleClick = { handleClick } />
+                    <VideoMuteButton
+                        buttonKey = { buttonKey }
+                        notifyMode = { notifyMode } />
                 </ToolboxButtonWithIcon>
             </VideoSettingsPopup>
-        ) : <VideoMuteButton handleClick = { handleClick } />;
+        ) : <VideoMuteButton
+            buttonKey = { buttonKey }
+            notifyMode = { notifyMode } />;
     }
 }
 

react/features/toolbox/components/web/index.js

 export { default as AudioSettingsButton } from './AudioSettingsButton';
 export { default as VideoSettingsButton } from './VideoSettingsButton';
-export { default as ToolbarButton } from './ToolbarButton';
 export { default as Toolbox } from './Toolbox';
 export { default as Drawer } from './Drawer';
 export { default as JitsiPortal } from './JitsiPortal';

react/features/toolbox/constants.js

 export const TOOLBAR_TIMEOUT = 4000;
 
 export const DRAWER_MAX_HEIGHT = '80vh - 64px';
+
+export const NOTIFY_CLICK_MODE = {
+    ONLY_NOTIFY: 'ONLY_NOTIFY',
+    PREVENT_AND_NOTIFY: 'PREVENT_AND_NOTIFY'
+};

react/features/video-layout/components/TileViewButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { _tileViewEnabled, dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { _tileViewEnabled, dispatch } = this.props;
 
         const value = !_tileViewEnabled;
 

react/features/video-quality/components/VideoQualityButton.web.js

     label = 'videoStatus.performanceSettings';
     tooltip = 'videoStatus.performanceSettings';
     icon = IconGauge;
-
-
-    /**
-     * Handles clicking / pressing the button.
-     *
-     * @override
-     * @protected
-     * @returns {void}
-     */
-    _handleClick() {
-        const { handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
-    }
 }
 
 export default translate(VideoQualityButton);

react/features/virtual-background/components/VideoBackgroundButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, handleClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { dispatch } = this.props;
 
         dispatch(openDialog(VirtualBackgroundDialog));
     }