Make CSS hotfixes visible in the options (#6617)

source/feature-manager.tsx

@@ -97,10 +97,9 @@ const log = {
 
 // eslint-disable-next-line no-async-promise-executor -- Rule assumes we don't want to leave it pending
 const globalReady = new Promise<RGHOptions>(async resolve => {
- const [options, localHotfixes, styleHotfix, bisectedFeatures] = await Promise.all([
+ const [options, localHotfixes, bisectedFeatures] = await Promise.all([
  optionsStorage.getAll(),
  getLocalHotfixesAsOptions(),
- getStyleHotfix(version),
  bisectFeatures(),
  getLocalStrings(),
  ]);
@@ -125,7 +124,8 @@ const globalReady = new Promise<RGHOptions>(async resolve => {
 
  document.documentElement.classList.add('refined-github');
 
- void applyStyleHotfixes(styleHotfix);
+ void getStyleHotfix(version).then(applyStyleHotfixes);
+
  if (options.customCSS.trim().length > 0) {
  // Review #5857 and #5493 before making changes
  document.head.append(<style>{options.customCSS}</style>);

source/options.html

@@ -38,6 +38,19 @@
  <div class="js-features"></div>
  </details>
 
+ <details id="bisect">
+ <summary><strong>🔎 Identify feature</strong></summary>
+ <p>
+ This process will help you identify what Refined GitHub feature is making changes or causing issues on GitHub.
+ </p>
+ <p id="find-feature-message" hidden>
+ Visit the GitHub page where you want to find the feature and refresh it to see the instructions. You can navigate to any page, but don’t use multiple tabs.
+ </p>
+ <p>
+ <button id="find-feature">Start process to identify feature…</button>
+ </p>
+ </details>
+
  <details id="css">
  <summary><strong>💅 Custom CSS</strong></summary>
  <p>Like a userstyle, useful to undo unwanted style changes</p>
@@ -52,19 +65,6 @@
  <p><input type="url" name="actionUrl" placeholder="https://github.com" spellcheck="false" autocomplete="off" autocapitalize="off"></p>
  </details>
 
- <details id="bisect">
- <summary><strong>🔎 Identify feature</strong></summary>
- <p>
- This process will help you identify what Refined GitHub feature is making changes or causing issues on GitHub.
- </p>
- <p id="find-feature-message" hidden>
- Visit the GitHub page where you want to find the feature and refresh it to see the instructions. You can navigate to any page, but don’t use multiple tabs.
- </p>
- <p>
- <button id="find-feature">Start process to identify feature…</button>
- </p>
- </details>
-
  <details id="debugging">
  <summary><strong>🐛 Debugging</strong></summary>
  <p>
@@ -89,6 +89,13 @@
 
  </details>
 
+ <details id="hotfixes">
+ <summary><strong>☄️ Hotfixes</strong></summary>
+ <p>In order to address severe issues as quickly as possible, Refined GitHub loads a list of disabled features and temporary CSS fixes. <a href="https://github.com/refined-github/yolo">More info.</a></p>
+ <p>This is the latest CSS fetched from the server (if any):</p>
+ <p><textarea id="hotfixes-field" rows="2" disabled></textarea></p>
+ </details>
+
  <details id="export">
  <summary><strong>🗄️ Export options</strong></summary>
  <p>
@@ -101,7 +108,6 @@
  <button type="button" class="js-export">Export</button>
  <button type="button" class="js-import">Import</button>
  </p>
-
  </details>
 
 </form>

source/options.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/no-nested-ternary */
 import 'webext-base-css/webext-base.css';
 import './options.css';
 import React from 'dom-chef';
@@ -10,6 +11,7 @@ import {assertError} from 'ts-extras';
 import * as indentTextarea from 'indent-textarea';
 import delegate, {DelegateEvent} from 'delegate-it';
 import {isChrome, isFirefox} from 'webext-detect-page';
+import {isEnterprise} from 'github-url-detection';
 
 import featureLink from './helpers/feature-link.js';
 import clearCacheHandler from './helpers/clear-cache-handler.js';
@@ -18,6 +20,7 @@ import {createRghIssueLink} from './helpers/rgh-issue-link.js';
 import {importedFeatures, featuresMeta} from '../readme.md';
 import getStorageBytesInUse from './helpers/used-storage.js';
 import {isBrowserActionAPopup, perDomainOptions} from './options-storage.js';
+import isDevelopmentVersion from './helpers/is-development-version';
 
 type Status = {
  error?: true;
@@ -229,6 +232,16 @@ function updateRateLink(): void {
  select('a#rate-link')!.href = isFirefox() ? 'https://addons.mozilla.org/en-US/firefox/addon/refined-github-' : 'https://apps.apple.com/app/id1519867270?action=write-review';
 }
 
+async function showStoredCssHotfixes(): Promise<void> {
+ const cachedCSS = await cache.get<string>('style-hotfixes:');
+ select('#hotfixes-field')!.textContent
+ = isDevelopmentVersion()
+ ? 'Hotfixes are not applied in the development version.'
+ : isEnterprise()
+ ? 'Hotfixes are not applied on GitHub Enterprise.'
+ : cachedCSS ?? 'No CSS found in cache.';
+}
+
 async function generateDom(): Promise<void> {
  // Generate list
  select('.js-features')!.append(...featuresMeta
@@ -262,6 +275,9 @@ async function generateDom(): Promise<void> {
  if (isBrowserActionAPopup) {
  select('#action')!.hidden = true;
  }
+
+ // Show stored CSS hotfixes
+ void showStoredCssHotfixes();
 }
 
 function addEventListeners(): void {