Converts FindBar into redux component

Resolves brave#9338 Auditors: @bsclifton @bridiver Test Plan:
NejcZdovc · Jun 13, 2017 · 3047925 · 3047925
1 parent 7ce06ee
commit 3047925
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 125 deletions.
diff --git a/app/renderer/components/main/findbar.js b/app/renderer/components/main/findbar.js
@@ -6,28 +6,30 @@ const React = require('react')
 const Immutable = require('immutable')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 
 // Constants
 const keyCodes = require('../../../common/constants/keyCodes')
+const settings = require('../../../../js/constants/settings')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
-
-// Stores
-const windowStore = require('../../../../js/stores/windowStore')
+const webviewActions = require('../../../../js/actions/webviewActions')
 
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 const {getTextColorForBackground} = require('../../../../js/lib/color')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const {getSetting} = require('../../../../js/settings')
 
+// Styles
 const globalStyles = require('../styles/global')
 
-class FindBar extends ImmutableComponent {
- constructor () {
- super()
+class FindBar extends React.Component {
+ constructor (props) {
+ super(props)
  this.onBlur = this.onBlur.bind(this)
  this.onInputFocus = this.onInputFocus.bind(this)
  this.onClear = this.onClear.bind(this)
@@ -37,46 +39,40 @@ class FindBar extends ImmutableComponent {
  this.onFindPrev = this.onFindPrev.bind(this)
  this.onFindNext = this.onFindNext.bind(this)
  this.onCaseSensitivityChange = this.onCaseSensitivityChange.bind(this)
- this.didFrameChange = true
- }
-
- get frame () {
- return windowStore.getFrame(this.props.frameKey)
  }
 
  onInput (e) {
- windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
+ windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
  searchString: e.target.value,
- caseSensitivity: this.isCaseSensitive
+ caseSensitivity: this.props.isCaseSensitive
  }))
  }
 
  onCaseSensitivityChange (e) {
- windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
- searchString: this.searchString,
- caseSensitivity: !this.isCaseSensitive
+ windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
+ searchString: this.props.searchString,
+ caseSensitivity: !this.props.isCaseSensitive
  }))
  }
 
  onFindFirst () {
- this.props.onFind(this.searchString, this.isCaseSensitive, true, false)
+ this.onFind(this.props.searchString, this.props.isCaseSensitive, true, false)
  }
 
  onFindNext () {
- this.props.onFind(this.searchString, this.isCaseSensitive, true, this.props.findDetail.get('internalFindStatePresent'))
+ this.onFind(this.props.searchString, this.props.isCaseSensitive, true, this.props.internalFindStatePresent)
  }
 
  onFindPrev () {
- this.props.onFind(this.searchString, this.isCaseSensitive, false, this.props.findDetail.get('internalFindStatePresent'))
+ this.onFind(this.props.searchString, this.props.isCaseSensitive, false, this.props.internalFindStatePresent)
  }
 
  onContextMenu (e) {
  // Without this timeout selection is not shown when right clicking in
  // a word so the word replacement is kind of a surprise. This is because
  // our context menus are modal at the moment. If we fix that we can
  // remove this timeout.
- setTimeout(() =>
- contextMenus.onFindBarContextMenu(e), 10)
+ setTimeout(() => contextMenus.onFindBarContextMenu(e), 10)
  }
 
  /**
@@ -91,26 +87,27 @@ class FindBar extends ImmutableComponent {
  }
 
  componentDidMount () {
- this.searchInput.value = this.searchString
+ this.searchInput.value = this.props.searchString
  this.focus()
  this.select()
- windowActions.setFindbarSelected(this.frame, false)
+ windowActions.setFindbarSelected(this.props.activeFrameKey, false)
  }
 
  componentWillUpdate (nextProps) {
- if (nextProps.frameKey !== this.props.frameKey) {
+ if (nextProps.frameKey !== this.props.activeFrameKey) {
  this.searchInput.value = (nextProps.findDetail && nextProps.findDetail.get('searchString')) || ''
  }
  }
 
  componentDidUpdate (prevProps) {
- if (this.props.selected && !prevProps.selected) {
+ if (this.props.isSelected && !prevProps.isSelected) {
  this.focus()
  // Findbar might already be focused, so make sure select happens even if no
  // onFocus event happens.
  this.select()
- windowActions.setFindbarSelected(this.frame, false)
+ windowActions.setFindbarSelected(this.props.activeFrameKey, false)
  }
+
  if (!this.props.findDetail || !prevProps.findDetail ||
  this.props.findDetail.get('searchString') !== prevProps.findDetail.get('searchString') ||
  this.props.findDetail.get('caseSensitivity') !== prevProps.findDetail.get('caseSensitivity')) {
@@ -123,7 +120,7 @@ class FindBar extends ImmutableComponent {
  switch (e.keyCode) {
  case keyCodes.ESC:
  e.preventDefault()
- this.props.onFindHide()
+ this.onFindHide()
  break
  case keyCodes.ENTER:
  e.preventDefault()
@@ -141,81 +138,85 @@ class FindBar extends ImmutableComponent {
  }
 
  onBlur (e) {
- windowActions.setFindbarSelected(this.frame, false)
+ windowActions.setFindbarSelected(this.props.activeFrameKey, false)
  }
 
  onClear () {
  this.searchInput.value = ''
- windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
+ windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
  searchString: '',
- caseSensitivity: this.isCaseSensitive
+ caseSensitivity: this.props.isCaseSensitive
  }))
  this.focus()
  }
 
- get numberOfMatches () {
- if (!this.props.findDetail || this.props.findDetail.get('numberOfMatches') === undefined) {
- return -1
- }
- return this.props.findDetail.get('numberOfMatches')
- }
-
- get activeMatchOrdinal () {
- if (!this.props.findDetail || this.props.findDetail.get('activeMatchOrdinal') === undefined) {
- return -1
- }
- return this.props.findDetail.get('activeMatchOrdinal') || -1
- }
-
- get isCaseSensitive () {
- if (!this.props.findDetail) {
- return false
- }
- return this.props.findDetail.get('caseSensitivity')
+ onFindHide () {
+ frameStateUtil.onFindBarHide(this.props.activeFrameKey)
  }
 
- get searchString () {
- if (!this.props.findDetail) {
- return ''
+ onFind (searchString, caseSensitivity, forward, findNext) {
+ webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
+ if (!findNext) {
+ windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
+ internalFindStatePresent: true
+ }))
  }
- return this.props.findDetail.get('searchString')
  }
 
- get backgroundColor () {
- return this.props.paintTabs && (this.props.themeColor || this.props.computedThemeColor)
- }
-
- get textColor () {
- return getTextColorForBackground(this.backgroundColor)
- }
-
- render () {
- let findMatchText
- if (this.numberOfMatches !== -1 && this.activeMatchOrdinal !== -1 && this.searchString) {
+ get findTextMatch () {
+ if (this.props.numberOfMatches !== -1 && this.props.activeMatchOrdinal !== -1 && this.props.searchString) {
  const l10nArgs = {
- activeMatchOrdinal: this.activeMatchOrdinal,
- numberOfMatches: this.numberOfMatches
+ activeMatchOrdinal: this.props.activeMatchOrdinal,
+ numberOfMatches: this.props.numberOfMatches
  }
- findMatchText = <div className='foundResults'
+
+ return <div className='foundResults'
  data-l10n-args={JSON.stringify(l10nArgs)}
  data-l10n-id='findResults' />
- } else if (this.numberOfMatches !== -1 && this.searchString) {
+ } else if (this.props.numberOfMatches !== -1 && this.props.searchString) {
  const l10nArgs = {
- activeMatchOrdinal: this.activeMatchOrdinal,
- numberOfMatches: this.numberOfMatches
+ activeMatchOrdinal: this.props.activeMatchOrdinal,
+ numberOfMatches: this.props.numberOfMatches
  }
- findMatchText = <div className='foundResults'
+
+ return <div className='foundResults'
  data-l10n-args={JSON.stringify(l10nArgs)}
  data-l10n-id='findResultMatches' />
  }
 
- const backgroundColor = this.backgroundColor
+ return null
+ }
+
+ mergeProps (state, ownProps) {
+ const currentWindow = state.get('currentWindow')
+ const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+ const activeFrameKey = activeFrame.get('key')
+
+ const props = {}
+ // used in renderer
+ props.backgroundColor = getSetting(settings.PAINT_TABS) &&
+ (activeFrame.get('themeColor') || activeFrame.get('computedThemeColor'))
+ props.textColor = getTextColorForBackground(props.backgroundColor)
+ props.numberOfMatches = activeFrame.getIn(['findDetail', 'numberOfMatches'], -1)
+ props.activeMatchOrdinal = activeFrame.getIn(['findDetail', 'activeMatchOrdinal'], -1)
+ props.searchString = activeFrame.getIn(['findDetail', 'searchString'], '')
+ props.isCaseSensitive = activeFrame.getIn(['findDetail', 'caseSensitivity'], false)
+
+ // used in other functions
+ props.activeFrameKey = activeFrameKey
+ props.isSelected = activeFrame.get('findbarSelected', false)
+ props.internalFindStatePresent = activeFrame.getIn(['findDetail', 'internalFindStatePresent'])
+
+ return props
+ }
+
+ render () {
  let findBarStyle = {}
  let findBarTextStyle = {}
 
- if (backgroundColor) {
+ if (this.props.backgroundColor) {
  findBarStyle = {
- background: backgroundColor,
+ background: this.props.backgroundColor,
  color: this.textColor
  }
  findBarTextStyle = {
@@ -227,42 +228,55 @@ class FindBar extends ImmutableComponent {
  <div className='searchContainer'>
  <div className='searchStringContainer'>
  <span className='searchStringContainerIcon fa fa-search' />
- <input type='text'
+ <input
+ ref={(node) => { this.searchInput = node }}
+ type='text'
  spellCheck='false'
  onContextMenu={this.onContextMenu}
- ref={(node) => { this.searchInput = node }}
  onFocus={this.onInputFocus}
  onKeyDown={this.onKeyDown}
- onInput={this.onInput} />
- <span className='searchStringContainerIcon fa fa-times findClear'
- onClick={this.onClear} />
+ onInput={this.onInput}
+ />
+ <span
+ className='searchStringContainerIcon fa fa-times findClear'
+ onClick={this.onClear}
+ />
  </div>
- <span className='findMatchText'>{findMatchText}</span>
- <BrowserButton iconOnly
+ <span className='findMatchText'>{this.findTextMatch}</span>
+ <BrowserButton
+ iconOnly
  iconClass={globalStyles.appIcons.findPrev}
  inlineStyles={findBarStyle}
  testId='findBarPrevButton'
- disabled={this.numberOfMatches <= 0}
+ disabled={this.props.numberOfMatches <= 0}
  onClick={this.onFindPrev}
  />
- <BrowserButton iconOnly
+ <BrowserButton
+ iconOnly
  iconClass={globalStyles.appIcons.findNext}
  inlineStyles={findBarStyle}
  testId='findBarNextButton'
- disabled={this.numberOfMatches <= 0}
+ disabled={this.props.numberOfMatches <= 0}
  onClick={this.onFindNext}
  />
  <SwitchControl
  id='caseSensitivityCheckbox'
- checkedOn={this.isCaseSensitive}
- onClick={this.onCaseSensitivityChange} />
- <label htmlFor='caseSensitivityCheckbox' data-l10n-id='caseSensitivity' style={findBarTextStyle} />
+ checkedOn={this.props.isCaseSensitive}
+ onClick={this.onCaseSensitivityChange}
+ />
+ <label
+ htmlFor='caseSensitivityCheckbox'
+ data-l10n-id='caseSensitivity'
+ style={findBarTextStyle}
+ />
  </div>
- <span className='closeButton'
+ <span
+ className='closeButton'
  style={findBarTextStyle}
- onClick={this.props.onFindHide}>+</span>
+ onClick={this.onFindHide}
+ >+</span>
  </div>
  }
 }
 
-module.exports = FindBar
+module.exports = ReduxComponent.connect(FindBar)
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
@@ -625,21 +625,6 @@ class Main extends ImmutableComponent {
  windowActions.setUrlBarActive(false)
  }
 
- onFindHide () {
- const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
- frameStateUtil.onFindBarHide(activeFrame.get('key'))
- }
-
- onFind (searchString, caseSensitivity, forward, findNext) {
- const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
- webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
- if (!findNext) {
- windowActions.setFindDetail(activeFrame.get('key'), Immutable.fromJS({
- internalFindStatePresent: true
- }))
- }
- }
-
  onTabContextMenu (e) {
  const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
  contextMenus.onTabsToolbarContextMenu(activeFrame.get('title'), activeFrame.get('location'), undefined, undefined, e)
@@ -865,15 +850,7 @@ class Main extends ImmutableComponent {
 
  {
  activeFrame && activeFrame.get('findbarShown') && !activeFrame.get('isFullScreen')
- ? <FindBar
- paintTabs={getSetting(settings.PAINT_TABS)}
- themeColor={activeFrame.get('themeColor')}
- computedThemeColor={activeFrame.get('computedThemeColor')}
- frameKey={activeFrame.get('key')}
- selected={activeFrame.get('findbarSelected')}
- findDetail={activeFrame.get('findDetail')}
- onFind={this.onFind}
- onFindHide={this.onFindHide} />
+ ? <FindBar />
  : null
  }
  </div>

diff --git a/docs/windowActions.md b/docs/windowActions.md
@@ -98,15 +98,15 @@ Shows/hides the find-in-page bar.
 
 
 
-### setFindbarSelected(frameProps, selected) 
+### setFindbarSelected(frameKey, selected) 
 
-Highlight text in the findbar
+Highlight text in the find bar
 
 **Parameters**
 
-**frameProps**: `Object`, The frame properties to modify
+**frameKey**: `Object`, The frame key to modify
 
-**selected**: `boolean`, Whether to select the findbar search text
+**selected**: `boolean`, Whether to select the find bar search text