Add feature window.prompt

This is a first pass at implementing the JavaScript function window.prompt. closes brave#94 - Add translations for message box 'ok' and 'cancel' - Introduce PromptTextbox and use it in messageBox for window.prompt
AlexRobinson- · May 2, 2018 · 1a91cc6 · 1a91cc6
1 parent ca83ee3
commit 1a91cc6
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 && (
+              <PromptTextBox
+                value={this.state.textInput}
+                onChange={e => {
+                  this.setState({
+                    textInput: e.target.value
+                  })
+                }}
+              />
+            )
+          }
           <div className={css(styles.buttons)} data-test-id='msgBoxButtons'>
             {this.messageBoxButtons}
           </div>

diff --git 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 <FormTextbox data-isPrompt='true' {...this.props} />
+  }
+}
+
 // 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