Bug 1492018: Use .blockIndicator for styling {{SeeCompatTable}}

[ExE-Boss]

This is a follow‑up to mdn/kumascript#788, which added the standard .overheadIndicator class to the {{SeeCompatTable}} macro.

Depends on #4979

[jwhitlock]

Thanks @ExE-Boss.

Kuma changes require a Bugzilla ticket. I think we can reuse https://bugzilla.mozilla.org/show_bug.cgi?id=1486527, seems related to snugging.

I searched for a page where this would make a difference. https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance looked like a good candidate. However, it looks snugged already in Safari, and the change in PR #4961 will fix it for Chrome and Firefox (to be deployed today). Do you know of a page where this change will make a difference?

[ExE-Boss]

This isn’t necessary for indicator snugging.

It’s necessary to be able to remove the notice class from the {{SeeCompatTable}} macro.

See mdn/kumascript#788 for details.

[jwhitlock]

There's no mention of notice on mdn/kumascript#788, maybe you mean #4884 (comment) ? Should this PR remove some .notice rules as well then? And, do you have a page where all this matters?

[ExE-Boss]

I meant specifically commit mdn/kumascript@d0c3a47.

Once this is merged, I can make a follow-up to mdn/kumascript#788, where I’d remove the notice class from the {{SeeCompatTable}} macro.

[ExE-Boss]

review?(@jwhitlock): I’d say this is ready for review.

[jwhitlock]

I think I'm the wrong person to review this. I can review style changes if you are trying to fix something that I can see on a particular page on MDN, because I can load the page in my browser before and after the change and see what the effect is. I'm not aware of any pages that this change would make a visual difference on.

This appears to be a refactoring of classes for some quality goal in the CSS source, which isn't clear to me. I think @schalkneethling or @hobinjk are better suited to review.

[ExE-Boss]

I'm not aware of any pages that this change would make a visual difference on.

This is necessary for mdn/kumascript#830 (diff).

Without this, if mdn/kumascript#830 is merged to production as is, any usage of the {{SeeCompatTable}} macro will suddenly be blue instead of yellow, as the yellow colour is currently set using the .notice class, and not the .experimental class, which is set to blue because it’s needed to be blue by {{Experimental_Inline}} (which uses <span class="inlineIndicator experimental"></span> for the styling).

[jwhitlock]

@schalkneethling or @hobinjk, please take a look when you have a chance. There's several PRs in the same topic, and I've documented my understanding of the issue.

I'd also support closing this and related PRs, it is hard for me to justify spending more time on what appears to be low-priority cleanup work.

[schalkneethling]

As mentioned, it would be super useful if you could merge the work here into #4979

[ExE-Boss]

I have now locally developed a better solution than this.