-
-
Notifications
You must be signed in to change notification settings - Fork 275
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Replace primer.css with webext-base-css #895
Conversation
The remaining lint error is deprecated:
|
Thanks for the Pull Request @fregante. According to https://stackoverflow.com/a/21458090/2121324 |
@@ -2,6 +2,7 @@ | |||
<head> | |||
<meta charset="UTF-8" /> | |||
<title></title> | |||
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you know if this is supposed to work in MS Edge as well? The readme of webext-base-css mentions just Firefox. I'm asking because it looks like they added their own protocol edge://
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, this only loads in Firefox. Firefox effectively doesn't support options.chrome_style
so thankfully this stylesheet fills in.
I don't know how it looks in Edge, but I assume it just matches Chrome.
I think that's the wrong one, you'll need We used I just don't know how to integrate that with Preact 😅 |
Not too shabby! Only issues:
The second point should be taken care by webext-base-css, but I don't think there's currently a way to target Edge via CSS like I do for Firefox. |
I also noticed the |
This comment has been minimized.
This comment has been minimized.
I ran |
From my understanding you need both if your are not using proper form submission like we do. I'm on it now |
this.tokenInputEl.setCustomValidity( | ||
response.message || 'Something went wrong', | ||
); | ||
this.tokenInputEl.reportValidity(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This solution is inspirited by https://github.com/developit/preact-mdl/blob/master/src/index.js#L873-L878 so it shouldn't be completely wrong 😉
@fregante any thought on styling the success message different when using dark mode or not? |
Instead of adding a new element above the field, what do you think about replacing the field description with:
|
}); | ||
this.tokenInputEl.setCustomValidity( | ||
response.message || 'Something went wrong', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should the default message be more specific? Like “The token could not be validated”
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. Also the API response is not very descriptive Bad credentials
in my opinion. Will change it later
The success message reserves some space in the layout to avoid form jumping when submitting. I tried out the other approach suggested by @fregante, but it felt wrong to hide the input field without showing a back button and at this point I decided for the simple approach |
Hmm I didn’t suggest that, but replacing only the 1-line description below the field. That looks good though |
I should read comments more carefully 😊 Thanks for this very nice collaboration |
Fixes #893 using webext-base-css and a little extra CSS.
inputField.setCustomValidity(error)
⬆️ I don't know how to tackle that, feel free to edit this PR.