Follow-up of #7547 (Update the top panel)

[luixxiul]

Closes #7739

Auditors:

Test Plan:

Test case 1 - default status

1. Clear your profile
2. Start the browser
3. Make sure that the area between the URL bar and the tabs bar is draggable

Test case 2 - text only
4. Open https://github.com/ in a new tab
5. Open https://github.com/features in a new tab
6. Open https://github.com/explore in a new tab
7. Open https://github.com/pricing in a new tab
8. Display the bookmark toolbar
9. Bookmark them by dragging the lock icon on the URL bar to the bookmark toolbar
10. (Not on Windows) Make sure that the area between the bookmarked items and the URL bar is draggable
11. (Not on Windows) Make sure that the area between the bookmarked items and the tabs bar is draggable

Test case 3 - text only with tab sets
12. Open about:preferences#tabs
13. Set the number of tabs per tab set to 6
14. Open several new tabs to create another tab page
15. Narrow the window size to place the tab page indicators under the bookmarked items
16. (Not on Windows) Make sure that the area between the tab page indicators and the bookmark bar is draggable (the tiny area between the indicators is NOT draggable)
17. Make sure that the area between the tab page indicators and the tabs bar is draggable

Test case 4 - text and favicons with tab sets
18. Open about:preferences
19. Change "Text only" to "Text and Favicons"
20. Repeat the step 16 and 17
21. Close several tabs to clear the 2nd tab set
22. (Not on Windows) Make sure that the area around the bookmarks is draggable

Test case 5 - only tab sets
23. Hide the bookmark toolbar
24. Make sure that the area around the tab page indicators is draggable

Test case 6 - favicon only with and without tab sets
25. Bookmark several other GitHub pages
26. Open about:preferences
27. Change "Text and Favicons" to "Favicon only"
28. Change window size to place the tab page indicators under the bookmark favicons
29. Repeat the step 16 and 17
29. Close tabs to clear the 2nd tab set
30. (Not on Windows) Make sure that the area around favicons is draggable

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

Test Plan:

[jamesmudgett]

Looking better. Think the bottom spacing on the bookmarks seems off if the page indicators are hidden, would suggest:

• Update to have equal spacing between address bar and tabs change margin-bottom: 5px to margin-top: 5px on .bookmarksToolbar.
• Set .tabPages padding to padding: 5px 0 5px to give space between page indicator and bookmarks bar.
• Finally, correct spacing on address bar by setting margin-top: 7px instead of 1px and remove the height: 36px on .navigatorWrapper properties.

[jamesmudgett]

Final result should look like this:

[luixxiul]

Updated with some other tweaks, focusing on draggability.

Also I updated the test plan in the 1st post.

[bsclifton]

I just saw this (image attached)

You can enable the bookmarks toolbar, but it doesn't take up the full space. After dragging an item to it (which is a little trickier, since you have to guess where)... it resizes itself

(edit: because it's a GIF and palette is limited to 256 colors, please ignore the dithering taking place in the image)

[luixxiul]

Thanks, I'll take a look.

[luixxiul]

It is because of the margin-bottom of URL bar, specifically .navigatiorWrapper.

[luixxiul]

Updated. It looks hacky a bit and also it is not compatible with Aphrodite for now, still it works better.

The modification based on the feedback by @bsclifton is covered with the Test case 2 in the 1st post of this PR, which is also updated.

[NejcZdovc]

I noticed that right border is flickering when you are resizing. For width/2+1 is working ok, but for width/2, border is smaller

[luixxiul]

@NejcZdovc I see the same thing on master as well.

[NejcZdovc]

@luixxiul Can you fix it in this PR as well?

[luixxiul]

Sorry, I don't know how to.

[NejcZdovc]

@luixxiul You can try something like this:

 less/navigationBar.less | 2 --
 1 file changed, 2 deletions(-)

diff --git a/less/navigationBar.less b/less/navigationBar.less
index fc6e272..25e1217 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -725,8 +725,6 @@
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
-      opacity: 0;
-      animation-fill-mode: forwards;
     }

[bsclifton]

Changes look good to me! I tried on macOS and Windows. The only feedback I have: on Windows, that area (specified in the test steps) is not draggable. This is because it needs to be right clickable (for the context menu). Windows can't have both. Can you please update the test steps to instead maybe say "try right click on Windows" or similar?

Otherwise, looks great! 😄

[cezaraugusto]

LGTM