Improved UI/UX of find bar

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')
   }
 }
 

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
@@ -145,39 +156,50 @@ 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.props.paintTabs && (this.props.themeColor || this.props.computedThemeColor)
+    let textColor
+    let findBarStyle = {}
+
+    if (backgroundColor) {
+      textColor = getTextColorForBackground(backgroundColor)
+      findBarStyle = {
+        background: backgroundColor,
+        border: '1px solid ' + backgroundColor,
+        color: textColor
+      }
+    }
+
+    return <div className='findBar' style={findBarStyle} onBlur={this.onBlur}>
+      <div className='searchContainer'>
+        <div className='searchStringContainer'>
+          <span className='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='fa fa-times'
+            onClick={this.onClear}></span>
+        </div>
+        <span className='findMatchText'>{findMatchText}</span>
+        <Button iconClass='findButton fa-caret-down'
+          className='findButton smallButton findNext'
+          disabled={this.numberOfMatches <= 0}
+          onClick={this.onFindNext} />
+        <Button iconClass='findButton fa-caret-up'
+          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>
+      <Button label='+'
+        className='navbutton closeButton'
+        onClick={this.props.onFindHide} />
     </div>
   }
 }

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')
@@ -21,7 +22,6 @@ const FullScreenWarning = require('./fullScreenWarning')
 const debounce = require('../lib/debounce.js')
 const getSetting = require('../settings').getSetting
 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')
@@ -43,8 +43,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 = {}
@@ -768,7 +766,8 @@ class Frame extends ImmutableComponent {
 
     this.webview.addEventListener('did-navigate', (e) => {
       if (this.props.findbarShown) {
-        this.onFindHide()
+        windowActions.setFindbarShown(this.frame, false)
+        webviewActions.stopFindInPage(this.webview)
       }
 
       for (let message in this.notificationCallbacks) {
@@ -926,15 +925,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()
@@ -954,22 +948,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
   }
@@ -995,16 +973,6 @@ class Frame extends ImmutableComponent {
         ? <FullScreenWarning location={this.props.location} />
         : null
       }
-      {
-        this.props.findbarShown
-        ? <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,

js/components/main.js

@@ -21,6 +21,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')
@@ -84,6 +85,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 () {
@@ -620,6 +623,16 @@ class Main extends ImmutableComponent {
     windowActions.setUrlBarActive(false)
   }
 
+  onFindHide () {
+    const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
+    windowActions.setFindbarShown(activeFrame, false)
+    webviewActions.stopFindInPage()
+  }
+
+  onFind (searchString, caseSensitivity, forward) {
+    webviewActions.findInPage(searchString, caseSensitivity, forward)
+  }
+
   onTabContextMenu (e) {
     const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
     contextMenus.onTabsToolbarContextMenu(activeFrame, undefined, undefined, e)
@@ -874,6 +887,20 @@ class Main extends ImmutableComponent {
           activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
           onMenu={this.onHamburgerMenu}
         />
+
+        {
+          activeFrame && activeFrame.get('findbarShown')
+          ? <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'
@@ -906,7 +933,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')}

less/findbar.less

@@ -5,29 +5,71 @@
 @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;
+    border: 1px solid transparent;
+    font-size: 18px;
     margin: 0 2px;
 
+    &:not([disabled]):hover {
+      border: 1px solid @gray;
+    }
+
     &.hideButton:not([disabled]):hover {
       background: @chromeControlsWarningBackground;
     }
   }
 
+  .closeButton {
+    color: @gray;
+    font-size: 22px;
+    margin-right: 0;
+    transform: rotate(45deg);
+  }
+
+  .searchContainer {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+  }
+
   .searchStringContainer {
+    background: white;
+    border-radius: @borderRadius;
     display: inline-block;
     position: relative;
 
+    span {
+      color: @gray;
+      padding: 0 5px;
+    }
+
     input {
+      height: 24px;
       width: 200px;
       margin-right: 5px;
-      padding-right: 28px;
+      padding: 0 5px;
+      border: none;
     }
 
     .foundResults {
@@ -44,8 +86,7 @@
     input {
       margin-right: 6px;
     }
-    color: white;
-    font-size: 12px;
+    color: @gray;
     margin-top: 6px;
   }
 }