[WIP] POC of opening dialogs in separate native windows

newIDE/app/package.json

@@ -60,6 +60,7 @@
     "react-measure": "1.4.7",
     "react-monaco-editor": "^0.18.0",
     "react-mosaic-component": "git://github.com/4ian/react-mosaic#v3.1.0",
+    "react-new-window": "^0.1.2",
     "react-sortable-hoc": "1.5.0",
     "react-sortable-tree": "2.6.2",
     "react-test-renderer": "16.8.6",

newIDE/app/src/EventsFunctionsExtensionEditor/index.js

@@ -429,6 +429,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
                   <MosaicWindow
                     title={<Trans>Function Configuration</Trans>}
                     toolbarControls={[]}
+                    // TODO: deprecated
                     // /!\ Force re-rendering if selectedEventsFunction, globalObjectsContainer
                     // or objectsContainer change,
                     // otherwise we risk using deleted objects (because of the shouldComponentUpdate

newIDE/app/src/EventsSheet/InstructionEditor/NewInstructionEditorDialog.js

@@ -13,7 +13,7 @@ import InstructionParametersEditor from './InstructionParametersEditor';
 import InstructionOrObjectSelector, {
   type TabName,
 } from './InstructionOrObjectSelector';
-import { Column } from '../../UI/Grid';
+import { Column, Line } from '../../UI/Grid';
 import {
   createTree,
   type InstructionOrExpressionTreeNode,
@@ -35,6 +35,7 @@ import {
   ResponsiveWidthMeasurer,
   type WidthType,
 } from '../../UI/Reponsive/ReponsiveWidthMeasurer';
+import NewWindow from 'react-new-window';
 const gd = global.gd;
 
 const styles = {
@@ -353,7 +354,8 @@ export default class NewInstructionEditorDialog extends React.Component<
     return (
       <ResponsiveWidthMeasurer>
         {width => (
-          <Dialog
+        <NewWindow>
+          {/* <Dialog
             actions={[
               <FlatButton
                 label={<Trans>Cancel</Trans>}
@@ -399,7 +401,10 @@ export default class NewInstructionEditorDialog extends React.Component<
             onRequestClose={onCancel}
             contentStyle={styles.dialogContent}
             bodyStyle={styles.dialogBody}
-          >
+          > */}
+          <Background>
+            <Column>
+          <div style={{height: 500}}>
             <SelectColumns
               columnsRenderer={{
                 'instruction-or-object-selector': renderInstructionOrObjectSelector,
@@ -438,7 +443,25 @@ export default class NewInstructionEditorDialog extends React.Component<
                 }
               }}
             />
-          </Dialog>
+            </div>
+            <Line><FlatButton
+                label={<Trans>Cancel</Trans>}
+                primary={false}
+                onClick={onCancel}
+                key="cancel"
+              />
+              <FlatButton
+                label={<Trans>Ok</Trans>}
+                primary={true}
+                keyboardFocused={false}
+                disabled={!instructionType}
+                onClick={onSubmit}
+                key="ok"
+              /></Line>
+              </Column>
+            </Background>
+          {/* </Dialog> */}
+          </NewWindow>
         )}
       </ResponsiveWidthMeasurer>
     );

newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js

@@ -17,6 +17,8 @@ import {
 import DismissableAlertMessage from '../UI/DismissableAlertMessage';
 import { Line, Column } from '../UI/Grid';
 import HelpButton from '../UI/HelpButton';
+// import SeparateWindowDialog from '../UI/SeparateWindowDialog';
+import NewWindow from 'react-new-window'
 
 type Props = {|
   project: gdProject,
@@ -118,6 +120,10 @@ class ProjectPropertiesDialog extends React.Component<Props, State> {
     this.props.onApply();
   };
 
+  componentWillUnmount() {
+    console.log("componentWillUnmount ProjectPropertiesDialog");
+  }
+
   render() {
     const {
       name,
@@ -136,13 +142,37 @@ class ProjectPropertiesDialog extends React.Component<Props, State> {
       isFolderProject,
     } = this.state;
 
+
+    console.log("RENDER ProjectPropertiesDialog");
+
     const defaultPackageName = 'com.example.mygame';
     const admobHint = 'ca-app-pub-XXXXXXXXXXXXXXXX/YYYYYYYYYY';
     const defaultVersion = '1.0.0';
 
     return (
       <React.Fragment>
-        <Dialog
+        <NewWindow
+        >
+        {/* <SeparateWindowDialog
+          onRequestClose={this.props.onClose}
+          actions={[
+            <FlatButton
+              label={<Trans>Cancel</Trans>}
+              primary={false}
+              onClick={this.props.onClose}
+              key="cancel"
+            />,
+            <FlatButton
+              label={<Trans>Apply</Trans>}
+              primary={true}
+              keyboardFocused={true}
+              onClick={this._onApply}
+              key="apply"
+            />,
+          ]}
+        > */}
+          <div>
+        {/* <Dialog
           actions={[
             <FlatButton
               label={<Trans>Cancel</Trans>}
@@ -167,7 +197,7 @@ class ProjectPropertiesDialog extends React.Component<Props, State> {
           open={this.props.open}
           onRequestClose={this.props.onClose}
           autoScrollBodyContent={true}
-        >
+        > */}
           <SemiControlledTextField
             floatingLabelText={<Trans>Game name</Trans>}
             fullWidth
@@ -422,7 +452,23 @@ class ProjectPropertiesDialog extends React.Component<Props, State> {
               });
             }}
           />
-        </Dialog>
+          <FlatButton
+            label={<Trans>Cancel</Trans>}
+            primary={false}
+            onClick={this.props.onClose}
+            key="cancel"
+          />
+          <FlatButton
+            label={<Trans>Apply</Trans>}
+            primary={true}
+            keyboardFocused={true}
+            onClick={this._onApply}
+            key="apply"
+          />
+        {/* </Dialog> */}
+        </div>
+        {/* </SeparateWindowDialog> */}
+        </NewWindow>
         <SubscriptionChecker
           ref={subscriptionChecker =>
             (this._subscriptionChecker = subscriptionChecker)

newIDE/app/src/ProjectManager/index.js

@@ -606,6 +606,7 @@ export default class ProjectManager extends React.Component<Props, State> {
 
     const forceOpen = searchText !== '' ? true : undefined;
 
+    console.log('projectPropertiesDialogOpen', this.state.projectPropertiesDialogOpen);
     return (
       <div style={styles.container}>
         <List style={styles.list}>
@@ -959,10 +960,10 @@ export default class ProjectManager extends React.Component<Props, State> {
           <ProjectPropertiesDialog
             open={this.state.projectPropertiesDialogOpen}
             project={project}
-            onClose={() =>
+            onClose={() => console.log("onClose") ||
               this.setState({ projectPropertiesDialogOpen: false })
             }
-            onApply={() =>
+            onApply={() => console.log("onApply") ||
               this.setState({ projectPropertiesDialogOpen: false })
             }
             onChangeSubscription={this.props.onChangeSubscription}

newIDE/app/src/UI/SeparateWindowDialog.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column, Line } from './Grid';
+import Divider from 'material-ui/Divider';
+
+export default class SeparateWindowDialog extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    // STEP 1: create a container <div>
+    this.containerEl = document.createElement('div');
+    this.externalWindow = null;
+  }
+
+  render() {
+    // STEP 2: append props.children to the container <div> that isn't mounted anywhere yet
+    const { actions } = this.props;
+    const content = actions ? (
+      <Column>
+        {this.props.children}
+        <Divider />
+        <Line>{this.props.actions}</Line>
+      </Column>
+    ) : (
+      this.props.children
+    );
+
+    return ReactDOM.createPortal(content, this.containerEl);
+  }
+
+  componentDidMount() {
+    // STEP 3: open a new browser window and store a reference to it
+    this.externalWindow = window.open(
+      '',
+      '',
+      'width=600,height=400,left=200,top=200'
+    );
+
+    if (!this.externalWindow) {
+      console.error(
+        'Unable to open an external window for SeparateWindowDialog - is Electron or a popup blocker on?'
+      );
+      return;
+    }
+
+    // STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window
+    this.externalWindow.document.body.appendChild(this.containerEl);
+
+    this.externalWindow.addEventListener('close', event => {
+        console.log("CLOSE");
+      this.props.onRequestClose();
+    });
+  }
+
+  componentWillUnmount() {
+    // STEP 5: This will fire when this.state.showWindowPortal in the parent component becomes false
+    // So we tidy up by closing the window
+    this.externalWindow.close();
+  }
+}

newIDE/app/yarn.lock

@@ -8933,13 +8933,6 @@ material-colors@^1.2.1:
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
   integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
-material-ui-search-bar@0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/material-ui-search-bar/-/material-ui-search-bar-0.4.1.tgz#821a81d6942dc92ade9d00103f08a961b93b243f"
-  integrity sha512-plvMmfLCcRNaPG2Pr3XVwzMAeiG/0Cwlr4jeVw2qyac0aYSrDXQtuzRcS9U190UmMwJvlChIvZp6tBZwkTEvLw==
-  dependencies:
-    prop-types "^15.5.8"
-
 material-ui@0.20:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/material-ui/-/material-ui-0.20.2.tgz#5fc9b4b62b691d3b16c89d8e54597a0412b52c7d"
@@ -11094,7 +11087,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11675,6 +11668,13 @@ react-monaco-editor@^0.18.0:
     react-dnd-touch-backend "^0.8.3"
     uuid "^3.3.2"
 
+react-new-window@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/react-new-window/-/react-new-window-0.1.2.tgz#8c04392e669b16e64d68f46bb9d58666e4f753d4"
+  integrity sha512-KfjR6QupGf4UZCK7ittUE7r53eOax9mw0ODQIhDSxu4dzxWgeE9y95MRs8Dr9m/F7Plm3LUvccO5yGbg3619yA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-popper-tooltip@^2.8.3:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.8.3.tgz#1c63e7473a96362bd93be6c94fa404470a265197"

newIDE/electron-app/app/main.js

@@ -74,6 +74,7 @@ app.on('ready', function() {
     x: args.x,
     y: args.y,
     webPreferences: {
+      nativeWindowOpen: true, // TODO
       webSecurity: false, // Allow to access to local files
     },
     enableLargerThanScreen: true,
@@ -130,10 +131,11 @@ app.on('ready', function() {
   });
 
   //Prevent opening any website or url inside Electron.
-  mainWindow.webContents.on('new-window', (e, url) => {
+  mainWindow.webContents.on('new-window', (event, url, frameName) => {
-    console.info('Opening in browser (because of new-window): ', url);
+    console.info(url, frameName);
-    e.preventDefault();
+    // console.info('Opening in browser (because of new-window): ', url);
-    electron.shell.openExternal(url);
+    // e.preventDefault();
+    // electron.shell.openExternal(url);
   });
 
   ipcMain.on('piskel-open-then-load-animation', (event, externalEditorData) => {