1368317 - Sidebar splitter overlaps web content when moving the sidebar to the right

Status: VERIFIED FIXED

(Firefox :: General, defect, P1)

Description

[Dão Gottwald [:dao]]

The sidebar splitter is rendered 1px wide but actually wider to be a viable mouse target. The transparent part of the splitter is supposed to overlap the sidebar rather than the content area, as making part of the web content inaccessible is a no-go.

The splitter being on the right is supposed to be handled by this code:

http://searchfox.org/mozilla-central/rev/596d188f6dbc8cb023e625f0a4310d184875f8fc/browser/themes/shared/sidebar.inc.css#32-37

Since bug 1355331 used the ordinal attribute to move the sidebar, this doesn't work. I would again suggest moving the DOM nodes instead. This has the added benefit of removing a dependency on special XUL features that we may want to get rid of some day.

Comment 1

[Brian Grinstead [:bgrins]]

(In reply to Dão Gottwald [::dao] from comment #0)
> Since bug 1355331 used the ordinal attribute to move the sidebar, this
> doesn't work. I would again suggest moving the DOM nodes instead. This has
> the added benefit of removing a dependency on special XUL features that we
> may want to get rid of some day.

We can use the CSS 'order' property if this is converted to CSS flexbox.  Moving the DOM node would cause the <browser> in the sidebar to reload and lose the user's state

Comment 2

[:Gijs (he/him)]

Attachment: Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

Review commit: https://reviewboard.mozilla.org/r/149050/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/149050/

Comment 3

[Brian Grinstead [:bgrins]]

Comment on attachment 8877572 [details]
Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

https://reviewboard.mozilla.org/r/149050/#review153554

::: browser/themes/shared/sidebar.inc.css:29
(Diff revision 1)
>    margin-inline-start: -3px;
>    position: relative;
>  }
>  
> +.sidebar-splitter[overlapend],
>  #appcontent ~ .sidebar-splitter {

Is there a time when `#appcontent ~ .sidebar-splitter` is true?  This was copied in from the various browser.css files in https://bugzilla.mozilla.org/show_bug.cgi?id=1355324 but I'm not sure that either appcontent or the splitter is moved in the DOM.

Comment 4

[:Gijs (he/him)]

(In reply to Brian Grinstead [:bgrins] from comment #3)
> Comment on attachment 8877572 [details]
> Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the
> end-side of the window (rhs in ltr),
> 
> https://reviewboard.mozilla.org/r/149050/#review153554
> 
> ::: browser/themes/shared/sidebar.inc.css:29
> (Diff revision 1)
> >    margin-inline-start: -3px;
> >    position: relative;
> >  }
> >  
> > +.sidebar-splitter[overlapend],
> >  #appcontent ~ .sidebar-splitter {
> 
> Is there a time when `#appcontent ~ .sidebar-splitter` is true?  This was
> copied in from the various browser.css files in
> https://bugzilla.mozilla.org/show_bug.cgi?id=1355324 but I'm not sure that
> either appcontent or the splitter is moved in the DOM.

AFAICT this was for social sidebars and they were removed in bug 1289549. I'll remove that part of the selector.

Comment 5

[:Gijs (he/him)]

Comment on attachment 8877572 [details]
Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/149050/diff/1-2/

Comment 6

[:Gijs (he/him)]

Comment on attachment 8877572 [details]
Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

https://reviewboard.mozilla.org/r/149050/#review153956

Comment 7

[:Gijs (he/him)]

Comment on attachment 8877572 [details]
Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

https://reviewboard.mozilla.org/r/149050/#review153958

Big green buttons aren't always the ones I want. :-(

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/603c076c05e5
fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr), r=bgrins

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/603c076c05e5

Comment 10

[:Gijs (he/him)]

Comment on attachment 8877572 [details]
Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

Approval Request Comment
[Feature/Bug causing the regression]: bug 1355331
[User impact if declined]: part of the website can't be clicked or interacted with using the mouse when the sidebar is moved to the right
[Is this code covered by automated tests?]: no, styling issue
[Has the fix been verified in Nightly?]: not yet
[Needs manual test from QE? If yes, steps to reproduce]:
1. open firefox
2. open sidebar (e.g. hit accel-b to open the bookmarks sidebar)
3. using the menu in the sidebar header, move the sidebar to the right
4. hover/click the mouse next to the edge of the sidebar. The website should remain responsive right up to the edge of the sidebar.
[List of other uplifts needed for the feature/fix]: n/a
[Is the change risky?]: no
[Why is the change risky/not risky?]: very simple styling change
[String changes made/needed]: nope

Comment 11

[Julien Cristau [:jcristau]]

Comment on attachment 8877572 [details]
Bug 1368317 - fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr),

sidebar styling fix, beta55+

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/66c52ae642d2

Comment 13

[Abe - QA (:Abe_LV)]

I verified this as fixed as suggested in comment 10. Latest nightly is used for testing.
Updating the bug accordingly.