Convert NoScriptInfo into redux

Resolves brave#9447 Auditors: @bsclifton @bridiver Test Plan:
NejcZdovc · Jun 15, 2017 · d24b848 · d24b848
1 parent 6478bcd
commit d24b848
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 69 deletions.
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
@@ -82,7 +82,6 @@ class Main extends ImmutableComponent {
     this.onHideWidevinePanel = this.onHideWidevinePanel.bind(this)
     this.onHideAutofillAddressPanel = this.onHideAutofillAddressPanel.bind(this)
     this.onHideAutofillCreditCardPanel = this.onHideAutofillCreditCardPanel.bind(this)
-    this.onHideNoScript = this.onHideNoScript.bind(this)
     this.onHideReleaseNotes = this.onHideReleaseNotes.bind(this)
     this.onHideCheckDefaultBrowserDialog = this.onHideCheckDefaultBrowserDialog.bind(this)
     this.onTabContextMenu = this.onTabContextMenu.bind(this)
@@ -560,10 +559,6 @@ class Main extends ImmutableComponent {
     windowActions.setAutofillCreditCardDetail()
   }
 
-  onHideNoScript () {
-    windowActions.setNoScriptVisible(false)
-  }
-
   onHideReleaseNotes () {
     windowActions.setReleaseNotesVisible(false)
   }
@@ -679,7 +674,8 @@ class Main extends ImmutableComponent {
     const widevinePanelIsVisible = this.props.windowState.getIn(['widevinePanelDetail', 'shown'])
     const autofillAddressPanelIsVisible = this.props.windowState.get('autofillAddressDetail')
     const autofillCreditCardPanelIsVisible = this.props.windowState.get('autofillCreditCardDetail')
-    const noScriptIsVisible = this.props.windowState.getIn(['ui', 'noScriptInfo', 'isVisible'])
+    const noScriptIsVisible = this.props.windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) &&
+      siteUtil.getOrigin(activeFrame.get('location'))
     const releaseNotesIsVisible = this.props.windowState.getIn(['ui', 'releaseNotes', 'isVisible'])
     const checkDefaultBrowserDialogIsVisible =
       isFocused() && defaultBrowserState.shouldDisplayDialog(this.props.appState)
@@ -785,9 +781,7 @@ class Main extends ImmutableComponent {
         }
         {
           noScriptIsVisible
-            ? <NoScriptInfo
-              frameProps={activeFrame}
-              onHide={this.onHideNoScript} />
+            ? <NoScriptInfo />
             : null
         }
         {

diff --git a/app/renderer/components/main/noScriptInfo.js b/app/renderer/components/main/noScriptInfo.js
@@ -3,59 +3,59 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const PropTypes = require('prop-types')
 const Immutable = require('immutable')
 const urlParse = require('../../../common/urlParse')
 
 // Components
+const ReduxComponent = require('../reduxComponent')
 const ImmutableComponent = require('../immutableComponent')
 const Dialog = require('../common/dialog')
 const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
 const tabActions = require('../../../common/actions/tabActions')
+const windowActions = require('../../../../js/actions/windowActions')
+
+// State
+const tabState = require('../../../common/state/tabState')
 
 // Utils
 const siteUtil = require('../../../../js/state/siteUtil')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 class NoScriptCheckbox extends ImmutableComponent {
   toggleCheckbox (e) {
-    this.checkbox.checked = !this.checkbox.checked
     e.stopPropagation()
+    this.checkbox.checked = !this.checkbox.checked
   }
 
   get id () {
     return `checkbox-for-${this.props.origin}`
   }
 
   render () {
-    return <div className='noScriptCheckbox' id={this.id}
-      onClick={this.toggleCheckbox.bind(this)}>
-      <input type='checkbox' onClick={(e) => { e.stopPropagation() }}
-        ref={(node) => { this.checkbox = node }} defaultChecked
-        origin={this.props.origin} />
+    return <div
+      className='noScriptCheckbox'
+      id={this.id}
+      onClick={this.toggleCheckbox.bind(this)}
+    >
+      <input
+        type='checkbox'
+        onClick={(e) => { e.stopPropagation() }}
+        ref={(node) => { this.checkbox = node }}
+        defaultChecked
+        origin={this.props.origin}
+      />
       <label htmlFor={this.id}>{this.props.origin}</label>
     </div>
   }
 }
 
-class NoScriptInfo extends ImmutableComponent {
-  get blockedOrigins () {
-    const blocked = this.props.frameProps.getIn(['noScript', 'blocked'])
-    if (blocked && blocked.size) {
-      return new Immutable.Set(blocked.map(siteUtil.getOrigin))
-    } else {
-      return new Immutable.Set()
-    }
-  }
-
-  get origin () {
-    return siteUtil.getOrigin(this.props.frameProps.get('location'))
-  }
-
-  get isPrivate () {
-    return this.props.frameProps.get('isPrivate')
+class NoScriptInfo extends React.Component {
+  constructor (props) {
+    super(props)
+    this.unselectAll = this.unselectAll.bind(this)
   }
 
   onClickInner (e) {
@@ -65,76 +65,111 @@ class NoScriptInfo extends ImmutableComponent {
   unselectAll (e) {
     e.stopPropagation()
     let checkboxes = this.checkboxes.querySelectorAll('input')
-    if (!checkboxes) {
-      return
+
+    if (checkboxes) {
+      checkboxes.forEach((box) => {
+        box.checked = false
+      })
     }
-    checkboxes.forEach((box) => {
-      box.checked = false
-    })
   }
 
   reload () {
-    tabActions.reload(this.props.frameProps.get('tabId'))
+    tabActions.reload(this.props.activeTabId)
   }
 
-  onAllow (setting, e) {
-    if (!this.origin) {
+  onAllow (setting) {
+    if (!this.props.origin) {
       return
     }
+
     let checkedOrigins = new Immutable.Map()
     this.checkboxes.querySelectorAll('input').forEach((box) => {
       const origin = box.getAttribute('origin')
       if (origin) {
         checkedOrigins = checkedOrigins.set(origin, box.checked ? setting : false)
       }
     })
+
     if (checkedOrigins.filter((value) => value !== false).size) {
-      appActions.noScriptExceptionsAdded(this.origin, checkedOrigins, this.isPrivate)
+      appActions.noScriptExceptionsAdded(this.props.origin, checkedOrigins, this.props.isPrivate)
       this.reload()
-      this.props.onHide()
+      this.onHide()
     }
   }
 
-  get buttons () {
-    return <div>
-      <BrowserButton actionItem l10nId='allowScriptsOnce' onClick={this.onAllow.bind(this, 0)} />
-      {this.isPrivate
-        ? null
-        : <BrowserButton subtleItem l10nId='allowScriptsTemp' onClick={this.onAllow.bind(this, 1)} />
-      }
-    </div>
+  onHide () {
+    windowActions.setNoScriptVisible(false)
+  }
+
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const blocked = activeFrame.getIn(['noScript', 'blocked'])
+    const blockedOrigins = (blocked && blocked.size)
+      ? new Immutable.List(blocked.map(siteUtil.getOrigin))
+      : Immutable.List()
+
+    const props = {}
+    // used in renderer
+    props.siteHost = urlParse(activeFrame.get('location')).host
+    props.showBlocks = blockedOrigins.size
+    props.blockedOrigins = blockedOrigins
+    props.isPrivate = activeFrame.get('isPrivate')
+
+    // Used in other function
+    props.activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+    props.origin = siteUtil.getOrigin(activeFrame.get('location'))
+
+    return props
   }
 
   render () {
-    if (!this.origin) {
-      return null
-    }
     const l10nArgs = {
-      site: urlParse(this.props.frameProps.get('location')).host
+      site: this.props.siteHost
     }
-    return <Dialog onHide={this.props.onHide} className='noScriptInfo' isClickDismiss>
+
+    return <Dialog onHide={this.onHide} className='noScriptInfo' isClickDismiss>
       <div className='dialogInner' onClick={this.onClickInner}>
-        <div className='truncate' data-l10n-args={JSON.stringify(l10nArgs)}
-          data-l10n-id={'scriptsBlocked'} />
-        {this.blockedOrigins.size
+        <div
+          className='truncate'
+          data-l10n-args={JSON.stringify(l10nArgs)}
+          data-l10n-id='scriptsBlocked'
+        />
+        {
+          this.props.showBlocks
           ? <div>
             <div ref={(node) => { this.checkboxes = node }} className='blockedOriginsList'>
-              {this.blockedOrigins.map((origin) => <NoScriptCheckbox origin={origin} />)}
+              {
+                this.props.blockedOrigins.map((origin) => <NoScriptCheckbox origin={origin} />)
+              }
             </div>
-            <div data-l10n-id={'unselectAll'}
+            <div
+              data-l10n-id='unselectAll'
               className='clickable'
-              onClick={this.unselectAll.bind(this)} />
-            {this.buttons}
+              onClick={this.unselectAll}
+            />
+            <div>
+              <BrowserButton
+                actionItem
+                l10nId='allowScriptsOnce'
+                onClick={this.onAllow.bind(this, 0)}
+              />
+              {
+                !this.props.isPrivate
+                ? <BrowserButton
+                  subtleItem
+                  l10nId='allowScriptsTemp'
+                  onClick={this.onAllow.bind(this, 1)}
+                />
+                : null
+              }
+            </div>
           </div>
-          : null}
+          : null
+        }
       </div>
     </Dialog>
   }
 }
 
-NoScriptInfo.propTypes = {
-  frameProps: PropTypes.object,
-  onHide: PropTypes.func
-}
-
-module.exports = NoScriptInfo
+module.exports = ReduxComponent.connect(NoScriptInfo)