Adjust offer tracking banner for Firefox

csfloat · Feb 13, 2025 · fc03a66 · fc03a66
1 parent 16552d8
commit fc03a66
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/lib/components/common/ui/steam-button.ts b/src/lib/components/common/ui/steam-button.ts
@@ -18,6 +18,9 @@ export class SteamButton extends FloatElement {
     @property({type: String})
     private type: ButtonType = ButtonType.GreenWhite;
 
+    @property({type: Boolean})
+    private disabled: boolean = false;
+
     static styles = [
         ...FloatElement.styles,
         css`
@@ -102,6 +105,10 @@ export class SteamButton extends FloatElement {
                 font-size: 12px;
                 line-height: 20px;
             }
+
+            .btn_disabled {
+                cursor: default;
+            }
         `,
     ];
 
@@ -112,6 +119,9 @@ export class SteamButton extends FloatElement {
     btnClass() {
         const r: {[key: string]: boolean} = {btn_small: true};
         r[`btn_${this.type}_innerfade`] = true;
+        if (this.disabled) {
+            r.btn_disabled = true;
+        }
         return classMap(r);
     }
 

diff --git a/src/lib/components/trade_offers/better_tracking.ts b/src/lib/components/trade_offers/better_tracking.ts
@@ -8,6 +8,7 @@ import {state} from 'lit/decorators.js';
 import {FetchPendingTrades} from '../../bridge/handlers/fetch_pending_trades';
 import {HasPermissions} from '../../bridge/handlers/has_permissions';
 import {PingSetupExtension} from '../../bridge/handlers/ping_setup_extension';
+import { isFirefox } from '../../utils/detect';
 
 @CustomElement()
 @InjectAfter(
@@ -18,6 +19,9 @@ export class BetterTrackingWidget extends FloatElement {
     @state()
     show = false;
 
+    @state()
+    isFirefox = isFirefox();
+
     static styles = [
         ...FloatElement.styles,
         css`
@@ -50,6 +54,14 @@ export class BetterTrackingWidget extends FloatElement {
         `,
     ];
 
+    steamButton() {
+        return {
+            text: this.isFirefox ? 'Enable in the Extension Popup' : 'Enable',
+            type: this.isFirefox ? 'grey_white' : "green_white",
+            disabled: this.isFirefox
+        };
+    }
+
     async connectedCallback() {
         super.connectedCallback();
 
@@ -92,7 +104,7 @@ export class BetterTrackingWidget extends FloatElement {
                           <span class="item-name">Setup Offer Tracking on CSFloat</span>
                           <div class="sale-info">Verify trades while preserving your privacy.</div>
                       </div>
-                      <csfloat-steam-button id="csfloat-enable-enhanced" .text="${'Enable'}"></csfloat-steam-button>
+                      <csfloat-steam-button id="csfloat-enable-enhanced" .text="${this.steamButton().text}" .type="${this.steamButton().type}" .disabled=${this.steamButton().disabled}></csfloat-steam-button>
                   </div>
               `
             : html``;

diff --git a/src/lib/page_scripts/trade_offers.ts b/src/lib/page_scripts/trade_offers.ts
@@ -7,6 +7,7 @@ import {PingSetupExtension} from '../bridge/handlers/ping_setup_extension';
 import {PingExtensionStatus} from '../bridge/handlers/ping_extension_status';
 import {FetchSteamTrades, FetchSteamTradesResponse} from '../bridge/handlers/fetch_steam_trades';
 import {convertSteamID32To64, getUserSteamID} from '../utils/userinfo';
+import { isFirefox } from '../utils/detect';
 
 init('src/lib/page_scripts/trade_offers.js', main);
 
@@ -112,6 +113,10 @@ if (!inPageContext()) {
         }
 
         btn.addEventListener('click', async () => {
+            if (isFirefox()) {
+                alert('Please enable the feature in the extension popup');
+                return;
+            }
             chrome.runtime.sendMessage(
                 {
                     message: 'requestPermissions',