Add resize event and disable pointer events on iframes on trigger of resize (#4016)

src/ui/layout/Layout.vue

@@ -46,6 +46,7 @@
 
     <multipane
         class="l-shell__main"
+        :class="[resizingClass]"
         type="horizontal"
     >
         <pane
@@ -53,6 +54,8 @@
             handle="after"
             label="Browse"
             collapsable
+            @start-resizing="onStartResizing"
+            @end-resizing="onEndResizing"
         >
             <button
                 slot="controls"
@@ -102,6 +105,8 @@
             handle="before"
             label="Inspect"
             collapsable
+            @start-resizing="onStartResizing"
+            @end-resizing="onEndResizing"
         >
             <Inspector
                 ref="inspector"
@@ -157,12 +162,16 @@ export default {
             actionCollection: undefined,
             triggerSync: false,
             triggerReset: false,
-            headExpanded
+            headExpanded,
+            isResizing: false
         };
     },
     computed: {
         toolbar() {
             return this.hasToolbar && this.isEditing;
+        },
+        resizingClass() {
+            return this.isResizing ? 'l-shell__resizing' : '';
         }
     },
     mounted() {
@@ -240,6 +249,12 @@ export default {
         },
         handleTreeReset() {
             this.triggerReset = !this.triggerReset;
+        },
+        onStartResizing() {
+            this.isResizing = true;
+        },
+        onEndResizing() {
+            this.isResizing = false;
         }
     }
 };

src/ui/layout/layout.scss

@@ -293,6 +293,12 @@
         justify-content: space-between;
         padding: $p;
     }
+
+    &__resizing {
+        iframe {
+            pointer-events: none;
+        }
+    }
 }
 
 .is-editing {

src/ui/layout/pane.vue

@@ -126,12 +126,14 @@ export default {
             document.body.addEventListener('mousemove', this.updatePosition);
             document.body.addEventListener('mouseup', this.end);
             this.resizing = true;
+            this.$emit('start-resizing');
             this.trackSize();
         },
         end: function (event) {
             document.body.removeEventListener('mousemove', this.updatePosition);
             document.body.removeEventListener('mouseup', this.end);
             this.resizing = false;
+            this.$emit('end-resizing');
             this.trackSize();
         }
     }