Merge branch '48055-web-ide-resize-handles' into 'master'

Resolve "Resize handles for Web IDE right sidebar are too thin"

Closes #48055

See merge request gitlab-org/gitlab-ce!20818

app/assets/javascripts/vue_shared/components/panel_resizer.vue

@@ -32,7 +32,7 @@
     },
     computed: {
       className() {
-        return `drag${this.side}`;
+        return `drag-${this.side}`;
       },
       cursorStyle() {
         if (this.enabled) {
@@ -44,8 +44,15 @@
     methods: {
       resetSize(e) {
         e.preventDefault();
+        this.$emit('resize-start', this.size);
+
         this.size = this.startSize;
         this.$emit('update:size', this.size);
+
+        // End resizing on next tick so that listeners can react to DOM changes
+        this.$nextTick(() => {
+          this.$emit('resize-end', this.size);
+        });
       },
       startDrag(e) {
         if (this.enabled) {
@@ -84,7 +91,7 @@
   <div
     :class="className"
     :style="cursorStyle"
-    class="dragHandle"
+    class="drag-handle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>

app/assets/stylesheets/page_bundles/ide.scss

@@ -833,18 +833,21 @@
   }
 }
 
-.dragHandle {
+.drag-handle {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 1px;
-  background-color: $white-dark;
+  width: 4px;
+
+  &:hover {
+    background-color: $white-normal;
+  }
 
-  &.dragright {
+  &.drag-right {
     right: 0;
   }
 
-  &.dragleft {
+  &.drag-left {
     left: 0;
   }
 }

changelogs/unreleased/48055-web-ide-resize-handles.yml

+---
+title: Increase width of Web IDE sidebar resize handles
+merge_request: 20818
+author:
+type: fixed

spec/javascripts/vue_shared/components/panel_resizer_spec.js

@@ -29,7 +29,7 @@ describe('Panel Resizer component', () => {
     });
 
     expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.getAttribute('class')).toBe('dragHandle dragleft');
+    expect(vm.$el.getAttribute('class')).toBe('drag-handle drag-left');
     expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;');
   });
 
@@ -40,7 +40,7 @@ describe('Panel Resizer component', () => {
     });
 
     expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.getAttribute('class')).toBe('dragHandle dragright');
+    expect(vm.$el.getAttribute('class')).toBe('drag-handle drag-right');
   });
 
   it('drag the resizer', () => {