Check renderer schema when updating preference renderers (#12347)

Author: colin-grant-work

packages/core/src/browser/icon-theme-service.ts

@@ -198,9 +198,11 @@ export class IconThemeService {
         const preference = this.schemaProvider.getSchemaProperty(ICON_THEME_PREFERENCE_KEY);
         if (preference) {
             const sortedThemes = Array.from(this.definitions).sort((a, b) => a.label.localeCompare(b.label));
-            preference.enum = sortedThemes.map(e => e.id);
-            preference.enumItemLabels = sortedThemes.map(e => e.label);
-            this.schemaProvider.updateSchemaProperty(ICON_THEME_PREFERENCE_KEY, preference);
+            this.schemaProvider.updateSchemaProperty(ICON_THEME_PREFERENCE_KEY, {
+                ...preference,
+                enum: sortedThemes.map(e => e.id),
+                enumItemLabels: sortedThemes.map(e => e.label)
+            });
         }
     }
 

packages/core/src/browser/preferences/preference-contribution.ts

@@ -360,6 +360,10 @@ export class PreferenceSchemaProvider extends PreferenceProvider {
         return this.combinedSchema.properties[key];
     }
 
+    /**
+     * {@link property} will be assigned to field {@link key} in the schema.
+     * Pass a new object to invalidate old schema.
+     */
     updateSchemaProperty(key: string, property: PreferenceDataProperty): void {
         this.updateSchemaProps(key, property);
         this.fireDidPreferenceSchemaChanged();

packages/core/src/browser/theming.ts

@@ -91,9 +91,11 @@ export class ThemeService {
         const preference = this.schemaProvider.getSchemaProperty(COLOR_THEME_PREFERENCE_KEY);
         if (preference) {
             const sortedThemes = this.getThemes().sort((a, b) => a.label.localeCompare(b.label));
-            preference.enum = sortedThemes.map(e => e.id);
-            preference.enumItemLabels = sortedThemes.map(e => e.label);
-            this.schemaProvider.updateSchemaProperty(COLOR_THEME_PREFERENCE_KEY, preference);
+            this.schemaProvider.updateSchemaProperty(COLOR_THEME_PREFERENCE_KEY, {
+                ...preference,
+                enum: sortedThemes.map(e => e.id),
+                enumItemLabels: sortedThemes.map(e => e.label)
+            });
         }
     }
 

packages/preferences/package.json

@@ -11,6 +11,7 @@
     "@theia/userstorage": "1.35.0",
     "@theia/workspace": "1.35.0",
     "async-mutex": "^0.3.1",
+    "fast-deep-equal": "^3.1.3",
     "jsonc-parser": "^2.2.0",
     "p-debounce": "^2.1.0"
   },

packages/preferences/src/browser/views/components/preference-node-renderer.ts

@@ -17,7 +17,7 @@
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
     PreferenceService, ContextMenuRenderer, PreferenceInspection,
-    PreferenceScope, PreferenceProvider, codicon, OpenerService, open
+    PreferenceScope, PreferenceProvider, codicon, OpenerService, open, PreferenceDataProperty
 } from '@theia/core/lib/browser';
 import { Preference, PreferenceMenus } from '../../util/preference-types';
 import { PreferenceTreeLabelProvider } from '../../util/preference-tree-label-provider';
@@ -39,6 +39,7 @@ export const SUBHEADER_CLASS = 'settings-section-subcategory-title';
 export interface GeneralPreferenceNodeRenderer extends Disposable {
     node: HTMLElement;
     id: string;
+    schema?: PreferenceDataProperty;
     group: string;
     nodeId: string;
     visible: boolean;
@@ -170,6 +171,10 @@ export abstract class PreferenceLeafNodeRenderer<ValueType extends JSONValue, In
     protected isModifiedFromDefault = false;
     protected markdownRenderer: markdownit;
 
+    get schema(): PreferenceDataProperty {
+        return this.preferenceNode.preference.data;
+    }
+
     @postConstruct()
     protected override init(): void {
         this.setId();

packages/preferences/src/browser/views/preference-editor-widget.ts

@@ -17,6 +17,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { postConstruct, injectable, inject } from '@theia/core/shared/inversify';
 import throttle = require('@theia/core/shared/lodash.throttle');
+import * as deepEqual from 'fast-deep-equal';
 import {
     PreferenceService,
     CompositeTreeNode,
@@ -35,7 +36,6 @@ import { Preference } from '../util/preference-types';
 import { COMMONLY_USED_SECTION_PREFIX } from '../util/preference-tree-generator';
 import { PreferencesScopeTabBar } from './preference-scope-tabbar-widget';
 import { PreferenceNodeRendererCreatorRegistry } from './components/preference-node-renderer-creator';
-import stableJsonStringify = require('fast-json-stable-stringify');
 
 export interface PreferencesEditorState {
     firstVisibleChildID: string,
@@ -127,7 +127,7 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
     protected handleSchemaChange(isFiltered: boolean): void {
         for (const [id, renderer, collection] of this.allRenderers()) {
             const node = this.model.getNode(renderer.nodeId);
-            if (!node || (Preference.LeafNode.is(node) && this.hasSchemaChanged(node))) {
+            if (!node || (Preference.LeafNode.is(node) && this.hasSchemaChanged(renderer, node))) {
                 renderer.dispose();
                 collection.delete(id);
             }
@@ -143,9 +143,6 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
                         this.hideIfFailsFilters(renderer, isFiltered);
                         collection.set(id, renderer);
                     }
-                    if (!this.preferenceDataKeys.has(node.id) && Preference.LeafNode.is(node)) {
-                        this.setSchemaPropertyKey(node);
-                    }
                     if (nextNode !== renderer.node) {
                         if (nextNode) {
                             renderer.insertBefore(nextNode);
@@ -169,21 +166,8 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
         }
     }
 
-    protected hasSchemaChanged(leafNode: Preference.LeafNode): boolean {
-        const oldKey = this.preferenceDataKeys.get(leafNode.id);
-        const newKey = this.setSchemaPropertyKey(leafNode);
-        return oldKey !== newKey;
-    }
-
-    protected setSchemaPropertyKey(leafNode: Preference.LeafNode): string | undefined {
-        const schemaProperty = this.schemaProvider.getSchemaProperty(leafNode.preferenceId);
-        if (schemaProperty) {
-            const key = stableJsonStringify(schemaProperty);
-            this.preferenceDataKeys.set(leafNode.id, key);
-            return key;
-        } else {
-            return undefined;
-        }
+    protected hasSchemaChanged(renderer: GeneralPreferenceNodeRenderer, node: Preference.LeafNode): boolean {
+        return !deepEqual(renderer.schema, node.preference.data);
     }
 
     protected handleSearchChange(isFiltered: boolean, leavesAreVisible: boolean): void {