Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
noscript info dialog improvements
Browse files Browse the repository at this point in the history
* make it easier to click the checkboxes. fix #7430.
* do not close the dialog unless clicking outside or on a button.
* make the dialog the same whether noscript is globally enabled or not.
* if no checkboxes are checked, clicking the button should be a no-op.
  • Loading branch information
diracdeltas committed Mar 1, 2017
1 parent e01a2a9 commit 3f831c6
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 35 deletions.
1 change: 0 additions & 1 deletion js/components/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -1123,7 +1123,6 @@ class Main extends ImmutableComponent {
{
noScriptIsVisible
? <NoScriptInfo frameProps={activeFrame}
noScriptGlobalEnabled={this.props.appState.getIn(['noScript', 'enabled'])}
onHide={this.onHideNoScript} />
: null
}
Expand Down
61 changes: 27 additions & 34 deletions js/components/noScriptInfo.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ class NoScriptCheckbox extends ImmutableComponent {
}

render () {
return <div className='noScriptCheckbox' id={this.id}>
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}
onClick={this.toggleCheckbox.bind(this)}>{this.props.origin}</label>
<label htmlFor={this.id}>{this.props.origin}</label>
</div>
}
}
Expand All @@ -52,6 +52,10 @@ class NoScriptInfo extends ImmutableComponent {
return this.props.frameProps.get('isPrivate')
}

onClickInner (e) {
e.stopPropagation()
}

unselectAll (e) {
e.stopPropagation()
let checkboxes = this.checkboxes.querySelectorAll('input')
Expand All @@ -71,40 +75,30 @@ class NoScriptInfo extends ImmutableComponent {
if (!this.origin) {
return
}
if (setting === false) {
appActions.changeSiteSetting(this.origin, 'noScript', setting)
this.reload()
} else {
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.size) {
appActions.noScriptExceptionsAdded(this.origin, checkedOrigins)
this.reload()
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.reload()
this.props.onHide()
}
}

get buttons () {
if (!this.props.noScriptGlobalEnabled) {
// NoScript is not turned on globally
return <div><Button l10nId='allowScripts' className='actionButton'
onClick={this.onAllow.bind(this, false)} /></div>
} else {
return <div>
<Button l10nId='allowScriptsOnce' className='actionButton'
onClick={this.onAllow.bind(this, 0)} />
{this.isPrivate
? null
: <span><Button l10nId='allowScriptsTemp' className='subtleButton'
onClick={this.onAllow.bind(this, 1)} /></span>
}
</div>
}
return <div>
<Button l10nId='allowScriptsOnce' className='actionButton'
onClick={this.onAllow.bind(this, 0)} />
{this.isPrivate
? null
: <span><Button l10nId='allowScriptsTemp' className='subtleButton'
onClick={this.onAllow.bind(this, 1)} /></span>
}
</div>
}

render () {
Expand All @@ -115,7 +109,7 @@ class NoScriptInfo extends ImmutableComponent {
site: urlParse(this.props.frameProps.get('location')).host
}
return <Dialog onHide={this.props.onHide} className='noScriptInfo' isClickDismiss>
<div className='dialogInner'>
<div className='dialogInner' onClick={this.onClickInner}>
<div className='truncate' data-l10n-args={JSON.stringify(l10nArgs)}
data-l10n-id={'scriptsBlocked'} />
{this.blockedOrigins.size
Expand All @@ -135,7 +129,6 @@ class NoScriptInfo extends ImmutableComponent {
}

NoScriptInfo.propTypes = {
noScriptGlobalEnabled: React.PropTypes.bool,
frameProps: React.PropTypes.object,
onHide: React.PropTypes.func
}
Expand Down
4 changes: 4 additions & 0 deletions less/forms.less
Original file line number Diff line number Diff line change
Expand Up @@ -504,6 +504,10 @@ select {
}
.noScriptCheckbox {
text-align: left;
font-size: 110%;
input[type=checkbox] {
margin: 5px;
}
}
.clickable {
text-align: left;
Expand Down

0 comments on commit 3f831c6

Please sign in to comment.