Add a button to 'pop out' widgets in to their own tab.

src/components/views/elements/AppTile.js

@@ -54,6 +54,7 @@ export default class AppTile extends React.Component {
         this._onInitialLoad = this._onInitialLoad.bind(this);
         this._grantWidgetPermission = this._grantWidgetPermission.bind(this);
         this._revokeWidgetPermission = this._revokeWidgetPermission.bind(this);
+        this._onPopoutWidgetClick = this._onPopoutWidgetClick.bind(this);
     }
 
     /**
@@ -499,6 +500,13 @@ export default class AppTile extends React.Component {
         }
     }
 
+    _onPopoutWidgetClick(e) {
+        // Using Object.assign workaround as the following opens in a new window instead of a new tab.
+        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes,noreferrer=yes');
+        Object.assign(document.createElement('a'),
+            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener noreferrer'}).click();
+    }
+
     render() {
         let appTileBody;
 
@@ -581,6 +589,7 @@ export default class AppTile extends React.Component {
         // Picture snapshot - only show button when apps are maximised.
         const showPictureSnapshotButton = this._hasCapability('screenshot') && this.props.show;
         const showPictureSnapshotIcon = 'img/camera_green.svg';
+        const popoutWidgetIcon = 'img/button-new-window.svg';
         const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
 
         return (
@@ -599,15 +608,25 @@ export default class AppTile extends React.Component {
                         { this.props.showTitle && this._getTileTitle() }
                     </span>
                     <span className="mx_AppTileMenuBarWidgets">
-                      { /* Snapshot widget */ }
-                      { showPictureSnapshotButton && <TintableSvgButton
-                          src={showPictureSnapshotIcon}
-                          className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
-                          title={_t('Picture')}
-                          onClick={this._onSnapshotClick}
-                          width="10"
-                          height="10"
-                      /> }
+                        { /* Popout widget */ }
+                        <TintableSvgButton
+                            src={popoutWidgetIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Popout widget')}
+                            onClick={this._onPopoutWidgetClick}
+                            width="10"
+                            height="10"
+                        />
+
+                        { /* Snapshot widget */ }
+                        { showPictureSnapshotButton && <TintableSvgButton
+                            src={showPictureSnapshotIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Picture')}
+                            onClick={this._onSnapshotClick}
+                            width="10"
+                            height="10"
+                        /> }
 
                         { /* Edit widget */ }
                         { showEditButton && <TintableSvgButton

src/components/views/elements/TintableSvgButton.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import TintableSvg from './TintableSvg';
+import AccessibleButton from './AccessibleButton';
 
 export default class TintableSvgButton extends React.Component {
 
@@ -39,9 +40,11 @@ export default class TintableSvgButton extends React.Component {
                     width={this.props.width}
                     height={this.props.height}
                 ></TintableSvg>
-                <span
+                <AccessibleButton
+                    onClick={this.props.onClick}
+                    element='span'
                     title={this.props.title}
-                    onClick={this.props.onClick} />
+                />
             </span>
         );
     }

src/i18n/strings/en_EN.json

@@ -100,6 +100,7 @@
     "You need to be logged in.": "You need to be logged in.",
     "You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
     "Unable to create widget.": "Unable to create widget.",
+    "Popout widget": "Popout widget",
     "Missing roomId.": "Missing roomId.",
     "Failed to send request.": "Failed to send request.",
     "This room is not recognised.": "This room is not recognised.",