Fix scrolling in Debugger

newIDE/app/src/Debugger/DebuggerContent.js

@@ -24,6 +24,8 @@ import HelpButton from '../UI/HelpButton';
 import Profiler from './Profiler';
 import { type ProfilerOutput } from '.';
 import PreferencesContext from '../MainFrame/Preferences/PreferencesContext';
+import MiniToolbar from '../UI/MiniToolbar';
+import ScrollView from '../UI/ScrollView';
 
 type Props = {|
   gameData: ?any,
@@ -127,7 +129,8 @@ export default class DebuggerContent extends React.Component<Props, State> {
         noTitleBar: true,
         renderEditor: () => (
           <Background>
-            <Column expand noMargin>
+            <ScrollView>
+              <Column>
               {selectedInspector ? (
                 rawMode ? (
                   <RawContentInspector
@@ -169,24 +172,25 @@ export default class DebuggerContent extends React.Component<Props, State> {
                   )}
                 </EmptyMessage>
               )}
-              <Column>
-                <Line justifyContent="space-between" alignItems="center">
-                  <HelpButton helpPagePath="/interface/debugger" />
-                  <div>
-                    <Checkbox
-                      checkedIcon={<Flash />}
-                      uncheckedIcon={<FlashOff />}
-                      checked={rawMode}
-                      onCheck={(e, enabled) =>
-                        this.setState({
-                          rawMode: enabled,
-                        })
-                      }
-                    />
-                  </div>
-                </Line>
               </Column>
-            </Column>
+            </ScrollView>
+            <MiniToolbar>
+              <Line justifyContent="space-between" alignItems="center" noMargin>
+                <HelpButton helpPagePath="/interface/debugger" />
+                <div>
+                  <Checkbox
+                    checkedIcon={<Flash />}
+                    uncheckedIcon={<FlashOff />}
+                    checked={rawMode}
+                    onCheck={(e, enabled) =>
+                      this.setState({
+                        rawMode: enabled,
+                      })
+                    }
+                  />
+                </div>
+              </Line>
+            </MiniToolbar>
           </Background>
         ),
       },

newIDE/app/src/Debugger/DebuggerSelector.js

@@ -16,30 +16,28 @@ export default class DebuggerSelector extends React.Component<Props, void> {
   render() {
     const hasDebuggers = !!this.props.debuggerIds.length;
     return (
-      <Column>
-        <SelectField
-          fullWidth
-          value={hasDebuggers ? this.props.selectedId : 0}
-          onChange={(e, i, value) =>
-            this.props.onChooseDebugger(parseInt(value, 10) || 0)
-          }
-          disabled={!hasDebuggers}
-        >
-          {this.props.debuggerIds.map(id => (
-            <SelectOption
-              value={id}
-              key={id}
-              primaryText={t`Game preview #${id}`}
-            />
-          ))}
-          {!hasDebuggers && (
-            <SelectOption
-              value={0}
-              primaryText={t`No preview running. Run a preview and you will be able to inspect it with the debugger`}
-            />
-          )}
-        </SelectField>
-      </Column>
+      <SelectField
+        fullWidth
+        value={hasDebuggers ? this.props.selectedId : 0}
+        onChange={(e, i, value) =>
+          this.props.onChooseDebugger(parseInt(value, 10) || 0)
+        }
+        disabled={!hasDebuggers}
+      >
+        {this.props.debuggerIds.map(id => (
+          <SelectOption
+            value={id}
+            key={id}
+            primaryText={t`Game preview #${id}`}
+          />
+        ))}
+        {!hasDebuggers && (
+          <SelectOption
+            value={0}
+            primaryText={t`No preview running. Run a preview and you will be able to inspect it with the debugger`}
+          />
+        )}
+      </SelectField>
     );
   }
 }

newIDE/app/src/Debugger/Inspectors/RawContentInspector.js

@@ -11,19 +11,12 @@ type Props = {|
   onEdit: (path: Array<string>, newValue: any) => boolean,
 |};
 
-const styles = {
-  container: {
-    flex: 1,
-    overflowY: 'scroll',
-  },
-};
-
 /**
  * A very simple inspector that display the raw information given by the gameData
  * object.
  */
 export default ({ gameData, onEdit }: Props) => (
-  <div style={styles.container}>
+  <React.Fragment>
     <EmptyMessage>
       <Trans>
         You are in raw mode. You can edit the fields, but be aware that this can
@@ -40,5 +33,5 @@ export default ({ gameData, onEdit }: Props) => (
       groupArraysAfterLength={50}
       theme="monokai"
     />
-  </div>
+  </React.Fragment>
 );

newIDE/app/src/Debugger/Inspectors/RuntimeObjectInspector.js

@@ -17,13 +17,6 @@ type Props = {|
   onEdit: EditFunction,
 |};
 
-const styles = {
-  container: {
-    flex: 1,
-    overflowY: 'scroll',
-  },
-};
-
 const transform = runtimeObject => {
   if (!runtimeObject) return null;
   return {
@@ -55,7 +48,7 @@ const handleEdit = (edit, { onCall, onEdit }: Props) => {
 };
 
 export default (props: Props) => (
-  <div style={styles.container}>
+  <React.Fragment>
     <Text>
       <Trans>General:</Trans>
     </Text>
@@ -84,5 +77,5 @@ export default (props: Props) => (
       }
       onCall={(path, args) => props.onCall(['_variables'].concat(path), args)}
     />
-  </div>
+  </React.Fragment>
 );

newIDE/app/src/Debugger/Inspectors/RuntimeSceneInspector.js

@@ -25,13 +25,6 @@ type State = {|
   newObjectName: string,
 |};
 
-const styles = {
-  container: {
-    flex: 1,
-    overflowY: 'scroll',
-  },
-};
-
 const transformLayer = layer => {
   if (!layer) return null;
   return {
@@ -113,7 +106,7 @@ export default class RuntimeSceneInspector extends React.Component<
     if (!runtimeScene) return null;
 
     return (
-      <div style={styles.container}>
+      <React.Fragment>
         <Text>
           <Trans>Layers:</Trans>
         </Text>
@@ -167,7 +160,7 @@ export default class RuntimeSceneInspector extends React.Component<
             )}
           />
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

newIDE/app/src/Debugger/Inspectors/VariablesContainerInspector.js

@@ -14,13 +14,6 @@ type Props = {|
   onEdit: EditFunction,
 |};
 
-const styles = {
-  container: {
-    flex: 1,
-    overflowY: 'scroll',
-  },
-};
-
 const transformVariable = variable => {
   if (!variable) return null;
 
@@ -66,19 +59,17 @@ const handleEdit = (edit, { onCall, onEdit }: Props) => {
 };
 
 export default (props: Props) => (
-  <div style={styles.container}>
-    <ReactJsonView
-      collapsed={false}
-      name={false}
-      src={
-        props.variablesContainer ? transform(props.variablesContainer) : null
-      }
-      enableClipboard={false}
-      displayDataTypes={false}
-      displayObjectSize={false}
-      onEdit={edit => handleEdit(edit, props)}
-      groupArraysAfterLength={50}
-      theme="monokai"
-    />
-  </div>
+  <ReactJsonView
+    collapsed={false}
+    name={false}
+    src={
+      props.variablesContainer ? transform(props.variablesContainer) : null
+    }
+    enableClipboard={false}
+    displayDataTypes={false}
+    displayObjectSize={false}
+    onEdit={edit => handleEdit(edit, props)}
+    groupArraysAfterLength={50}
+    theme="monokai"
+  />
 );