Merge pull request #655 from yuya-oc/fix-permission-dialog-lag

Fix permission dialog lag

src/browser/components/PermissionRequestDialog.jsx

@@ -79,8 +79,8 @@ function PermissionRequestDialog(props) {
 }
 
 PermissionRequestDialog.propTypes = {
-  origin: PropTypes.string.isRequired,
+  origin: PropTypes.string,
-  permission: PropTypes.oneOf(['media', 'geolocation', 'notifications', 'midiSysex', 'pointerLock', 'fullscreen', 'openExternal']).isRequired,
+  permission: PropTypes.oneOf(['media', 'geolocation', 'notifications', 'midiSysex', 'pointerLock', 'fullscreen', 'openExternal']),
   onClickAllow: PropTypes.func,
   onClickBlock: PropTypes.func,
   onClickClose: PropTypes.func

src/browser/components/TabBar.jsx

@@ -31,24 +31,24 @@ class TabBar extends React.Component { // need "this"
           </div>);
       }
       const id = 'teamTabItem' + index;
-      const permissionOverlay = this.props.requestingPermission[index] ? (
+      const requestingPermission = this.props.requestingPermission[index];
+      const permissionOverlay = (
         <Overlay
           className='TabBar-permissionOverlay'
           placement='bottom'
-          show={this.props.activeKey === index}
+          show={requestingPermission && this.props.activeKey === index}
-          target={() => findDOMNode(this.refs[id])}
+          target={() => this.refs[id]}
         >
           <PermissionRequestDialog
             id={`${id}-permissionDialog`}
-            origin={this.props.requestingPermission[index].origin}
+            origin={requestingPermission ? requestingPermission.origin : null}
-            permission={this.props.requestingPermission[index].permission}
+            permission={requestingPermission ? requestingPermission.permission : null}
             onClickAllow={this.props.onClickPermissionDialog.bind(null, index, 'allow')}
             onClickBlock={this.props.onClickPermissionDialog.bind(null, index, 'block')}
             onClickClose={this.props.onClickPermissionDialog.bind(null, index, 'close')}
           />
         </Overlay>
-      ) : null;
+      );
-      if (unreadCount === 0) {
       return (
         <NavItem
           className='teamTabItem'
@@ -57,23 +57,11 @@ class TabBar extends React.Component { // need "this"
           eventKey={index}
           ref={id}
         >
-            { team.name }
+          <span className={unreadCount === 0 ? '' : 'teamTabItem-label'}>{team.name}</span>
           { ' ' }
           { badgeDiv }
           {permissionOverlay}
         </NavItem>);
-      }
-      return (
-        <NavItem
-          className='teamTabItem'
-          key={id}
-          id={id}
-          eventKey={index}
-        >
-          <b>{ team.name }</b>
-          { ' ' }
-          { badgeDiv }
-        </NavItem>);
     });
     if (this.props.showAddServerButton === true) {
       tabs.push(

src/browser/css/components/TabBar.css

@@ -37,3 +37,7 @@
   margin-top: 5px;
   border-radius: 50%;
 }
+
+.TabBar .teamTabItem-label {
+  font-weight: bold;
+}