fixed resizer for both left and right pane

package.json

@@ -80,7 +80,7 @@
   },
   "devDependencies": {
     "cross-env": "7.0.3",
-    "electron": "13.1.0",
+    "electron": "13.1.1",
     "electron-builder": "22.11.3",
     "electron-packager": "15.2.0",
     "electron-rebuild": "2.3.5",

src/public/app/layouts/desktop_layout.js

@@ -82,6 +82,7 @@ export default class DesktopLayout {
                 .child(...this.customWidgets.get('left-pane'))
             )
             .child(new FlexContainer('column')
+                .id('rest-pane')
                 .css("flex-grow", "1")
                 .child(new FlexContainer('row').overflowing()
                     .child(new TabRowWidget())
@@ -143,7 +144,6 @@ export default class DesktopLayout {
                     )
                     .child(new RightPaneContainer()
                         .hideInZenMode()
-                        .css("width", "300px")
                         .child(...this.customWidgets.get('right-pane'))
                     )
                 )

src/public/app/services/resizer.js

@@ -0,0 +1,65 @@
+import options from "./options.js";
+
+let leftInstance;
+let rightInstance;
+
+function setupLeftPaneResizer(leftPaneVisible) {
+    if (leftInstance) {
+        leftInstance.destroy();
+        leftInstance = null;
+    }
+
+    $("#left-pane").toggle(leftPaneVisible);
+
+    if (!leftPaneVisible) {
+        $("#rest-pane").css('width', '100%');
+
+        return;
+    }
+
+    let leftPaneWidth = options.getInt('leftPaneWidth');
+    if (!leftPaneWidth || leftPaneWidth < 5) {
+        leftPaneWidth = 5;
+    }
+
+    if (leftPaneVisible) {
+        leftInstance = Split(['#left-pane', '#rest-pane'], {
+            sizes: [leftPaneWidth, 100 - leftPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))
+        });
+    }
+}
+
+function setupRightPaneResizer() {
+    if (rightInstance) {
+        leftInstance.destroy();
+        leftInstance = null;
+    }
+
+    const rightPaneVisible = $("#right-pane").is(":visible");
+
+    if (!rightPaneVisible) {
+        $("#center-pane").css('width', '100%');
+
+        return;
+    }
+
+    let rightPaneWidth = options.getInt('rightPaneWidth');
+    if (!rightPaneWidth || rightPaneWidth < 5) {
+        rightPaneWidth = 5;
+    }
+
+    if (rightPaneVisible) {
+        leftInstance = Split(['#center-pane', '#right-pane'], {
+            sizes: [100 - rightPaneWidth, rightPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => options.save('rightPaneWidth', Math.round(sizes[0]))
+        });
+    }
+}
+
+export default {
+    setupLeftPaneResizer,
+    setupRightPaneResizer,
+};

src/public/app/services/split.js

@@ -1,35 +0,0 @@
-import options from "./options.js";
-
-let instance;
-
-function setupSplit(leftPaneVisible) {
-    if (instance) {
-        instance.destroy();
-        instance = null;
-    }
-
-    $("#left-pane").toggle(leftPaneVisible);
-
-    if (!leftPaneVisible) {
-        $("#center-pane").css('width', '100%');
-
-        return;
-    }
-
-    let leftPaneWidth = options.getInt('leftPaneWidth');
-    if (!leftPaneWidth || leftPaneWidth < 5) {
-        leftPaneWidth = 5;
-    }
-
-    if (leftPaneVisible) {
-        instance = Split(['#left-pane', '#center-pane'], {
-            sizes: [leftPaneWidth, 100 - leftPaneWidth],
-            gutterSize: 5,
-            onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))
-        });
-    }
-}
-
-export default {
-    setupSplit
-};

src/public/app/widgets/buttons/left_pane_toggle.js

@@ -1,6 +1,6 @@
 import ButtonWidget from "./button_widget.js";
 import options from "../../services/options.js";
-import splitService from "../../services/split.js";
+import splitService from "../../services/resizer.js";
 
 export default class LeftPaneToggleWidget extends ButtonWidget {
     refreshIcon() {
@@ -20,7 +20,7 @@ export default class LeftPaneToggleWidget extends ButtonWidget {
 
         super.refreshIcon();
 
-        splitService.setupSplit(isLeftPaneVisible);
+        splitService.setupLeftPaneResizer(isLeftPaneVisible);
     }
 
     hideSidebarCommand() {

src/public/app/widgets/containers/right_pane_container.js

@@ -1,4 +1,5 @@
 import FlexContainer from "./flex_container.js";
+import splitService from "../../services/resizer.js";
 
 export default class RightPaneContainer extends FlexContainer {
     constructor() {
@@ -19,7 +20,11 @@ export default class RightPaneContainer extends FlexContainer {
             // right pane is displayed only if some child widget is active
             // we'll reevaluate the visibility based on events which are probable to cause visibility change
             // but these events needs to be finished and only then we check
-            promise.then(() => this.toggleInt(this.isEnabled()));
+            promise.then(() => {
+                this.toggleInt(this.isEnabled());
+
+                splitService.setupRightPaneResizer();
+            });
         }
 
         return promise;