fonts settings UI changed (#4186)

* fonts settings UI changed

* Update tooltip messaging

* removed fontsMono and font-scanner dependency

* remove font-scanner dep

Co-authored-by: Opender Singh <opender.singh@konghq.com>
Co-authored-by: Jack Kavanagh <jackkav@gmail.com>

README.md

@@ -64,10 +64,6 @@ sudo apt-get update
 
 # Install font configuration library & support
 sudo apt-get install libfontconfig-dev
-sudo apt-get install font-manager
-
-# Build capability for required font-scanner package
-sudo apt-get install build-essential
 ```
 
 </details>
@@ -76,16 +72,6 @@ sudo apt-get install build-essential
 <summary>Fedora</summary>
 
 ```shell
-# Enable FontManager Copr (https://github.com/FontManager/font-manager#fedora-copr)
-sudo dnf copr enable jerrycasiano/FontManager
-
-# Install font configuration library & support
-sudo dnf install font-manager
-sudo dnf install fontconfig-devel
-
-# Build capability for required font-scanner package
-sudo dnf install make automake gcc gcc-c++ kernel-devel
-
 # Install libcurl for node-libcurl
 sudo dnf install libcurl-devel
 ```

packages/insomnia-app/app/ui/components/settings/general.tsx

@@ -1,5 +1,4 @@
 import { autoBindMethodsForReact } from 'class-autobind-decorator';
-import * as fontScanner from 'font-scanner';
 import { HttpVersion, HttpVersions } from 'insomnia-common';
 import React, { Fragment, PureComponent } from 'react';
 import { connect } from 'react-redux';
@@ -37,11 +36,6 @@ import { HelpTooltip } from '../help-tooltip';
 import { BooleanSetting } from './boolean-setting';
 import { MaskedSetting } from './masked-setting';
 
-// Font family regex to match certain monospace fonts that don't get
-// recognized as monospace
-
-const FORCED_MONO_FONT_REGEX = /^fixedsys /i;
-
 interface Props {
   settings: Settings;
   hideModal: () => void;
@@ -49,39 +43,8 @@ interface Props {
   handleSetActiveActivity: (activity?: GlobalActivity) => void;
 }
 
-interface State {
-  fonts: {
-    family: string;
-    monospace: boolean;
-  }[] | null;
-  fontsMono: {
-    family: string;
-    monospace: boolean;
-  }[] | null;
-}
-
 @autoBindMethodsForReact(AUTOBIND_CFG)
-class General extends PureComponent<Props, State> {
+class General extends PureComponent<Props> {
-  state: State = {
-    fonts: null,
-    fontsMono: null,
-  };
-
-  async componentDidMount() {
-    const allFonts = await fontScanner.getAvailableFonts();
-    // Find regular fonts
-    const fonts = allFonts
-      .filter(i => ['regular', 'book'].includes(i.style.toLowerCase()) && !i.italic)
-      .sort((a, b) => (a.family > b.family ? 1 : -1));
-    // Find monospaced fonts
-    // NOTE: Also include some others:
-    //  - https://github.com/Kong/insomnia/issues/1835
-    const fontsMono = fonts.filter(i => i.monospace || i.family.match(FORCED_MONO_FONT_REGEX));
-    this.setState({
-      fonts,
-      fontsMono,
-    });
-  }
 
   async _handleUpdateSetting(e: React.SyntheticEvent<HTMLInputElement>) {
     const el = e.currentTarget;
@@ -184,7 +147,6 @@ class General extends PureComponent<Props, State> {
 
   render() {
     const { settings } = this.props;
-    const { fonts, fontsMono } = this.state;
     return (
       <div className="pad-bottom">
         <div className="row-fill row-fill--top">
@@ -271,62 +233,34 @@ class General extends PureComponent<Props, State> {
         </div>
 
         <div className="form-row pad-top-sm">
-          <div className="form-control form-control--outlined">
+          <div className="form-row">
-            <label>
+            {this.renderTextSetting(
-              Interface Font
+              'Interface Font',
-              {fonts ? (
+              'fontInterface',
-                <select
+              'Comma-separated list of fonts. If left empty, takes system defaults.',
-                  name="fontInterface"
+              {
-                  value={settings.fontInterface || '__NULL__'}
+                placeholder: '-- System Default --',
-                  // @ts-expect-error -- TSCONVERSION
+                onChange: this._handleFontChange,
-                  onChange={this._handleFontChange}
+              },
-                >
-                  <option value="__NULL__">-- System Default --</option>
-                  {fonts.map((item, index) => (
-                    <option key={index} value={item.family}>
-                      {item.family}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <select disabled>
-                  <option value="__NULL__">-- Unsupported Platform --</option>
-                </select>
             )}
-            </label>
-          </div>
             {this.renderNumberSetting('Interface Font Size (px)', 'fontSize', '', {
               min: MIN_INTERFACE_FONT_SIZE,
               max: MAX_INTERFACE_FONT_SIZE,
               onBlur: this._handleFontChange,
             })}
           </div>
+        </div>
 
         <div className="form-row">
-          <div className="form-control form-control--outlined">
+          {this.renderTextSetting(
-            <label>
+            'Text Editor Font',
-              Text Editor Font
+            'fontMonospace',
-              {fontsMono ? (
+            'Comma-separated list of monospace fonts. If left empty, takes system defaults.',
-                <select
+            {
-                  name="fontMonospace"
+              placeholder: '-- System Default --',
-                  value={settings.fontMonospace || '__NULL__'}
+              onChange: this._handleFontChange,
-                  // @ts-expect-error -- TSCONVERSION
+            },
-                  onChange={this._handleFontChange}
-                >
-                  <option value="__NULL__">-- System Default --</option>
-                  {fontsMono.map((item, index) => (
-                    <option key={index} value={item.family}>
-                      {item.family}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <select disabled>
-                  <option value="__NULL__">-- Unsupported Platform --</option>
-                </select>
           )}
-            </label>
-          </div>
           {this.renderNumberSetting('Editor Font Size (px)', 'editorFontSize', '', {
             min: MIN_EDITOR_FONT_SIZE,
             max: MAX_EDITOR_FONT_SIZE,

packages/insomnia-app/package-lock.json

@@ -11956,14 +11956,6 @@
 				}
 			}
 		},
-		"font-scanner": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/font-scanner/-/font-scanner-0.1.2.tgz",
-			"integrity": "sha512-60XIPuzqeTey3P8wo/3t2mvKnjeeKl3O9QFzwk2cypQgJaqYF4Q/eOMSCro3YxCzTDzcGA5q5TtDRZXkI3tx0g==",
-			"requires": {
-				"nan": "^2.14.0"
-			}
-		},
 		"for-in": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

packages/insomnia-app/package.json

@@ -92,7 +92,6 @@
     "electron-context-menu": "^2.2.0",
     "electron-log": "^4.3.5",
     "electron-updater": "^4.3.9",
-    "font-scanner": "^0.1.2",
     "framer-motion": "^1.11.1",
     "fs-extra": "^5.0.0",
     "fuzzysort": "^1.1.1",