Rocketbar width fixes when minimized

RESOLVED WONTFIX

Status

Firefox OS
Gaia::System::Browser Chrome
RESOLVED WONTFIX
4 years ago
5 months ago

People

(Reporter: kgrandon, Assigned: kgrandon)

Tracking

({polish})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Assignee)

Description

4 years ago
This is a dupe of something, but I'm not sure what. Would like to finally get this fixed though.
Created attachment 8556743 [details] [review]
[PullReq] KevinGrandon:bug_1127571_rocketbar_width_fixes to mozilla-b2g:master
(Assignee)

Comment 2

4 years ago
Comment on attachment 8556743 [details] [review]
[PullReq] KevinGrandon:bug_1127571_rocketbar_width_fixes to mozilla-b2g:master

I would imagine that we take a slight performance hit for this, but I think the bigger URLbar is worth it - right now it's just way too small if you have control buttons enabled. Could one of you guys take a look here? Thanks!
Attachment #8556743 - Flags: review?(etienne)
Attachment #8556743 - Flags: review?(chrislord.net)
(Assignee)

Updated

4 years ago
Keywords: polish

Comment 3

4 years ago
Comment on attachment 8556743 [details] [review]
[PullReq] KevinGrandon:bug_1127571_rocketbar_width_fixes to mozilla-b2g:master

I don't notice the jank in a quick test, but I'd be worried it'd contribute when the phone is bogged down, especially as the animation can be triggered too easily right now (another polish bug I've been meaning to file/fix...)

The disappearance of the controls is noticeable and jarring though, I'd really prefer to get a decent transition here rather than doing this.

However, this r- is mainly because it breaks layout when there are no back/forward buttons visible. (open up the browser and scroll down on that page, and indeed on the first page loaded after opening the browser).
Attachment #8556743 - Flags: review?(etienne)
Attachment #8556743 - Flags: review?(chrislord.net)
Attachment #8556743 - Flags: review-

Comment 4

4 years ago
How I imagine doing the transition:

The background of the text in the rocketbar (the bubble) is split into three elements, start, middle and end. The middle is actually only a 1 pixel wide, solid-coloured block and we use a scale transform to grow to the correct size. We use a translate transform to keep the end of the bar in sync with the middle (these elements will all need to be absolutely positioned to a relative box at the start of the bubble).

The width of the text will be set on transitionend when shrinking and immediately when growing (as it can be shorter when in the expanded state, so we don't want it to ever go over the end of the bubble and we don't want to be changing the width during the transition).

Structure-wise, it'd look like:

<div id="rocketbar-background">
  <div class="start"></div>
  <div class="middle"></div>
  <div class="end"></div>
  <span class="text"></span>
</div>

Where #rocketbar-background is position-relative, .start, .middle and .end are position:absolute and the entire size would be determined by .text and any padding/margin/etc. JavaScript would be necessary to size the middle and position the end, but we already have hook points as the transition is triggered by javascript anyway.


The homescreen app-grouping expand/collapse transition does a very similar thing (including the end-cap, though no start-cap). A nice side-effect is that you end up saving a bit as the centre block will be optimised to a ColorLayer (which is cheaper on memory and theoretically cheaper to draw - though the context switch to draw it and its tiny size likely mean there's no difference at all... Or perhaps even a slight negative one...)
(Assignee)

Comment 5

4 years ago
(In reply to Chris Lord [:cwiiis] from comment #3)
> Comment on attachment 8556743 [details] [review]
> [PullReq] KevinGrandon:bug_1127571_rocketbar_width_fixes to
> mozilla-b2g:master
> However, this r- is mainly because it breaks layout when there are no
> back/forward buttons visible. (open up the browser and scroll down on that
> page, and indeed on the first page loaded after opening the browser).

Doh, I definitely fixed that, but must've forgotten to push!

I agree that it would probably be better with a transition, so I'll experiment with that a bit before re-opening this for review.

Comment 6

5 months ago
Firefox OS is not being worked on
Status: ASSIGNED → RESOLVED
Last Resolved: 5 months ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.