Browser-laptop: Improve UI/UX of bookmark popup

[bradleyrichter]

The current bookmark popup appears in the center of the BM bar and has that "not finished" look.

Let's improve the styling and UX with this design:

• The editable field for the path should not be necessary as the user can either edit it before pressing the BM button, or edit it later. (we can gauge feedback or add a method later)
• the name of the BM should be taken from the page title (if existing) and open as selected so typing can begin
• the bookmark is created when the Add button is pressed, but this dialog allows the user to append changes in the form of the text or location
• if the location is changed, the BM must actually be moved
• remove will remove the BM, uncheck the BM icon and close the dialog
• Done accepts and closed the dialog with info as shown
• close-button = done
• the default folder is the Bookmarks toolbar
• a "View all bookmarks" link/button on the bottom provides a shortcut to the bookmarks manager. (about:bookmarks)
• the popup should open at the location of the bookmark button
• address keyboard navigation flow as described below by @neeklamy
• recall last use folder after initial default to Bookmarks Bar

(note: the UI behind the popup in this image will be specified in a separate issue)

Part 2 of this UI task is to extend the component for use as the bookmark edit dialog. It should appear at the actual bookmark which is being edited on the BM bar.

• size extends to make room for the URL field
• title changes to "Edit Bookmark"
• button text changes to "Cancel/Save"

cc @bsclifton

[qvtqht]

I disagree that the editable field for the path is not necessary. I clean up the URL I'm adding often, and get quite annoyed at browsers that don't allow this in the add-bookmark dialog.

If the field is not there, then I have to break my flow to find the bookmark, wherever it may be, open the edit dialog, and only then edit and save it.

Agree with the other points, especially that the dialog should be located under the "star" button.

[bradleyrichter]

@gulkily Thanks for the honest feedback. It does seem that browsers vary in this regard.

@bbondy Is there any way to allow the URL field to stay editable while the bookmark hanger is open? I am trying to avoid the complete duplication of the URL string, and keep the popup minimal and easy.

There may be a side effect that would need quick testing.

[qvtqht]

One more thought:

no bookmark is actually made until the Add button is pressed

This goes against the traditional add-bookmark behavior that is triggered by the "Bookmark Page" or "Add Bookmark" menu item usually bound to Ctrl+D/Cmd+D, where the bookmark is added immediately.

Changing this behavior will either require a different behavior between "click the star button" and "use the menu item/keyboard shortcut" or break a standard workflow that goes back to the 90s.

[bradleyrichter]

Yep. Let's stay with history, and iterate elsewhere to improve bookmarking in general.

[bradleyrichter]

If anyone is curious, here is how the other browsers do it:

Chrome, FIrefox and Opera set the bookmark and let you undo it.

Safari and VIvaldi seem to treat it like a dialog that can be canceled.

Make sense to me to follow the leaders on this one.

Also, Chrome allows editing the URL in a second, less organized dialog.

Vivaldi might allow it inline. The rest don't seem to allow it.

[neeklamy]

Some thoughts.

• On the default folder, I _really like_ how Safari and Google Chrome both remember the last used folder.
• Keyboard navigation would be nice too, so a workflow like this:
  
  
  
  1. Command-D,
  
  
  2. Edit the bookmark name,
  
  
  3. Tab
  
  
  4. Type first few letters of a different folder, folder is selected,
  
  
  5. Enter
  
  
  6. Popup closes. Hitting Enter at any point, whichever input is key, should finalise the bookmark and close the popup.
  
  

[bradleyrichter]

@neeklamy Great addition. Thanks for the descriptive steps. I'll note them above.

[rohanthacker]

This UI looks great, I'm trying to implement the same,
Edit : After reading through the src, its just a css class for the dropdown?

@bradleyrichter I've put down some css for the above design, I hope it would it be of use to the brave team.
Initial implementation of the above styles

[bradleyrichter]

@jkup Jon - it would be great if you can look at @rohanthacker 's fork and refine/merge as needed.

cc @bbondy

[jkup]

Happy to!

[bradleyrichter]

I added a panel variation to be used for editing boookmarks from the BM bar. ^^

[bbondy]

The edit bookmark variation should also be used when adding a bookmark not for a specific page, for example right click the bookmarks toolbar and add bookmark. I think in that case it would be centered though.

[rohanthacker]

@jkup Hey Jon - This is the link to the changes

As of now I've not been able to figure out how icons are used, and how to updated the Strings that are used in the l10n prop.

[lucidNTR]

i hope i did not miss this but i would really like to only see the enabled delete button when the page is actually a bookmark. this confuses me in the current master behavior. (what does delete do if the page is not a bookmark?)

[bradleyrichter]

@lucidNTR That will happen with the new design. Thanks for the note.

[jkup]

Hey @rohanthacker this looks great! Any chance you can rebase your commit and submit a PR? I'll happy test it out and merge it in!

[rohanthacker]

@jkup I'd be happy to however, I hit a small roadblock with the drop-down menu. Please do see #3282

[bbondy]

@jkup I'm not sure if you're finishing off some ledger stuff, but otherwise pls work on this in the 0.12.6 timeframe. Thanks!

[srirambv]

@bradleyrichter part 2 of what you have mentioned is not how the current behavior is

This is the current behavior

[bradleyrichter]

since the code was using the same dialog for all cases, we now need to make a new centered modal to accommodate the other uses.

when adding a folder:

when adding a new BM when no URL is present to start with:

So to summarize, the door hanger should only open at the BM star button or at the BM toolbar when it is relevant. Otherwise, it should open as a modal with correct titles based on activity.

[bsclifton]

Solution provided in https://github.com/brave/browser-laptop/pull/5118 doesn't quite look this good, but it's close :smile: (screenshots posted in the PR)

[bradleyrichter]

@jkup you mentioned this needs more time. Did you have an estimate? LMK if we should track it separately in asana.

On Oct 21, 2016, at 4:32 AM, Sriram Bellur Venkataram [email protected] wrote:

@bradleyrichter part 2 of what you have mentioned is not how the current behavior is

This is the current behavior

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[bsclifton]

@bradleyrichter what's left? do you mean the additional styles you show in the screen caps above? (blue around text box, down arrow under the name box, etc)