Chrome allows dragging and resizing on table borders not just in the table header but in the body too.

Benefits here are that it's more discoverable and is right next to the content that users want to expand/shrink.

Also makes future features like bug 1615102 more approachable, with more areas to double-click.

Can I take this issue? We just need to set the height of .column-resizer to the height of .requests-list-scroll

(This also reminded me to land bug 1615102) Thank you for your help!

We will need to resize the column draggables on window resize.

resizeDraggables() {
    if (this.requestListScroll == null && this.requestListHeader.closest) {
      this.requestListScroll = this.requestListHeader.closest(
        ".requests-list-scroll"
      );
    }
    if (this.requestListScroll) {
      this.draggableHeight = this.requestListScroll.parentNode.offsetHeight;
      const visibleColumns = this.getVisibleColumns();
      visibleColumns.forEach(col => {
        const name = col.name;
        if (name !== "waterfall") {
          const draggableEl = this.refs[`${name}Header`].querySelector(
            ".column-resizer"
          );
          draggableEl.style.height = this.draggableHeight + "px";
        }
      });
    }
  }

There is already a window resize listener in RequestListHeader.js. We can call above function on window resize. I am wondering if there is a better way we could do this.

Hi Farooq,
you are assigned to this bug, but there is no activity for a long time. Are you still planning to work on this?
Honza

Hi, I apologize for the long delay. I had been caught up in academics. I will resume working on it in a day or two.

https://hg.mozilla.org/mozilla-central/rev/d2bb25cf6ed5

Deleted "in the table header" from the second paragraph of the Network request columns section.