Replace primer.css with webext-base-css

[fregante]

Fixes #893 using webext-base-css and a little extra CSS.

• Restore error via inputField.setCustomValidity(error)

⬆️ I don't know how to tackle that, feel free to edit this PR.

[fregante]

The remaining lint error is deprecated:

##[error] 13:7 error Form label must have ALL of the following types of associated control: nesting, id jsx-a11y/label-has-for

[stefanbuck]

Thanks for the Pull Request @fregante. According to https://stackoverflow.com/a/21458090/2121324 .reportValidity() does the trick to force a revalidation. It's already quite late, but I can have a look myself tomorrow.

[stefanbuck]

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://

[fregante]

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.

[xt0rted]

This is what it looks like in Edge 83.0.478.10 (Official build) dev (64-bit) in Win10

This is the current published version in 81.0.416.53 (Official build) (64-bit) in Win10

[fregante]

.reportValidity() does the trick to force a revalidation.

I think that's the wrong one, you'll need .setCustomValidity because .reportValidity only reports the error... but the browser doesn't know the error.

We used .reportValidity() in RG: refined-github/refined-github@cb37f6d#diff-4bfcd665876550ba5b46897389349245L13

I just don't know how to integrate that with Preact 😅

[fregante]

This is what it looks like in Edge 83.0.478.10 (Official build) dev (64-bit) in Win10

Not too shabby! Only issues:

• drop width on html
• the dark color doesn't match

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.

[xt0rted]

This is it after the last update.

[xt0rted]

I also noticed the yarn.lock has some changes that weren't committed.

[xt0rted]

I ran yarn install in the root of the project. I'm new to yarn but that seems like all I needed to do.

[stefanbuck]

I think that's the wrong one, you'll need .setCustomValidity because .reportValidity only reports the error... but the browser doesn't know the error.

From my understanding you need both if your are not using proper form submission like we do. I'm on it now

[stefanbuck]

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 😉

[stefanbuck]

@fregante any thought on styling the success message different when using dark mode or not?

[fregante]

Instead of adding a new element above the field, what do you think about replacing the field description with:

✅ Token successfully saved.

• It doesn’t move the field down
• The green color is just given by the emoji, no need for further CSS

[fregante]

Should the default message be more specific? Like “The token could not be validated”

[stefanbuck]

Good point. Also the API response is not very descriptive Bad credentials in my opinion. Will change it later

[stefanbuck]

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

[fregante]

hide the input field without showing a back button

Hmm I didn’t suggest that, but replacing only the 1-line description below the field.

That looks good though

[stefanbuck]

I should read comments more carefully 😊

Thanks for this very nice collaboration