`extend-diff-expander` only expands down when expands up is also available #4736

Yep that's how it is. The feature is very simple and the element is one (you can tell by the text sitting in the middle).

I've always been annoyed by it, maybe we can fix it by adding :before and :after pseudo elements via CSS for the hover and then detect which side has been clicked via JS

If anyone wants to pick this up, I expect maybe 10 lines of CSS and 5 lines of JavaScript in the click listener, no DOM changes.

maybe we can fix it by adding :before and :after pseudo elements via CSS for the hover

Sadly, :hover can't be applied to pseudo-elements. The JS part should be pretty simple though, maybe we can fix at least that?

The JS part should be pretty simple though, maybe we can fix at least that?

How? Would it open the right sight even if there's no indication that the click position is affected?

maybe we can fix it by adding :before and :after pseudo elements via CSS for the hover

Sadly, :hover can't be applied to pseudo-elements.

Indeed.

There are 2 buttons here, so we could use a :after pseudo element on both in order to extend them. However it appears that I can't extend them outside the td, as if there was a overflow:hidden. Nor can they be relative to the tr 🤷‍♂️ Example:

.js-expand.directional-expander {
      position: relative;
}
.js-expand.directional-expander:after {
      content: "";
      position: absolute;
      border-top: solid red 2px;
      top: 0;
      left: 0;
      width: 600px;
}

An additional issue would be the style, since we can't quite match the style for half the element. Maybe a top/bottom border would be enough to show something is happening.

Note: I'd like to avoid using delegate('mouseenter') because that would happen hundreds of times on every mouse movement across the page.

How?

function expandDiff(event: delegate.Event<MouseEvent>): void {
    // Skip if the user clicked directly on the icon
    if (!(event.target as Element).closest('.js-expand')) {
        const direction = event.offsetY >= (event.target as HTMLElement).offsetHeight / 2 ? 'Up' : 'Down';
        select(`.js-expand:is([title="Expand ${direction}"], .single-expander)`, event.delegateTarget)!.click();
    }
}

Adds only one new line (and doesn't break single-direction expanders). Tested in Firefox only.

There are 2 buttons here, so we could use a :after pseudo element on both in order to extend them.

Thought about it too, but pseudo-elements don't actually extend their parent's "clickable zone", since they have no real existence in the layout.

The thing is, I don't think there is a pure-CSS way to tell whether the mouse hovers on the top or bottom-half of an element. (Unless there's some kind of clever hack we could use…)

The trick I mentioned with :before would work but table stuff breaks a lot of CSS, including positioning.

I wonder if we can change the display of tr to flex without breaking the layout. That would allow the :before trick inside each link.