Skip to content

Commit

Permalink
Convert NoScriptInfo into redux
Browse files Browse the repository at this point in the history 
Resolves brave#9447

Auditors: @bsclifton @bridiver

Test Plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed Jun 15, 2017
1 parent 6478bcd commit 966e403
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 69 deletions.
12 changes: 3 additions & 9 deletions app/renderer/components/main/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -560,10 +559,6 @@ class Main extends ImmutableComponent {
windowActions.setAutofillCreditCardDetail()
}

onHideNoScript () {
windowActions.setNoScriptVisible(false)
}

onHideReleaseNotes () {
windowActions.setReleaseNotesVisible(false)
}
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -785,9 +781,7 @@ class Main extends ImmutableComponent {
}
{
noScriptIsVisible
? <NoScriptInfo
frameProps={activeFrame}
onHide={this.onHideNoScript} />
? <NoScriptInfo />
: null
}
{
Expand Down
158 changes: 98 additions & 60 deletions app/renderer/components/main/noScriptInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -65,76 +65,114 @@ 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)
}

render () {
if (!this.origin) {
return null
mergeProps (state, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
const blocked = activeFrame.getIn(['noScript', 'blocked'])
let blockedOrigins = Immutable.List()

if (blocked && blocked.size) {
const originsSet = Immutable.Set(blocked.map(siteUtil.getOrigin))
blockedOrigins = Immutable.List(originsSet.toJS())
}

const props = {}
// used in renderer
props.siteHost = urlParse(activeFrame.get('location')).host
props.showBlocks = blocked && 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 () {
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)

0 comments on commit 966e403

Please sign in to comment.