From 5c7db9cb230d59252a19e886cdcdf020e9f006d4 Mon Sep 17 00:00:00 2001
From: Jon Kuperman <jon.kuperman@gmail.com>
Date: Thu, 18 Aug 2016 16:05:02 -0700
Subject: [PATCH 1/3] Improved UI/UX of find bar

---
 js/actions/webviewActions.js | 25 ++++++++++
 js/components/button.js      |  2 +
 js/components/findbar.js     | 93 +++++++++++++++++++++++-------------
 js/components/frame.js       | 39 ++-------------
 js/components/main.js        | 27 ++++++++++-
 less/findbar.less            | 71 +++++++++++++++++++++++----
 less/variables.less          |  2 +
 7 files changed, 181 insertions(+), 78 deletions(-)

diff --git a/js/actions/webviewActions.js b/js/actions/webviewActions.js
index b5617c4dab4..6f01560694c 100644
--- a/js/actions/webviewActions.js
+++ b/js/actions/webviewActions.js
@@ -81,6 +81,31 @@ const webviewActions = {
         webview.executeJavaScript('document.webkitRequestFullscreen()')
       }
     }
+  },
+
+  findInPage (searchString, caseSensitivity, forward, webview) {
+    webview = webview || getWebview()
+    if (!webview) {
+      return
+    }
+
+    if (searchString) {
+      webview.findInPage(searchString, {
+        matchCase: caseSensitivity,
+        forward: forward !== undefined ? forward : true,
+        findNext: forward !== undefined
+      })
+    } else {
+      webview.stopFindInPage('clearSelection')
+    }
+  },
+
+  stopFindInPage (webview) {
+    webview = webview || getWebview()
+    if (!webview) {
+      return
+    }
+    webview.stopFindInPage('keepSelection')
   }
 }
 
diff --git a/js/components/button.js b/js/components/button.js
index e756fbf9b0c..bd9c2e7974e 100644
--- a/js/components/button.js
+++ b/js/components/button.js
@@ -11,6 +11,7 @@ class Button extends ImmutableComponent {
     if (this.props.iconClass) {
       return <span disabled={this.props.disabled}
         data-l10n-id={this.props.l10nId}
+        style={this.props.inlineStyles}
         className={cx({
           browserButton: true,
           fa: true,
@@ -22,6 +23,7 @@ class Button extends ImmutableComponent {
     return <span disabled={this.props.disabled}
       data-l10n-id={this.props.l10nId}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
+      style={this.props.inlineStyles}
       className={cx({
         browserButton: true,
         [this.props.className]: !!this.props.className
diff --git a/js/components/findbar.js b/js/components/findbar.js
index 7121b1bb502..8d1218335ce 100644
--- a/js/components/findbar.js
+++ b/js/components/findbar.js
@@ -7,13 +7,16 @@ const ImmutableComponent = require('./immutableComponent')
 const Immutable = require('immutable')
 const keyCodes = require('../constants/keyCodes')
 const Button = require('./button.js')
+const SwitchControl = require('../components/switchControl')
 const windowActions = require('../actions/windowActions')
 const windowStore = require('../stores/windowStore')
+const {getTextColorForBackground} = require('../lib/color')
 
 class FindBar extends ImmutableComponent {
   constructor () {
     super()
     this.onBlur = this.onBlur.bind(this)
+    this.onClear = this.onClear.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
     this.onChange = this.onChange.bind(this)
     this.onFindPrev = this.onFindPrev.bind(this)
@@ -35,7 +38,7 @@ class FindBar extends ImmutableComponent {
   onCaseSensitivityChange (e) {
     windowActions.setFindDetail(this.frame, Immutable.fromJS({
       searchString: this.searchString,
-      caseSensitivity: e.target.checked
+      caseSensitivity: !this.isCaseSensitive
     }))
   }
 
@@ -97,6 +100,14 @@ class FindBar extends ImmutableComponent {
     windowActions.setFindbarSelected(this.frame, false)
   }
 
+  onClear () {
+    windowActions.setFindDetail(this.frame, Immutable.fromJS({
+      searchString: '',
+      caseSensitivity: this.isCaseSensitive
+    }))
+    this.focus()
+  }
+
   get numberOfMatches () {
     if (!this.props.findDetail || this.props.findDetail.get('numberOfMatches') === undefined) {
       return -1
@@ -125,6 +136,14 @@ class FindBar extends ImmutableComponent {
     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) {
@@ -145,39 +164,49 @@ class FindBar extends ImmutableComponent {
         data-l10n-id='findResultMatches' />
     }
 
-    return <div className='findBar' onBlur={this.onBlur}>
-      <div className='searchStringContainer'>
-        <input type='text'
-          spellCheck='false'
-          ref={(node) => { this.searchInput = node }}
-          onKeyDown={this.onKeyDown}
-          onChange={this.onChange}
-          value={this.searchString} />
-          {findMatchText}
-      </div>
-      <Button iconClass='findButton fa-chevron-up'
-        className='findButton smallButton findPrev'
-        disabled={this.numberOfMatches === 0}
-
-        onClick={this.onFindPrev} />
-      <Button iconClass='findButton fa-chevron-down'
-        className='findButton smallButton findNext'
-        disabled={this.numberOfMatches === 0}
-        onClick={this.onFindNext} />
-      <Button iconClass='fa-times'
-        className='findButton smallButton hideButton'
-        onClick={this.props.onFindHide} />
-      <div className='caseSensitivityContainer'>
-        <input
+    const backgroundColor = this.backgroundColor
+    let findBarStyle = {}
+
+    if (backgroundColor) {
+      findBarStyle = {
+        background: backgroundColor,
+        color: this.textColor
+      }
+    }
+
+    return <div className='findBar' style={findBarStyle} onBlur={this.onBlur}>
+      <div className='searchContainer'>
+        <div className='searchStringContainer'>
+          <span className='searchStringContainerIcon fa fa-search'></span>
+          <input type='text'
+            spellCheck='false'
+            ref={(node) => { this.searchInput = node }}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onChange}
+            value={this.searchString} />
+          <span className='searchStringContainerIcon fa fa-times'
+            onClick={this.onClear}></span>
+        </div>
+        <span className='findMatchText'>{findMatchText}</span>
+        <Button iconClass='findButton fa-caret-down'
+          inlineStyles={findBarStyle}
+          className='findButton smallButton findNext'
+          disabled={this.numberOfMatches <= 0}
+          onClick={this.onFindNext} />
+        <Button iconClass='findButton fa-caret-up'
+          inlineStyles={findBarStyle}
+          className='findButton smallButton findPrev'
+          disabled={this.numberOfMatches <= 0}
+          onClick={this.onFindPrev} />
+        <SwitchControl
           id='caseSensitivityCheckbox'
-          type='checkbox'
-          className='caseSensitivityCheckbox'
-          checked={this.isCaseSensitive}
-          onChange={this.onCaseSensitivityChange} />
-        <label htmlFor='caseSensitivityCheckbox' data-l10n-id='caseSensitivity'>
-          {'Match case'}
-        </label>
+          checkedOn={this.isCaseSensitive}
+          onClick={this.onCaseSensitivityChange} />
+        <label htmlFor='caseSensitivityCheckbox' data-l10n-id='caseSensitivity' style={findBarStyle}></label>
       </div>
+      <span className='findButton closeButton'
+        style={findBarStyle}
+        onClick={this.props.onFindHide}>+</span>
     </div>
   }
 }
diff --git a/js/components/frame.js b/js/components/frame.js
index 401620f7dee..450812d26f9 100644
--- a/js/components/frame.js
+++ b/js/components/frame.js
@@ -5,6 +5,7 @@
 const React = require('react')
 const urlParse = require('url').parse
 const windowActions = require('../actions/windowActions')
+const webviewActions = require('../actions/webviewActions')
 const appActions = require('../actions/appActions')
 const ImmutableComponent = require('./immutableComponent')
 const Immutable = require('immutable')
@@ -22,7 +23,6 @@ const debounce = require('../lib/debounce.js')
 const getSetting = require('../settings').getSetting
 const config = require('../constants/config')
 const settings = require('../constants/settings')
-const FindBar = require('./findbar.js')
 const { aboutUrls, isSourceAboutUrl, isTargetAboutUrl, getTargetAboutUrl, getBaseUrl, isNavigatableAboutPage } = require('../lib/appUrlUtil')
 const { isFrameError } = require('../lib/errorUtil')
 const locale = require('../l10n')
@@ -44,8 +44,6 @@ class Frame extends ImmutableComponent {
   constructor () {
     super()
     this.onUpdateWheelZoom = debounce(this.onUpdateWheelZoom.bind(this), 20)
-    this.onFind = this.onFind.bind(this)
-    this.onFindHide = this.onFindHide.bind(this)
     this.onFocus = this.onFocus.bind(this)
     // Maps notification message to its callback
     this.notificationCallbacks = {}
@@ -832,7 +830,7 @@ class Frame extends ImmutableComponent {
 
     this.webview.addEventListener('did-navigate', (e) => {
       if (this.props.findbarShown) {
-        this.onFindHide()
+        windowActions.setFindbarShown(this.frame, false)
       }
 
       for (let message in this.notificationCallbacks) {
@@ -993,15 +991,10 @@ class Frame extends ImmutableComponent {
     }
     const searchString = this.props.findDetail && this.props.findDetail.get('searchString')
     if (searchString) {
-      this.onFind(searchString, this.props.findDetail && this.props.findDetail.get('caseSensitivity') || undefined, forward)
+      webviewActions.findInPage(searchString, this.props.findDetail && this.props.findDetail.get('caseSensitivity') || undefined, forward, this.webview)
     }
   }
 
-  onFindHide () {
-    windowActions.setFindbarShown(this.frame, false)
-    this.webview.stopFindInPage('keepSelection')
-  }
-
   onUpdateWheelZoom () {
     if (this.wheelDeltaY > 0) {
       this.zoomIn()
@@ -1021,22 +1014,6 @@ class Frame extends ImmutableComponent {
     }
   }
 
-  onFind (searchString, caseSensitivity, forward) {
-    if (searchString) {
-      this.webview.findInPage(searchString, {
-        matchCase: caseSensitivity,
-        forward: forward !== undefined ? forward : true,
-        findNext: forward !== undefined
-      })
-    } else {
-      this.onClearMatch()
-    }
-  }
-
-  onClearMatch () {
-    this.webview.stopFindInPage('clearSelection')
-  }
-
   get webRTCPolicy () {
     return this.webview ? this.webview.getWebRTCIPHandlingPolicy() : WEBRTC_DEFAULT
   }
@@ -1062,16 +1039,6 @@ class Frame extends ImmutableComponent {
         ? <FullScreenWarning location={this.props.location} />
         : null
       }
-      {
-        this.props.findbarShown && !this.props.isFullScreen
-        ? <FindBar
-          onFind={this.onFind}
-          onFindHide={this.onFindHide}
-          frameKey={this.props.frameKey}
-          selected={this.props.findbarSelected}
-          findDetail={this.props.findDetail} />
-        : null
-      }
       <div ref={(node) => { this.webviewContainer = node }}
         className={cx({
           webviewContainer: true,
diff --git a/js/components/main.js b/js/components/main.js
index 704b8c2568b..c6850e607fd 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -20,6 +20,7 @@ const NavigationBar = require('./navigationBar')
 const Frame = require('./frame')
 const TabPages = require('./tabPages')
 const TabsToolbar = require('./tabsToolbar')
+const FindBar = require('./findbar.js')
 const UpdateBar = require('./updateBar')
 const NotificationBar = require('./notificationBar')
 const DownloadsBar = require('./downloadsBar')
@@ -86,6 +87,8 @@ class Main extends ImmutableComponent {
     this.onBraveMenu = this.onBraveMenu.bind(this)
     this.onHamburgerMenu = this.onHamburgerMenu.bind(this)
     this.onTabContextMenu = this.onTabContextMenu.bind(this)
+    this.onFind = this.onFind.bind(this)
+    this.onFindHide = this.onFindHide.bind(this)
     this.checkForTitleMode = debounce(this.checkForTitleMode.bind(this), 20)
   }
   registerWindowLevelShortcuts () {
@@ -627,6 +630,15 @@ class Main extends ImmutableComponent {
     windowActions.setUrlBarActive(false)
   }
 
+  onFindHide () {
+    const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
+    windowActions.setFindbarShown(activeFrame, false)
+  }
+
+  onFind (searchString, caseSensitivity, forward) {
+    webviewActions.findInPage(searchString, caseSensitivity, forward)
+  }
+
   onTabContextMenu (e) {
     const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
     contextMenus.onTabsToolbarContextMenu(activeFrame, undefined, undefined, e)
@@ -901,6 +913,20 @@ class Main extends ImmutableComponent {
           activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
           onMenu={this.onHamburgerMenu}
         />
+
+        {
+          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} />
+          : null
+        }
       </div>
       <div className='mainContainer'>
         <div className='tabContainer'
@@ -933,7 +959,6 @@ class Main extends ImmutableComponent {
               isFullScreen={frame.get('isFullScreen')}
               showFullScreenWarning={frame.get('showFullScreenWarning')}
               findbarShown={frame.get('findbarShown')}
-              findbarSelected={frame.get('findbarSelected')}
               findDetail={frame.get('findDetail')}
               hrefPreview={frame.get('hrefPreview')}
               showOnRight={frame.get('showOnRight')}
diff --git a/less/findbar.less b/less/findbar.less
index 261fd6aaeba..a6b43dc6049 100644
--- a/less/findbar.less
+++ b/less/findbar.less
@@ -5,29 +5,73 @@
 @import "variables.less";
 
 .findBar {
-  background: @chromeControlsBackground;
-  opacity: 0.95;
+  background: @findbarBackground;
+  border-bottom: 1px solid @lightGray;
+  color: @highlightBlue;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+  justify-content: center;
   padding: 5px 10px;
-  position: absolute;
-  top: 0;
-  right: 0;
+  animation: slideIn 25ms;
 
-  .findButton {
+  .findMatchText {
+    margin: 0 10px;
+    min-width: 60px;
+    text-align: center;
+  }
+
+  label {
+    color: @mediumGray;
+  }
+
+  span.findButton {
+    color: @gray;
+    cursor: pointer;
+    border: 1px solid transparent;
+    font-size: 18px;
     margin: 0 2px;
+    opacity: 0.5;
+
+    &:not([disabled]):hover {
+      opacity: 1;
+    }
 
     &.hideButton:not([disabled]):hover {
       background: @chromeControlsWarningBackground;
     }
   }
 
+  .closeButton {
+    color: white;
+    font-size: 22px;
+    margin-right: 0;
+    opacity: 0.5;
+    transform: rotate(45deg);
+  }
+
+  .searchContainer {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+  }
+
   .searchStringContainer {
     display: inline-block;
     position: relative;
 
+    span {
+      color: @gray;
+      padding: 0 5px;
+    }
+
     input {
+      height: 24px;
       width: 200px;
       margin-right: 5px;
-      padding-right: 28px;
+      padding: 0 25px;
+      border: none;
+      border-radius: @borderRadius;
     }
 
     .foundResults {
@@ -40,12 +84,21 @@
     }
   }
 
+  .searchStringContainerIcon {
+    position: absolute;
+    line-height: 24px;
+
+    &.fa-times {
+      cursor: pointer;
+      right: 10px;
+    }
+  }
+
   .caseSensitivityContainer {
     input {
       margin-right: 6px;
     }
-    color: white;
-    font-size: 12px;
+    color: @gray;
     margin-top: 6px;
   }
 }
diff --git a/less/variables.less b/less/variables.less
index b5432dfec7a..b64aa1203c8 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -70,6 +70,8 @@
 @navbarBraveButtonMarginLeft: 80px;
 @navbarLeftMarginDarwin: 70px;
 
+@findbarBackground: #F7F7F7;
+
 @carotRadius: 8px;
 @sideBarWidth: 190px;
 

From bb4ac3478b1fbf4369f442a6640951471e4f5e3e Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Thu, 25 Aug 2016 17:23:03 -0400
Subject: [PATCH 2/3] Fix syntax and clear highlight on findbar close

Auditors: @jkup
---
 js/actions/webviewActions.js | 4 ++--
 js/components/main.js        | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/actions/webviewActions.js b/js/actions/webviewActions.js
index 6f01560694c..1e23694da7b 100644
--- a/js/actions/webviewActions.js
+++ b/js/actions/webviewActions.js
@@ -83,7 +83,7 @@ const webviewActions = {
     }
   },
 
-  findInPage (searchString, caseSensitivity, forward, webview) {
+  findInPage: function (searchString, caseSensitivity, forward, webview) {
     webview = webview || getWebview()
     if (!webview) {
       return
@@ -100,7 +100,7 @@ const webviewActions = {
     }
   },
 
-  stopFindInPage (webview) {
+  stopFindInPage: function (webview) {
     webview = webview || getWebview()
     if (!webview) {
       return
diff --git a/js/components/main.js b/js/components/main.js
index c6850e607fd..37d9b5f9bfd 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -633,6 +633,7 @@ class Main extends ImmutableComponent {
   onFindHide () {
     const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
     windowActions.setFindbarShown(activeFrame, false)
+    webviewActions.stopFindInPage()
   }
 
   onFind (searchString, caseSensitivity, forward) {

From 313d743012e2aa73408f15f02ef888fdf9e3f102 Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Fri, 26 Aug 2016 23:19:22 -0400
Subject: [PATCH 3/3] Track presence of internal find state

Auditors: @jkup

The trick to this was to keep track in our app state when electron has find state defined.  When it is not defined always do the findFirst call
---
 docs/state.md                |  3 ++-
 js/actions/webviewActions.js |  6 +++---
 js/components/findbar.js     |  6 +++---
 js/components/frame.js       |  2 +-
 js/components/main.js        | 12 ++++++++++--
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/docs/state.md b/docs/state.md
index 03131061666..668afcdff03 100644
--- a/docs/state.md
+++ b/docs/state.md
@@ -277,7 +277,8 @@ WindowStore
       searchString: string, // the string being searched
       caseSensitivity: boolean, // whether we are doing a case sensitive search
       numberOfMatches: number, // Total number of matches on the page
-      activeMatchOrdinal: number // The current ordinal of the match
+      activeMatchOrdinal: number, // The current ordinal of the match
+      internalFindStatePresent: boolean // true if a find-first (ie findNext: false) call has been made
     }
     unloaded: boolean, // true if the tab is unloaded
 
diff --git a/js/actions/webviewActions.js b/js/actions/webviewActions.js
index 1e23694da7b..0ae2afa74df 100644
--- a/js/actions/webviewActions.js
+++ b/js/actions/webviewActions.js
@@ -83,7 +83,7 @@ const webviewActions = {
     }
   },
 
-  findInPage: function (searchString, caseSensitivity, forward, webview) {
+  findInPage: function (searchString, caseSensitivity, forward, findNext, webview) {
     webview = webview || getWebview()
     if (!webview) {
       return
@@ -92,8 +92,8 @@ const webviewActions = {
     if (searchString) {
       webview.findInPage(searchString, {
         matchCase: caseSensitivity,
-        forward: forward !== undefined ? forward : true,
-        findNext: forward !== undefined
+        forward,
+        findNext
       })
     } else {
       webview.stopFindInPage('clearSelection')
diff --git a/js/components/findbar.js b/js/components/findbar.js
index 8d1218335ce..b6048b58a9c 100644
--- a/js/components/findbar.js
+++ b/js/components/findbar.js
@@ -43,15 +43,15 @@ class FindBar extends ImmutableComponent {
   }
 
   onFindFirst () {
-    this.props.onFind(this.searchString, this.isCaseSensitive)
+    this.props.onFind(this.searchString, this.isCaseSensitive, true, false)
   }
 
   onFindNext () {
-    this.props.onFind(this.searchString, this.isCaseSensitive, true)
+    this.props.onFind(this.searchString, this.isCaseSensitive, true, this.props.findDetail.get('internalFindStatePresent'))
   }
 
   onFindPrev () {
-    this.props.onFind(this.searchString, this.isCaseSensitive, false)
+    this.props.onFind(this.searchString, this.isCaseSensitive, false, this.props.findDetail.get('internalFindStatePresent'))
   }
 
   /**
diff --git a/js/components/frame.js b/js/components/frame.js
index 450812d26f9..aebd63170e0 100644
--- a/js/components/frame.js
+++ b/js/components/frame.js
@@ -991,7 +991,7 @@ class Frame extends ImmutableComponent {
     }
     const searchString = this.props.findDetail && this.props.findDetail.get('searchString')
     if (searchString) {
-      webviewActions.findInPage(searchString, this.props.findDetail && this.props.findDetail.get('caseSensitivity') || undefined, forward, this.webview)
+      webviewActions.findInPage(searchString, this.props.findDetail && this.props.findDetail.get('caseSensitivity') || undefined, forward, this.props.findDetail.get('internalFindStatePresent'), this.webview)
     }
   }
 
diff --git a/js/components/main.js b/js/components/main.js
index 37d9b5f9bfd..746a8a6aad3 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -634,10 +634,18 @@ class Main extends ImmutableComponent {
     const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
     windowActions.setFindbarShown(activeFrame, false)
     webviewActions.stopFindInPage()
+    windowActions.setFindDetail(this.frame, Immutable.fromJS({
+      internalFindStatePresent: false
+    }))
   }
 
-  onFind (searchString, caseSensitivity, forward) {
-    webviewActions.findInPage(searchString, caseSensitivity, forward)
+  onFind (searchString, caseSensitivity, forward, findNext) {
+    webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
+    if (!findNext) {
+      windowActions.setFindDetail(this.frame, Immutable.fromJS({
+        internalFindStatePresent: true
+      }))
+    }
   }
 
   onTabContextMenu (e) {