Resizable expanded deployment pane

packages/xod-client-browser/test-func/copy-save.spec.js

@@ -1,4 +1,4 @@
-/* global browser:false, assert:false, navigator:false */
+/* global browser:false, assert:false, navigator:false, localStorage: false */
 import { tmpdir } from 'os';
 import { promises as fs } from 'fs';
 import { resolve } from 'path';
@@ -9,16 +9,26 @@ import getPage from './utils/getPage';
 import Debugger from './pageObjects/Debugger';
 
 describe('copy & save log', () => {
+  beforeEach(async () => {
+    const page = await getPage(browser);
+    // We have to clear the localStorage to ensure that the deployment
+    // pane will be in a default initial state
+    await page.evaluate(() => localStorage.clear());
+  });
   const openIdeAndDeploymentPane = async browser => {
     const page = await getPage(browser);
-    const debugPanel = await Debugger.findOnPage(page);
-
+    // TODO: Replace with `const` and do not find the DOM elment on the page
+    //       after opening it, when rerendering of the element will be fixed
+    let debugPanel = await Debugger.findOnPage(page);
     // Open debugger
     assert.isTrue(
       await debugPanel.isCollapsed(),
       'debugger panel is collapsed by default'
     );
+
     await debugPanel.click();
+    debugPanel = await Debugger.findOnPage(page); // TODO
+
     assert.isTrue(
       await debugPanel.isOpened(),
       'debugger panel is opened by click'

packages/xod-client/package.json

@@ -47,7 +47,7 @@
     "react-highlight-words": "^0.8.1",
     "react-hotkeys": "^1.1.4",
     "react-redux": "^4.0.6",
-    "react-reflex": "^2.2.7",
+    "react-reflex": "^2.2.9",
     "react-remarkable": "^1.1.3",
     "react-resize-detector": "^1.1.0",
     "react-skylight": "git+/~https://github.com/xodio/react-skylight.git#6dc266edc5198d0d1a6feb57f329826e782ec967",

packages/xod-client/src/core/containers/App.jsx

@@ -59,6 +59,7 @@ import { USERNAME_NEEDED_FOR_LITERAL } from '../../user/messages';
 import { PROJECT_NAME_NEEDED_FOR_LITERAL } from '../../project/messages';
 import { DO_NOT_USE_TETHERING_INTERNET_IN_BROWSER } from '../../debugger/messages';
 import { COMMAND } from '../../utils/constants';
+import { PANEL_IDS } from '../../editor/constants';
 
 import formatErrorMessage from '../formatErrorMessage';
 
@@ -438,7 +439,7 @@ App.actions = {
   startDebuggerSession: actions.startDebuggerSession,
   startSerialSession: actions.startSerialSession,
   stopDebuggerSession: actions.stopDebuggerSession,
-  toggleDebugger: actions.toggleDebugger,
+  toggleDebugger: () => actions.togglePanel(PANEL_IDS.DEPLOYMENT),
   logDebugger: actions.addMessagesToDebuggerLog,
   clearDebugger: actions.clearDebuggerLog,
   cutEntities: actions.cutEntities,

packages/xod-client/src/core/styles/components/Debugger.scss

@@ -10,16 +10,20 @@
 }
 
 .Debugger {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
   bottom: 0;
-  height: 220px;
   width: 100%;
-  border-top: 2px solid $chrome-outlines;
+  border-top: 0;
   box-sizing: border-box;
 
   color: $sidebar-color-text;
 
   &.isCollapsed {
     height: 24px;
+    border-top: 2px solid $chrome-outlines;
   }
 
   .titlebar {
@@ -171,7 +175,9 @@
   }
 
   .container {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     position: relative;
     height: 165px;
 
@@ -180,7 +186,8 @@
   }
 
   .log {
-    height: 161px;
+    flex: 1;
+    // height: 161px;
 
     overflow-y: scroll;
     white-space: pre-wrap;
@@ -220,8 +227,6 @@
     }
 
     &.compact {
-      height: 143px;
-
       .skipped {
         bottom: 24px;
         padding: 0 28px 7px;
@@ -230,6 +235,7 @@
   }
 
   .SerialInput {
+    display: block;
     position: relative;
 
     input {

packages/xod-client/src/core/styles/components/Workarea.scss

@@ -4,6 +4,20 @@
   flex-direction: column;
   flex-grow: 1;
   max-width: 100%;
+
+  & > .reflex-layout > .reflex-element > div {
+    flex-direction: column;
+  }
+
+  .Deployment-pane {
+    min-height: 24px;
+  }
+}
+
+.Workarea-content {
+  &.isCollapsed .reflex-splitter {
+    display: none;
+  }
 }
 
 .Workarea-inner {

packages/xod-client/src/debugger/actionTypes.js

@@ -3,8 +3,6 @@ export const INSTALL_ARDUINO_DEPENDENCIES = 'INSTALL_ARDUINO_DEPENDENCIES';
 export const CHECK_ARDUINO_DEPENDENCIES = 'CHECK_ARDUINO_DEPENDENCIES';
 export const UPGRADE_ARDUINO_DEPENDECIES = 'UPGRADE_ARDUINO_DEPENDECIES';
 
-export const TOGGLE_DEBUGGER_PANEL = 'TOGGLE_DEBUGGER_PANEL';
-
 export const SELECT_DEBUGGER_TAB = 'SELECT_DEBUGGER_TAB';
 
 export const DEBUGGER_LOG_ADD_MESSAGES = 'DEBUGGER_LOG_ADD_MESSAGES';

packages/xod-client/src/debugger/actions.js

@@ -3,10 +3,6 @@ import { maybeProp } from 'xod-func-tools';
 import * as AT from './actionTypes';
 import { tetheringInetChunksToSend } from './selectors';
 
-export const toggleDebugger = () => ({
-  type: AT.TOGGLE_DEBUGGER_PANEL,
-});
-
 export const addMessagesToDebuggerLog = messages => ({
   type: AT.DEBUGGER_LOG_ADD_MESSAGES,
   payload: messages,

packages/xod-client/src/debugger/containers/Debugger.jsx

@@ -10,6 +10,7 @@ import { foldMaybe } from 'xod-func-tools';
 import { Maybe } from 'ramda-fantasy';
 
 import { LOG_TAB_TYPE } from '../constants';
+import { PANEL_IDS } from '../../editor/constants';
 import * as selectors from '../selectors';
 import { addError, addConfirmation } from '../../messages/actions';
 import * as DA from '../actions';
@@ -51,7 +52,7 @@ const TAB_ORDER = [
   LOG_TAB_TYPE.TESTER,
 ];
 
-class Debugger extends React.Component {
+class Debugger extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -196,6 +197,7 @@ class Debugger extends React.Component {
       isConnectedToSerial,
       stopDebuggerSession,
       currentTab,
+      isResizing,
     } = this.props;
 
     const uploadProgress = foldMaybe(
@@ -216,7 +218,6 @@ class Debugger extends React.Component {
     );
 
     const isDebuggerTab = currentTab === LOG_TAB_TYPE.DEBUGGER;
-
     return (
       <div className={cn('Debugger', { isCollapsed: !isExpanded })}>
         <div className="titlebar">
@@ -301,7 +302,7 @@ class Debugger extends React.Component {
           <React.Fragment>
             {this.renderTabSelector()}
             <div className="container">
-              <Log compact={isDebuggerTab} />
+              <Log compact={isDebuggerTab} doNotSkipLines={isResizing} />
               {isDebuggerTab ? (
                 <SerialInput
                   disabled={!isConnectedToSerial}
@@ -316,7 +317,12 @@ class Debugger extends React.Component {
   }
 }
 
+Debugger.defaultProps = {
+  isResizing: false,
+};
+
 Debugger.propTypes = {
+  isResizing: PropTypes.bool,
   log: PropTypes.string.isRequired,
   maybeUploadProgress: PropTypes.object.isRequired,
   isExpanded: PropTypes.bool.isRequired,
@@ -336,17 +342,21 @@ const mapStateToProps = R.applySpec({
   log: selectors.getLogForCurrentTab,
   maybeUploadProgress: selectors.getUploadProgress,
   currentTab: selectors.getCurrentDebuggerTab,
-  isExpanded: selectors.isDebuggerVisible,
+  isExpanded: EditorSelectors.isPanelMaximized(PANEL_IDS.DEPLOYMENT),
   isConnectedToSerial: selectors.isSessionActive,
   isCapturingDebuggerProtocolMessages:
     selectors.isCapturingDebuggerProtocolMessages,
   isTabtestRunning: EditorSelectors.isTabtestRunning,
   isSimulationAbortable: selectors.isSimulationAbortable,
 });
+
+const toggleDeploymentPane = () =>
+  EditorActions.togglePanel(PANEL_IDS.DEPLOYMENT);
+
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(
     {
-      toggleDebugger: DA.toggleDebugger,
+      toggleDebugger: toggleDeploymentPane,
       sendToSerial: DA.sendToSerial,
       toggleCapturingDebuggerProtocolMessages:
         DA.toggleCapturingDebuggerProtocolMessages,

packages/xod-client/src/debugger/containers/Log.jsx

@@ -19,6 +19,7 @@ class Log extends React.PureComponent {
     this.autoscrollRef = null;
 
     this.onFollowLog = this.onFollowLog.bind(this);
+    this.onFollowLogClicked = this.onFollowLogClicked.bind(this);
     this.scrollToBottom = this.scrollToBottom.bind(this);
   }
 
@@ -31,8 +32,16 @@ class Log extends React.PureComponent {
     }, 0);
   }
 
-  componentDidUpdate() {
-    if (this.props.log.length === 0) {
+  componentDidUpdate(prevProps) {
+    // To trigger scroll to the bottom and follow log
+    // after resizing the parents component we're checking for
+    // change of `doNotSkipLines` property from `true` to `false`
+    const skipLinesJustTurnedOn =
+      prevProps.doNotSkipLines && !this.props.doNotSkipLines;
+    if (
+      this.props.log.length === 0 ||
+      (skipLinesJustTurnedOn && !this.props.isSkippingNewSerialLogLines)
+    ) {
       this.onFollowLog(false);
     }
   }
@@ -42,6 +51,10 @@ class Log extends React.PureComponent {
     this.props.stopSkippingNewLogLines(addSkipMessage);
   }
 
+  onFollowLogClicked(_event) {
+    this.onFollowLog(true);
+  }
+
   scrollToBottom() {
     if (this.autoscrollRef) {
       this.autoscrollRef.scrollDown();
@@ -52,6 +65,7 @@ class Log extends React.PureComponent {
     const {
       log,
       error,
+      doNotSkipLines,
       isSkippingNewSerialLogLines,
       numberOfSkippedSerialLogLines,
       isSkipOnScrollEnabled,
@@ -64,14 +78,19 @@ class Log extends React.PureComponent {
         className={cn('log', { compact })}
         ref={el => (this.autoscrollRef = el)}
         onScrolledFromBottom={
-          isSkipOnScrollEnabled ? startSkippingNewLogLines : noop
+          isSkipOnScrollEnabled && !doNotSkipLines
+            ? startSkippingNewLogLines
+            : noop
         }
       >
         {log}
         {R.isEmpty(error) ? null : <div className="error">{error}</div>}
         {isSkipOnScrollEnabled && isSkippingNewSerialLogLines ? (
           <div className="skipped">
-            <button className="Button Button--small" onClick={this.onFollowLog}>
+            <button
+              className="Button Button--small"
+              onClick={this.onFollowLogClicked}
+            >
               Follow log ({numberOfSkippedSerialLogLines} new lines skipped)
             </button>
           </div>
@@ -81,7 +100,12 @@ class Log extends React.PureComponent {
   }
 }
 
+Log.defaultProps = {
+  doNotSkipLines: false,
+};
+
 Log.propTypes = {
+  doNotSkipLines: PropTypes.bool.isRequired,
   log: PropTypes.string.isRequired,
   error: PropTypes.string.isRequired,
   isSkippingNewSerialLogLines: PropTypes.bool.isRequired,