results.webkit.org: Move drawer to the right, open by default

[Jonathan Bedard]

After discussing the drawer with bot watchers, we need to make some changes so that the drawer is more discoverable.

[Jonathan Bedard]

Created attachment 376877 [details]
Patch

[Jonathan Bedard]

Created attachment 376880 [details]
new-closed-drawer

[Jonathan Bedard]

Created attachment 376881 [details]
new-open-drawer

[Jonathan Bedard]

Created attachment 376882 [details]
old-closed-drawer

[Jonathan Bedard]

Created attachment 376883 [details]
old-open-drawer

[Jonathan Bedard]

Created attachment 377004 [details]
Patch

[Jonathan Bedard]

As it turns out, this is horribly broken on mobile...working on a fix for that.

[Jonathan Bedard]

Created attachment 377171 [details]
Patch

[Jonathan Bedard]

Created attachment 377286 [details]
Patch

[Zhifei Fang]

Comment on attachment 377286 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=377286&action=review

> Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js:127
> +        const zIndex = parseInt(document.defaultView.getComputedStyle(drawerRef.element, null).getPropertyValue('z-index'), 10);

Use media query in the css is better than hacking into the resize event

> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:-959
> -    display: block;

A better solution here is we keep it’s off. Use same media query to let the menu button show when on mobile. Then you will have an always true assumption that the initial state for the sidebar is off when the menu button displays.

> Tools/resultsdbpy/resultsdbpy/view/templates/base.html:37
> +        <button class="button" style="display: none; float: right" id="drawer-button">â°</button>

i think we better to put this at the beginning of the tittle, add a media query to control it is showing or not. You may also need to let the title no-wrap and overflow hidden

> Tools/resultsdbpy/resultsdbpy/view/templates/documentation.html:509
> +            const zIndex = parseInt(document.defaultView.getComputedStyle(element, null).getPropertyValue('z-index'), 10);

Seems we are using z-index to determine the initial status. You can always use media query to do so.
Besides, i think we will always show the sidebar until we on the mobile, we can do the same for the menu button just like my comment above

[Jonathan Bedard]

Created attachment 377404 [details]
Patch

[Zhifei Fang]

Comment on attachment 377404 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=377404&action=review

> Tools/resultsdbpy/resultsdbpy/view/templates/base.html:41
> +        <button style="width: 10%" class="button mobile-sidebar-control">â°</button>

I think the button can have a fix width, like use var(--smallSize), then the title width can be calc(100% - var(--smalSize)); This will keep the button is a good looking.

[Jonathan Bedard]

Created attachment 377407 [details]
Patch

[Zhifei Fang]

Comment on attachment 377407 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=377407&action=review

> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:890
> +:root {

Could you move this to top :root definition ?

[Zhifei Fang]

(In reply to Zhifei Fang from comment #14)
> Comment on attachment 377407 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=377407&action=review
> 
> > Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:890
> > +:root {
> 
> Could you move this to top :root definition ?

unofficially r=me

[Aakash Jain]

Comment on attachment 377407 [details]
Patch

rs=me

[Jonathan Bedard]

Created attachment 377463 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 377463 [details]
Patch

Clearing flags on attachment: 377463

Committed r249213: <https://trac.webkit.org/changeset/249213>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/54803179>