From 1a91cc6204ef8924ab3c3cf1ce2a7df4f3734dff Mon Sep 17 00:00:00 2001 From: Alex Robinson Date: Fri, 23 Mar 2018 00:27:14 +1100 Subject: [PATCH] Add feature window.prompt This is a first pass at implementing the JavaScript function window.prompt. closes #94 - Add translations for message box 'ok' and 'cancel' - Introduce PromptTextbox and use it in messageBox for window.prompt --- app/browser/tabMessageBox.js | 29 ++++++++++++++----- .../brave/locales/en-US/menu.properties | 2 ++ app/locale.js | 2 ++ app/renderer/components/common/messageBox.js | 22 ++++++++++++++ app/renderer/components/common/textbox.js | 12 ++++++++ 5 files changed, 60 insertions(+), 7 deletions(-) diff --git a/app/browser/tabMessageBox.js b/app/browser/tabMessageBox.js index 03c6286851d..32e74eff4de 100644 --- a/app/browser/tabMessageBox.js +++ b/app/browser/tabMessageBox.js @@ -1,6 +1,7 @@ const appActions = require('../../js/actions/appActions') const tabMessageBoxState = require('../common/state/tabMessageBoxState') const {makeImmutable} = require('../common/state/immutableUtil') +const locale = require('../../app/locale') // callbacks for alert, confirm, etc. let messageBoxCallbacks = {} @@ -21,7 +22,7 @@ const tabMessageBox = { const detail = { message, title, - buttons: ['ok'], + buttons: [locale.translation('messageBoxOk')], suppress: false, showSuppress: shouldDisplaySuppressCheckbox } @@ -35,7 +36,7 @@ const tabMessageBox = { const detail = { message, title, - buttons: ['ok', 'cancel'], + buttons: [locale.translation('messageBoxOk'), locale.translation('messageBoxCancel')], cancelId: 1, suppress: false, showSuppress: shouldDisplaySuppressCheckbox @@ -45,10 +46,20 @@ const tabMessageBox = { }) process.on('window-prompt', (webContents, extraData, title, message, defaultPromptText, - shouldDisplaySuppressCheckbox, isBeforeUnloadDialog, isReload, muonCb) => { - console.warn('window.prompt is not supported yet') - let suppress = false - muonCb(null, '', suppress) + shouldDisplaySuppressCheckbox, isBeforeUnloadDialog, isReload, muonCb) => { + const tabId = webContents.getId() + const detail = { + message, + title, + buttons: [locale.translation('messageBoxOk'), locale.translation('messageBoxCancel')], + cancelId: 1, + suppress: false, + allowInput: true, + defaultPromptText, + showSuppress: shouldDisplaySuppressCheckbox + } + + tabMessageBox.show(tabId, detail, muonCb) }) return state @@ -70,6 +81,7 @@ const tabMessageBox = { const muonCb = messageBoxCallbacks[tabId] let suppress = false let result = true + let input = '' state = tabMessageBoxState.removeDetail(state, action) if (muonCb) { cleanupCallback(tabId) @@ -80,7 +92,10 @@ const tabMessageBox = { if (detail.has('result')) { result = detail.get('result') } - muonCb(result, '', suppress) + if (detail.has('input')) { + input = detail.get('input') + } + muonCb(result, input, suppress) } else { muonCb(false, '', false) } diff --git a/app/extensions/brave/locales/en-US/menu.properties b/app/extensions/brave/locales/en-US/menu.properties index ebcd1bc352d..dac4977850c 100644 --- a/app/extensions/brave/locales/en-US/menu.properties +++ b/app/extensions/brave/locales/en-US/menu.properties @@ -93,6 +93,8 @@ learnSpelling=Learn Spelling licenseText=This software uses libraries from the FFmpeg project under the LGPLv2.1 lookupSelection=Look Up “{{selectedVariable}}” mergeAllWindows=Merge All Windows +messageBoxOk=ok +messageBoxCancel=cancel minimize=Minimize moveTabToNewWindow=Move to New Window muteOtherTabs=Mute other Tabs diff --git a/app/locale.js b/app/locale.js index 1dcfbfe1404..d6416b8d5e5 100644 --- a/app/locale.js +++ b/app/locale.js @@ -235,6 +235,8 @@ var rendererIdentifiers = function () { 'dappDismiss', 'dappEnableExtension', 'banSiteConfirmation', + 'messageBoxOk', + 'messageBoxCancel', // other 'passwordsManager', 'extensionsManager', diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js index fa937cecf57..e0e01d14a7f 100644 --- a/app/renderer/components/common/messageBox.js +++ b/app/renderer/components/common/messageBox.js @@ -12,6 +12,7 @@ const Dialog = require('./dialog') const FlyoutDialog = require('./flyoutDialog') const BrowserButton = require('../common/browserButton') const SwitchControl = require('./switchControl') +const {PromptTextBox} = require('./textbox') // Actions const appActions = require('../../../../js/actions/appActions') @@ -36,6 +37,9 @@ class MessageBox extends React.Component { super(props) this.onKeyDown = this.onKeyDown.bind(this) this.onSuppressChanged = this.onSuppressChanged.bind(this) + this.state = { + textInput: props.defaultPromptText + } } componentWillMount () { @@ -82,6 +86,10 @@ class MessageBox extends React.Component { response.result = buttonId !== this.props.cancelId } + if (this.props.allowInput) { + response.input = this.state.textInput + } + appActions.tabMessageBoxDismissed(tabId, response) } @@ -112,6 +120,8 @@ class MessageBox extends React.Component { // used in renderer props.tabId = tabId props.message = messageBoxDetail.get('message') + props.allowInput = messageBoxDetail.get('allowInput') + props.defaultPromptText = messageBoxDetail.get('defaultPromptText') props.suppress = tabMessageBoxState.getSuppress(state, tabId) props.title = tabMessageBoxState.getTitle(state, tabId) props.showSuppress = tabMessageBoxState.getShowSuppress(state, tabId) @@ -151,6 +161,18 @@ class MessageBox extends React.Component { /> : null } + { + this.props.allowInput && ( + { + this.setState({ + textInput: e.target.value + }) + }} + /> + ) + }
{this.messageBoxButtons}
diff --git a/app/renderer/components/common/textbox.js b/app/renderer/components/common/textbox.js index 76f0714cdec..34b46e57842 100644 --- a/app/renderer/components/common/textbox.js +++ b/app/renderer/components/common/textbox.js @@ -21,6 +21,7 @@ class Textbox extends ImmutableComponent { (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable, this.props['data-isCommonForm'] && commonStyles.isCommonForm, this.props['data-isSettings'] && styles.isSettings, + this.props['data-isPrompt'] && styles.isPrompt, this.props.customClass && this.props.customClass ) @@ -66,6 +67,12 @@ class SettingTextbox extends ImmutableComponent { } } +class PromptTextBox extends ImmutableComponent { + render () { + return + } +} + // TextArea class TextArea extends ImmutableComponent { render () { @@ -160,6 +167,10 @@ const styles = StyleSheet.create({ isSettings: { width: '280px' }, + isPrompt: { + width: '100%', + marginBottom: '20px' + }, readOnly: { background: globalStyles.color.lightGray, boxShadow: 'none', @@ -248,6 +259,7 @@ module.exports = { FormTextbox, GroupedFormTextbox, SettingTextbox, + PromptTextBox, TextArea, DefaultTextArea, WordCountTextArea