Wp-calypso: Review/remove usages of moz-document url-prefix() hack

[jsnajdr]

There are several CSS rules like this:

@-moz-document url-prefix() {
  .firefox .specific {
    override: 1px;
  }
}

That are supposed to be understood and interpreted only by Firefox.

According to this article the hack has stopped working some time ago:
https://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do

Found when reviewing #32386.

[trey]

It looks like url-prefix was supposed to be working longer than other @-moz-document rules, but it is being phased out according to this post.

However, I am still able to get styles to work in Firefox 67.0beta (Developer Edition) inside of a @-moz-document url-prefix('') { ... } block.

I'd be happy to submit a PR removing the two instances I found using those rules, but I'm uncertain how to be sure that it doesn't have any undesired side-effects.

---

What I found:

1. https://github.com/Automattic/wp-calypso/blob/master/client/blocks/reader-full-post/_content.scss#L266-L269

2. https://github.com/Automattic/wp-calypso/blob/2876e3b5e350d507621c1a177604b6dc5b5d79bc/client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/packages-step/style.scss#L121-L126

[jsnajdr]

The url-prefix hack works only when the layout.css.moz-document.url-prefix-hack.enabled pref is set to true. The default value is true on Release channel, so it still works for most mainstream users.

The default is false on Beta/Nightly channel and as a Nightly user, I can confirm that the styles inside the @-moz-document block are ignored.

I'd be happy to submit a PR removing the two instances I found using those rules, but I'm uncertain how to be sure that it doesn't have any undesired side-effects.

Both instances (Reader and Woo) use it to workaround a behavior difference between Firefox and Chrome. The best fix would be to change the code to work correctly across all browsers.

[trey]

Weird, I was able to see styles in @-moz-document in 67.0beta as I mentioned.

I understand if it’s out of scope to explain this in more detail to a complete noob, but if I could understand how to get to those two places in my local environment, I’d love to help. I’m just at the point of getting Calypso running locally and that’s about it. :) If it is too much to explain this in detail, I will pick up another #good-first-issue!

[trey]

Ok, it's definitely gone as of 68.0b1.

https://codepen.io/trey/pen/arBYxx

[jsnajdr]

Ok, it's definitely gone as of 68.0b1.

That's only because v68 is now Nightly. Once it gets released, the hack will be enabled again. This way the Firefox team can test compatibility and broken sites with Nightly and Beta users and keep the Release version compatible.

I understand if it’s out of scope to explain this in more detail to a complete noob, but if I could understand how to get to those two places in my local environment, I’d love to help.

The first one is in the "Discover" section of Reader, showing the posts from our Discover blog with custom styles. I can't get my Reader to show an .intro section though. It seems it shows me only excerpts in Reader, not the full posts. Maybe @bluefuton or @blowery can help here?

The second one is in Woo Store. #23322 has detailed info including screenshots. You need a paid plan to get a site with Woo Store though. If you tell me your WordPress.com username, I can add you to my testing site with this feature.

[trey]

Great, thank you! My username is treylabs.

[trey]

When I try to go to Store from the Calypso sidebar, I get this message:

Howdy! It looks like your store is located in a country that we can not fully support in this interface. Store setup and management will take place in wp-admin, our classic admin interface. We are actively working on adding broader support and we'll let you know when you can manage your store here!

Am I looking in the wrong place?

[jsnajdr]

@trey This particular UI is available only to customers in US and Canada and uses your geolocation I think. To make if work in locally running Calypso, you can patch the isStoreManagementSupportedInCalypsoForCountry selector to always return true. Let me know if that works for you.

[trey]

Changing that worked, thanks! I don't know why it wasn't working, though. I'm in the US.

[trey]

Well, I'm stuck again. I can't figure out how to get to the screen referenced on that ticket. I've added a sample product, created a "package," and even submitted a test order, but I can't figure out how to get to a page where you can assign a product to a package.

[jsnajdr]

In the store settings, the "Shipping Labels" service needs to be enabled. Then the order fulfillment flow has an extra step: modal dialog to create and assign labels. The modal has a "Packages" section that contains the "Total Weight" field we're looking for :+1:

Don't worry about getting lost or stuck in the Woo Store: it's a complex UI with many settings and screens.

[trey]

I can see the form now! You must have _just_ changed something before I started looking because I couldn't see it the first time I looked this morning. Thanks!

I'll have a draft PR for the WooCommerce part of the fix pushed up momentarily.

[trey]

Ok, as you can see, I've created a draft PR. I'm still uncertain how to do the other part of this fix with the "Discover" section of Reader.

I was tempted to add the WooCommerce fix here, but I'm uncertain how to verify that there would be no unintended side effects. https://github.com/Automattic/wp-calypso/blob/fbf86b24af35cb6882a590063252d80d95dd62cf/client/components/forms/form-text-input-with-affixes/style.scss#L14-L18

[bluefuton]

Thanks for looking at this @trey! An example Discover post that style is applied to is:

https://wordpress.com/read/blogs/53424024/posts/37036

Not all Discover posts have an .intro.

[trey]

Thanks, @bluefuton! I can see what I'm dealing with now.

[jsnajdr]

You must have just changed something before I started looking

Yes, that's exactly what I did 😄 I went to the store's "Settings" section and enabled "Shipping Labels". Then the new UI started to be shown.

To test your patches in Firefox, you can open about:config and toggle the layout.css.moz-document.url-prefix-hack.enabled on and off. There should be a difference in rendering if the Firefox-specific styles are still needed.

[trey]

Just FYI, I've marked the linked PR as ready for review. It should fix all the issues with removing the hacks.