Platform icons missing on Firefox build

[Luckz]

Steam Store pages don't show the platform icons above the Add to Cart button. Somehow HTC Vive is immune, see http://store.steampowered.com/app/610680/Starway_Fleet/ as an example.

http://ft.trillian.im/c27ecec70eb02d421b83464ad07d3abe9ef772fe/6Tda4Lc89ervzd8AA9NGmI6ZGu9Pc.jpg

[Corben78]

Looks like the (relative) URL for the background image is not working.

Without Enhanced Steam the css defines:

background-image: url( '/public/images/v6/icon_platform_linux.png' );

With Enhanced Steam:

background-image: url( '//steamstore-a.akamaihd.net/public/images/v6/icon_platform_linux.png' );

When I change in firefox webdev tools the css to match the original css, (removing //steamstore-a.akamaihd.net), the image still cannot be loaded (moz-extension://d4e12e0c-15b1-40b3-9b23-8de873b0e284/public/images/v6/icon_platform_linux.png could not be found). When I put http: in front of it, it works:

background-image: url( 'http://steamstore-a.akamaihd.net/public/images/v6/icon_platform_linux.png' );

Don't know how to handle this properly in the css of enhanced steam, so it shows a relative path. But with an absolute URL it works.

With Chrome it seems that the css definitions for span.platform_img.linux are ignored from enhancedsteam.css. The active css shown is store.css from store.steampowered.com, the lines from enhancedsteam.css are strucked out and it says injected stylesheet next to it.

[c12h]

The problem is css/enhancedsteam.css, at lines 15-42, which were added in 2013 ("Adds platform icon to wishlist page games" - commit a2abd7d). These CSS rules affect both app pages and wishlists, presumably to ensure consistency. The lines specifying icons were changed last February ("Fixed mixed content warnings" - commit 7a8a93a). Unfortunately, the latter fix does not work under Firefox, in which URLs in CSS rules get expanded relative to moz-extension://… rather than the document's URL.

We could get the icons back on app pages by making these CSS rules only apply on wishlist pages. This can be done by inserting span.es_platform > at the start of every selector, like this:

span.es_platform > span.platform_img.win {
    background-image: url( '//steamstore-a.akamaihd.net/public/images/v6/icon_platform_win.png' );
}

AFAICS, getting the icons back on wishlist pages requires browser-dependent URLs: //steamstore-a.akamaihd.net/… on Chrome, https://steamstore-a.akamaihd.net/… on Firefox. (This forces the icons to be fetched via HTTPS even when viewing a wishlist via HTTP, but that's not a major problem and I cannot see how to avoid it.) Perhaps we should just have different versions of css/enhancedsteam.css for Enhanced_Steam and Enhanced_Steam_Firefox?

[c12h]

Workaround Here is a somewhat ugly fix for this problem. It uses a file named userContent.css in your Firefox profile, so first you have to find your Firefox profile directory. (If you don't know how to do that, open the address "about:support" in a new Firefox tab, then click on the "Open Directory" button in the "Application Basics" section to get a file manager window in which the directory with the gobbledygook name is your profile directory. Open that directory.)

1. See if the profile directory has a folder named "chrome". If not, create one, using only lower-case letters (no capital letters).
2. If you have a file named userContent.css there, edit it. If not, create it. (Only one capital letter.)
3. Copy and paste the CSS shown below into your userContent.css and save the edits.
4. Restart Firefox.

   @-moz-document  domain(store.steampowered.com), domain(steamcommunity.com)
   {
   span.platform_img.steamplay {
   background-image: url( 'https://steamstore-a.akamaihd.net/public/images/v6/icon_steamplay.png' ) !important;
   }
   span.platform_img.win {
   background-image: url( 'https://steamstore-a.akamaihd.net/public/images/v6/icon_platform_win.png' )  !important;
   }
   span.platform_img.mac {
   background-image: url( 'https://steamstore-a.akamaihd.net/public/images/v6/icon_platform_mac.png' )  !important;
   }
   span.platform_img.linux {
   background-image: url( 'https://steamstore-a.akamaihd.net/public/images/v6/icon_platform_linux.png' ) !important;
   }
   }

[Corben78]

I'm not sure if jshackles is monitoring this repo or its issues at all.

As the readme.md states:

This repository will serve as an installation point and code repository, but all pull requests for Enhanced Steam should be submitted to the Chrome repository.

So maybe it's better to continue the discussion on https://github.com/jshackles/Enhanced_Steam/issues/1431

[c12h]

Thanks, Corben78. I'm new to github as well as Enhanced Steam, so I'm making mistakes. (I just created Pull Request #115 in this repository when I meant to create one in my own fork.) Perhaps it's better if jshackles doesn't see my stuff until I've had a day or two to check it carefully!

[jshackles]

We created a CSS file specifically for Firefox in the main repository, called enhancedsteam-firefox.css in the CSS folder. Since Mozilla keeps changing how these relative paths load, I believe your idea of manually specifying an https protocol sounds prudent. Feel free to create a pull request with these changes in enhancedsteam-firefox.css in the dev branch here: https://github.com/jshackles/Enhanced_Steam/tree/dev

Otherwise I should be able to make these changes to that file itself before the next release.

(I actually do see issues posted here by the way)

[timgilbert]

As of Firefox 57, I'm not seeing the platform icons any more, and @c12h's userContent.css workaround isn't working for me either. I'll try merging it into enhancedsteam-firefox.css and come up with a PR.

[Corben78]

There is a bug for @import statements in Firefox Quantum 57 (at least on Linux). Maybe you're experiencing this bug? When I put @c12h's userContent.css directly into the userContent.css file, it's working for me. I also realized, that // seems not to be allowed in Firefox userContent.css or userChrome.css (then all settings are ignored).

[leogallego]

I'm not seeing the platform icons on Firefox 56.0.2 with Linux x86_64 either (haven't upgraded to 57 due to a few addons I use not being compatible with webextensions yet).

Here is the "Add to cart" box with SE disabled:

Here is the "Add to cart" box with SE enabled: