UX improvements to browser profile editing & creating view #1815
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
SuaYoo
changed the title
emma-sg
requested changes
May 23, 2024
Co-authored-by: Emma Segal-Grossman <[email protected]>
Shrinks99
reviewed
May 24, 2024
| </p> | ||
| <div class="py-2 text-center"> | ||
| <sl-button size="small" @click=${this.onClickReload}> | ||
| <sl-icon slot="prefix" name="arrow-clockwise"></sl-icon> |
There was a problem hiding this comment.
Would prefer to use "re-connect" instead of "reload" as the page isn't being reloaded and reloading can lead to data loss in other apps / contexts. Here it should continue the session, right?
Suggested change
| <sl-icon slot="prefix" name="arrow-clockwise"></sl-icon> | |
| ${msg("Reconnect to Browser")} |
There was a problem hiding this comment.
No, if the session has ended, it will need to reload the browser, which can lead to data loss, but that's the only thing we can do.
| <btrix-alert variant="danger"> | ||
| <p> | ||
| ${msg( | ||
| `Interactive browser is offline. Waiting to reconnect...`, |
There was a problem hiding this comment.
The other suggestions would be in-line with this copy, which is good!
Co-authored-by: Emma Segal-Grossman <[email protected]>
Co-authored-by: Henry Wilkinson <[email protected]>
Co-authored-by: Henry Wilkinson <[email protected]>
Co-authored-by: Henry Wilkinson <[email protected]>
ikreymer
approved these changes
May 27, 2024
ikreymer
added a commit
that referenced
this pull request
May 30, 2024
Follow up to #1815 - Improved detection / responsiveness to unavailable browser - Disable Save buttons when browser disconnected / unavailable - Only add unload handler when browser is available - Consistency between new and edit views: new profile view also has cancel button with confirmation - Don't show cancel confirmation if browser is already unavailable. Various text tweaks for consistency / accuracy: - Save New Profile... to indicate new profile will be saved after dialog - Load new browser to indicate new browser will be created - Mention connection to browser is lost in disconnected message. Also: migrated to LiteElement -> TailwindElement for browser-profiles-new ------- Co-authored-by: emma <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #438
Changes
profile-browserintoTailwindComponentManual testing
a. Fill form
b. Click "Configure Browser Profile". Verify "Interactive Browser" loads with website
c. Scroll up and down page. Verify "Finish Browsing" control bar is visible while interactive browser is visible
d. Open dev tools and switch to offline mode. Verify alert message is shown
e. Wait until screen turns gray and then switch back to online mode. Verify "Reload" button is shown
f. Click "Reload". Verify browser profile URL is reloaded
g. Click "Finish Browsing" and save. Verify profile saves as expected
Screenshots
Follow-ups
UX improvements to the browser profile detail layout and list view will be handled in #1816