1891590 - [toolbar redesign] Add fading away effect to the start of url in toolbar instead of the end

Status: ASSIGNED

(Fenix :: Toolbar, task, P3)

Description

[[:skhan]]

Attachment: Screen Shot 2024-04-15 at 11.25.45 AM.png

As attached in the screenshot, the task is to make the faded url appear at the start and domain name is focused. As mentioned here -> https://www.figma.com/file/8fsCvtnweBkWGZ9NfL907l/Toolbar-Redesign?type=design&node-id=5503-280191&mode=design&t=U4RHczHSXSggBo7A-4

Long URL :
When the URL is long, a linear gradient should be applied at the left-most part of the URL text box.
The domain will be at the end of the URL(on the right) and be always visible (depending on available space).
If the URL is long,
At first, the sub-domain will be hidden behind the gradient.
After the entire sub-domain has been exhausted and hidden, the domain will start to hide behind the gradient.

Comment 1

[Chris Peterson [:cpeterson]]

Setting toolbar redesign's Nightly blockers to priority P1.

Comment 2

[tchoh]

Attachment: Bug 1891590 Fading away effect at start and truncating start

Comment 3

[tchoh]

Objective:
This ticket focuses on enhancing URL display within our application by implementing a fading effect at the beginning of the URL and truncating longer URLs to improve readability and user experience.

Key Features:
Long URL Truncation: Automatically shorten URLs to highlight the top-level domain (TLD), ensuring it is always visible.
Front Fade Effect: Introduce a fading visual at the start of the URL when the length exceeds the display area.

Current Solutions:
Dynamic Measurement: Measure text length and adjust the view to start from the first visible position showcasing the TLD.
Character Limitation: Trim characters from the start that exceed the defined space in the URL display area (TextView).

Challenges and Concerns:
Maintenance and Scalability: The current solutions are complex and challenging to maintain due to the lack of native support for these features. Any changes in TextView or URL handling may require significant revisions to avoid disruptions.
Engineering Effort: The development of these features has required considerable research and testing to address both issues simultaneously, significantly increasing the engineering workload.
User Experience Considerations: Since similar functionality is uncommon in other applications, it might not align with typical user expectations, potentially impacting user experience negatively. Alternatively, we could consider deploying this feature as part of a controlled experiment to gather user feedback while noting the maintenance challenges due to its non-native integration.

Recommendation:
Further discussion is needed to evaluate the balance between the innovative aspect of these features and their long-term sustainability within our application architecture. Additional insights from UX studies and performance impact assessments would also be beneficial before proceeding with full-scale implementation.

Comment 4

[Aarjav [:aarjav]]

I had a chat with Tim and Roger, here is the proposed solution:

• Use native ellipsis behaviour for the URL truncation in front of the URL.
• Add the colour gradient on top of it.