Ref fixes

app/renderer/components/bookmarks/bookmarksToolbar.js

@@ -29,7 +29,7 @@ const contextMenus = require('../../../../js/contextMenus')
 const cx = require('../../../../js/lib/classSet')
 const dnd = require('../../../../js/dnd')
 const dndData = require('../../../../js/dndData')
-const calculateTextWidth = require('../../../../js/lib/textCalculator').calculateTextWidth
+const {calculateTextWidth} = require('../../../../js/lib/textCalculator')
 const {iconSize} = require('../../../common/state/tabContentState')
 
 // Styles

app/renderer/components/tabs/content/audioTabIcon.js

@@ -23,15 +23,15 @@ const globalStyles = require('../../styles/global')
 const tabStyles = require('../../styles/tab')
 
 class AudioTabIcon extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.toggleMute = this.toggleMute.bind(this)
   }
 
   get audioIcon () {
-    const isMuted = this.props.pageCanPlayAudio && !this.props.audioMuted
+    const isNotMuted = this.props.pageCanPlayAudio && !this.props.audioMuted
 
-    return isMuted
+    return isNotMuted
       ? globalStyles.appIcons.volumeOn
       : globalStyles.appIcons.volumeOff
   }
@@ -46,8 +46,6 @@ class AudioTabIcon extends React.Component {
     const frame = frameStateUtil.getFrameByKey(currentWindow, ownProps.frameKey)
 
     const props = {}
-    // used in renderer
-
     // used in other functions
     props.frameKey = ownProps.frameKey
     props.pageCanPlayAudio = !!frame.get('audioPlaybackActive')

app/renderer/components/tabs/content/closeTabIcon.js

@@ -28,10 +28,11 @@ const closeTabHoverSvg = require('../../../../extensions/brave/img/tabs/close_bt
 const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn_normal.svg')
 
 class CloseTabIcon extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.onClick = this.onClick.bind(this)
   }
+
   get frame () {
     return windowStore.getFrame(this.props.frameKey)
   }
@@ -64,6 +65,7 @@ class CloseTabIcon extends React.Component {
     props.frameKey = ownProps.frameKey
     props.fixTabWidth = ownProps.fixTabWidth
     props.tabId = frame.get('tabId')
+
     return props
   }
 

app/renderer/components/tabs/content/newSessionIcon.js

@@ -38,7 +38,6 @@ class NewSessionIcon extends React.Component {
     props.partitionIndicator = props.partitionNumber > tabs.maxAllowedNewSessions
       ? tabs.maxAllowedNewSessions
       : props.partitionNumber
-    props.partition = partition
 
     // used in funtions
     props.frameKey = ownProps.frameKey

app/renderer/components/tabs/content/tabTitle.js

@@ -24,7 +24,7 @@ class TabTitle extends React.Component {
 
     const props = {}
     // used in renderer
-    props.enforceFontVisibilty = isDarwin() && tabIconColor === 'white'
+    props.enforceFontVisibility = isDarwin() && tabIconColor === 'white'
     props.tabIconColor = tabIconColor
     props.displayTitle = tabContentState.getDisplayTitle(currentWindow, ownProps.frameKey)
 
@@ -46,7 +46,7 @@ class TabTitle extends React.Component {
       className={css(
         styles.tabTitle,
         titleStyles.gradientText,
-        this.props.enforceFontVisibilty && styles.enforceFontVisibilty,
+        this.props.enforceFontVisibility && styles.enforceFontVisibility,
         // Windows specific style
         isWindows() && styles.tabTitleForWindows
       )}>
@@ -72,7 +72,7 @@ const styles = StyleSheet.create({
     WebkitBackgroundClip: 'text'
   },
 
-  enforceFontVisibilty: {
+  enforceFontVisibility: {
     fontWeight: '600'
   },
 

app/renderer/components/tabs/pinnedTabs.js

@@ -13,6 +13,9 @@ const Tab = require('./tab')
 const appActions = require('../../../../js/actions/appActions')
 const windowActions = require('../../../../js/actions/windowActions')
 
+// Store
+const windowStore = require('../../../../js/stores/windowStore')
+
 // Constants
 const siteTags = require('../../../../js/constants/siteTags')
 const dragTypes = require('../../../../js/constants/dragTypes')
@@ -25,12 +28,16 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 const {isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil')
 
 class PinnedTabs extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.onDragOver = this.onDragOver.bind(this)
     this.onDrop = this.onDrop.bind(this)
   }
 
+  dropFrame (frameKey) {
+    return windowStore.getFrame(frameKey)
+  }
+
   onDrop (e) {
     const clientX = e.clientX
     const sourceDragData = dndData.getDragData(e.dataTransfer, dragTypes.TAB)
@@ -46,12 +53,13 @@ class PinnedTabs extends React.Component {
       let droppedOnTab = dnd.closestFromXOffset(this.tabRefs.filter((node) => node && node.props.frameKey !== key), clientX).selectedRef
       if (droppedOnTab) {
         const isLeftSide = dnd.isLeftSide(ReactDOM.findDOMNode(droppedOnTab), clientX)
-        windowActions.moveTab(key, droppedOnTab.props.frame.get('key'), isLeftSide)
+        windowActions.moveTab(key, droppedOnTab.props.frameKey, isLeftSide)
         if (!sourceDragData.get('pinnedLocation')) {
           appActions.tabPinned(sourceDragData.get('tabId'), true)
         } else {
           const sourceDetails = siteUtil.getDetailFromFrame(sourceDragData, siteTags.PINNED)
-          const destinationDetails = siteUtil.getDetailFromFrame(droppedOnTab.props.frame, siteTags.PINNED)
+          const droppedOnFrame = this.dropFrame(droppedOnTab.props.frameKey)
+          const destinationDetails = siteUtil.getDetailFromFrame(droppedOnFrame, siteTags.PINNED)
           appActions.moveSite(siteUtil.getSiteKey(sourceDetails),
             siteUtil.getSiteKey(destinationDetails),
             isLeftSide)

app/renderer/components/tabs/tab.js

@@ -48,8 +48,8 @@ const UrlUtil = require('../../../../js/lib/urlutil')
 const {hasBreakpoint} = require('../../lib/tabUtil')
 
 class Tab extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.onMouseEnter = this.onMouseEnter.bind(this)
     this.onMouseLeave = this.onMouseLeave.bind(this)
     this.onUpdateTabSize = this.onUpdateTabSize.bind(this)
@@ -129,11 +129,6 @@ class Tab extends React.Component {
     dnd.onDragOver(dragTypes.TAB, this.tabNode.getBoundingClientRect(), this.props.frameKey, this.draggingOverData, e)
   }
 
-  setActiveFrame (event) {
-    event.stopPropagation()
-    windowActions.setActiveFrame(this.frame)
-  }
-
   onMouseLeave () {
     if (this.props.previewTabs) {
       window.clearTimeout(this.hoverTimeout)
@@ -252,12 +247,10 @@ class Tab extends React.Component {
     props.breakpoint = frame.get('breakpoint')
     props.notificationBarActive = notificationBarActive
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, props.frameKey)
-    props.paintTabs = getSetting(settings.PAINT_TABS)
     props.tabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.isPinnedTab = frameStateUtil.isPinned(currentWindow, props.frameKey)
     props.canPlayAudio = tabContentState.canPlayAudio(currentWindow, props.frameKey)
     props.themeColor = tabContentState.getThemeColor(currentWindow, props.frameKey)
-    props.isTabLoading = tabContentState.isTabLoading(currentWindow, props.frameKey)
     props.isNarrowView = tabContentState.isNarrowView(currentWindow, props.frameKey)
     props.isNarrowestView = tabContentState.isNarrowestView(currentWindow, props.frameKey)
     props.isPlayIndicatorBreakpoint = tabContentState.isMediumView(currentWindow, props.frameKey) || props.isNarrowView

app/renderer/components/tabs/tabs.js

@@ -4,6 +4,7 @@
 
 const React = require('react')
 const ReactDOM = require('react-dom')
+const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
@@ -32,8 +33,8 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 const {getSetting} = require('../../../../js/settings')
 
 class Tabs extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.onDragOver = this.onDragOver.bind(this)
     this.onDrop = this.onDrop.bind(this)
     this.onPrevPage = this.onPrevPage.bind(this)
@@ -43,7 +44,7 @@ class Tabs extends React.Component {
   }
 
   onMouseLeave () {
-    if (this.props.fixTabWidth) {
+    if (this.props.fixTabWidth == null) {
       return
     }
 
@@ -75,7 +76,7 @@ class Tabs extends React.Component {
     if (sourceDragData) {
       // If this is a different window ID than where the drag started, then
       // the tear off will be done by tab.js
-      if (this.props.dragData.get('windowId') !== getCurrentWindowId()) {
+      if (this.props.dragWindowId !== getCurrentWindowId()) {
         return
       }
 
@@ -87,7 +88,7 @@ class Tabs extends React.Component {
         if (droppedOnTab) {
           const isLeftSide = dnd.isLeftSide(ReactDOM.findDOMNode(droppedOnTab), clientX)
 
-          windowActions.moveTab(key, droppedOnTab.props.frame.get('key'), isLeftSide)
+          windowActions.moveTab(key, droppedOnTab.props.frameKey, isLeftSide)
           if (sourceDragData.get('pinnedLocation')) {
             appActions.tabPinned(sourceDragData.get('tabId'), false)
           }
@@ -136,10 +137,10 @@ class Tabs extends React.Component {
       .map((tab) => tab.get('key'))
     const totalPages = Math.ceil(unpinnedTabs.size / tabsPerTabPage)
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow)
+    const dragData = (state.getIn(['dragData', 'type']) === dragTypes.TAB && state.get('dragData')) || Immutable.Map()
 
     const props = {}
     // used in renderer
-    props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.previewTabPageIndex = currentWindow.getIn(['ui', 'tabs', 'previewTabPageIndex'])
     props.currentTabs = currentTabs
     props.partOfFullPageSet = currentTabs.size === tabsPerTabPage
@@ -148,8 +149,9 @@ class Tabs extends React.Component {
     props.shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(state, currentWindow, activeFrame, isFocused())
 
     // used in other functions
+    props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.tabPageIndex = currentWindow.getIn(['ui', 'tabs', 'tabPageIndex'])
-    props.dragData = state.getIn(['dragData', 'type']) === dragTypes.TAB && state.get('dragData')
+    props.dragWindowId = dragData.get('windowId')
     props.totalPages = totalPages
 
     return props

app/renderer/components/tabs/tabsToolbar.js

@@ -9,17 +9,24 @@ const ReduxComponent = require('../reduxComponent')
 const Tabs = require('./tabs')
 const PinnedTabs = require('./pinnedTabs')
 
+// Store
+const windowStore = require('../../../../js/stores/windowStore')
+
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 class TabsToolbar extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.onContextMenu = this.onContextMenu.bind(this)
     this.onHamburgerMenu = this.onHamburgerMenu.bind(this)
   }
 
+  get activeFrame () {
+    return windowStore.getFrame(this.props.activeFrameKey)
+  }
+
   onContextMenu (e) {
     if (e.target.tagName === 'BUTTON') {
       return
@@ -42,7 +49,7 @@ class TabsToolbar extends React.Component {
     props.hasPinnedTabs = pinnedTabs.size > 0
 
     // used in other functions
-    props.activeFrame = activeFrame
+    props.activeFrameKey = activeFrame && activeFrame.get('key')
     props.activeFrameLocation = (activeFrame && activeFrame.get('location')) || ''
 
     return props

app/renderer/lib/tabUtil.js

@@ -28,7 +28,7 @@ module.exports.tabUpdateFrameRate = 66
 
 /**
  * Check whether or not current breakpoint match defined criteria
- * @param {Object} breakpoint - Brake point value
+ * @param {Object} breakpoint - Break point value
  * @param {Array} arr - Array of Strings including breakpoint names to check against
  * @returns {Boolean} Whether or not the sizing criteria was match
  */

app/renderer/reducers/frameReducer.js

@@ -8,23 +8,15 @@ const Immutable = require('immutable')
 
 // Constants
 const appConstants = require('../../../js/constants/appConstants')
-const windowActions = require('../../../js/actions/windowActions')
 const windowConstants = require('../../../js/constants/windowConstants')
-const settings = require('../../../js/constants/settings')
 const config = require('../../../js/constants/config')
 
 // Actions
 const appActions = require('../../../js/actions/appActions')
-
-const config = require('../../../js/constants/config')
-const {updateTabPageIndex} = require('../lib/tabUtil')
-const {getCurrentWindowId} = require('../currentWindow')
-
 const windowActions = require('../../../js/actions/windowActions')
 
 // Utils
 const frameStateUtil = require('../../../js/state/frameStateUtil')
-const {getSetting} = require('../../../js/settings')
 const {getCurrentWindowId} = require('../currentWindow')
 
 const setFullScreen = (state, action) => {

js/state/frameStateUtil.js

@@ -7,7 +7,6 @@ const Immutable = require('immutable')
 // Constants
 const config = require('../constants/config')
 const settings = require('../constants/settings')
-const {tabCloseAction} = require('../../app/common/constants/settingsEnums')
 
 // Actions
 const windowActions = require('../actions/windowActions')

test/unit/state/frameStateUtilTest.js

@@ -1,9 +1,7 @@
 /* global describe, before, it, beforeEach, after */
-const frameStateUtil = require('../../../js/state/frameStateUtil')
 const Immutable = require('immutable')
 const mockery = require('mockery')
 const assert = require('assert')
-const {tabCloseAction} = require('../../../app/common/constants/settingsEnums')
 const fakeElectron = require('../lib/fakeElectron')
 
 require('../braveUnit')