Refactor colour algorithm

The old usage of an enum was problematic. And the new is shorter anyhow.

It is intentionally that in the old enum and the new record the values
for MBR_OR_APP are different: In the function `getMBRRegion()` the
colour MBR was used for MBR_OR_APP, so the new algorithm keeps the same
colours for that case.

Author: datenreisender

src/actions/usbsdfuTargetActions.ts

@@ -46,7 +46,6 @@ import {
     defaultRegion,
     getSoftDeviceId,
     Region,
-    RegionColor,
     RegionName,
     RegionPermission,
 } from '../util/regions';
@@ -135,7 +134,6 @@ export const refreshMemoryLayout =
                             name: RegionName.MBR,
                             startAddress: coreInfo.mbrBaseAddr,
                             regionSize: coreInfo.mbrSize,
-                            color: RegionColor.MBR,
                             permission: RegionPermission.NONE,
                         });
                     }
@@ -169,26 +167,11 @@ export const refreshMemoryLayout =
                                     RegionName.APPLICATION,
                             })[imageType] || RegionName.NONE;
 
-                        const color =
-                            (<
-                                Partial<{
-                                    [key in ImageType]: RegionColor;
-                                }>
-                            >{
-                                NRFDL_IMAGE_TYPE_BOOTLOADER:
-                                    RegionColor.BOOTLOADER,
-                                NRFDL_IMAGE_TYPE_SOFTDEVICE:
-                                    RegionColor.SOFTDEVICE,
-                                NRFDL_IMAGE_TYPE_APPLICATION:
-                                    RegionColor.APPLICATION,
-                            })[imageType] || RegionColor.NONE;
-
                         regions.push({
                             ...defaultRegion,
                             name: regionName,
                             startAddress,
                             regionSize,
-                            color,
                         });
                     });
 

src/components/RegionView.tsx

@@ -13,10 +13,26 @@ import { colors } from '@nordicsemiconductor/pc-nrfconnect-shared';
 
 import * as fileActions from '../actions/fileActions';
 import { CoreInfo } from '../util/devices';
-import { Region } from '../util/regions';
+import { Region, RegionName } from '../util/regions';
 import CoreInfoView from './CoreInfoView';
 import RegionInfoView from './RegionInfoView';
 
+const regionColorByName: Record<RegionName | 'background', string> = {
+    [RegionName.MBR_PARAMS]: '#333F48',
+    [RegionName.MBR]: '#FF9800',
+    [RegionName.MBR_OR_APP]: '#FF9800',
+    [RegionName.BOOTLOADER]: '#E91E63',
+    [RegionName.SOFTDEVICE]: '#3F51B5',
+    [RegionName.APPLICATION]: '#4CAF50',
+    [RegionName.FICR]: '#333F48',
+    [RegionName.UICR]: '#333F48',
+    [RegionName.NONE]: '#333F48',
+
+    background: colors.gray100,
+};
+
+const color = (name?: RegionName) => regionColorByName[name ?? 'background'];
+
 interface RegionViewProps {
     width: number;
     active?: boolean;
@@ -47,7 +63,6 @@ const RegionView = ({
         setTarget(event.target as HTMLElement);
     };
 
-    const color = region ? region.color : colors.gray100;
     const fileNames = region ? region.fileNames : [];
 
     let className = 'region';
@@ -68,7 +83,7 @@ const RegionView = ({
             className={className}
             style={{
                 flexGrow: width,
-                backgroundColor: color,
+                backgroundColor: color(region?.name),
             }}
         >
             <Overlay

src/util/regions.ts

@@ -46,28 +46,13 @@ export enum RegionName {
     NONE = 'N/A',
 }
 
-/**
- * Definition of RegionColor
- */
-export enum RegionColor {
-    MBR_PARAMS = '#333F48',
-    MBR = '#FF9800',
-    MBR_OR_APP = '#FFC107',
-    BOOTLOADER = '#E91E63',
-    SOFTDEVICE = '#3F51B5',
-    APPLICATION = ' #4CAF50',
-    UICR = '#333F48', // eslint-disable-line @typescript-eslint/no-duplicate-enum-values -- FIXME: Using an enum is wrong here and could potantially lead to bugs because RegionColor.UICR === RegionColor.NONE is true. Will be fixed later.
-    NONE = '#333F48', // eslint-disable-line @typescript-eslint/no-duplicate-enum-values
-}
-
 /**
  * Definition of Region
  */
 export interface Region {
     name: RegionName;
     startAddress: number;
     regionSize: number;
-    color: RegionColor;
     fileNames: string[];
     permission: RegionPermission;
 }
@@ -79,7 +64,6 @@ export const defaultRegion: Region = {
     name: RegionName.NONE,
     startAddress: 0,
     regionSize: 0,
-    color: RegionColor.NONE,
     fileNames: [],
     permission: RegionPermission.READ_ONLY,
 };
@@ -219,7 +203,6 @@ export const getBootloaderRegion = (
             name: RegionName.BOOTLOADER,
             startAddress: bootloaderAddress,
             regionSize: memMap.get(bootloaderAddress)?.length || 0,
-            color: RegionColor.BOOTLOADER,
             permission: RegionPermission.READ_WRITE,
         };
         return region;
@@ -248,7 +231,6 @@ export const getMBRParamsRegion = (
             name: RegionName.MBR_PARAMS,
             startAddress: mbrParamsAddr,
             regionSize: memMap.get(mbrParamsAddr)?.length || 0,
-            color: RegionColor.MBR_PARAMS,
             permission: RegionPermission.READ_ONLY,
         };
         return region;
@@ -276,7 +258,6 @@ export const getMBRRegion = (
             name: RegionName.MBR_OR_APP,
             startAddress: romBaseAddr,
             regionSize: memMap.get(romBaseAddr)?.length || 0,
-            color: RegionColor.MBR,
             permission: RegionPermission.READ_ONLY,
         };
         return region;
@@ -317,7 +298,6 @@ export const getSoftDeviceRegion = (
                 name: RegionName.SOFTDEVICE,
                 startAddress: SOFTDEVICE_MAGIC_START,
                 regionSize,
-                color: RegionColor.SOFTDEVICE,
                 permission: RegionPermission.READ_WRITE,
             };
             return region;
@@ -517,7 +497,6 @@ const getRegionsFromOverlaps = (
             : {
                   ...defaultRegion,
                   name: RegionName.NONE,
-                  color: RegionColor.NONE,
                   startAddress,
                   regionSize,
                   fileNames,
@@ -536,7 +515,6 @@ const getRegionsFromOverlaps = (
             const appRegion = {
                 ...defaultRegion,
                 name: RegionName.APPLICATION,
-                color: RegionColor.APPLICATION,
                 startAddress: startAddress + region.regionSize,
                 regionSize: regionSize - region.regionSize,
                 fileNames,
@@ -555,7 +533,6 @@ const getRegionsFromOverlaps = (
             region = {
                 ...region,
                 name: RegionName.APPLICATION,
-                color: RegionColor.APPLICATION,
             };
         }
 
@@ -570,7 +547,6 @@ const getRegionsFromOverlaps = (
             region = {
                 ...region,
                 name: RegionName.APPLICATION,
-                color: RegionColor.APPLICATION,
             };
         }
 
@@ -585,7 +561,6 @@ const getRegionsFromOverlaps = (
             region = {
                 ...region,
                 name: RegionName.APPLICATION,
-                color: RegionColor.APPLICATION,
             };
         }
 
@@ -595,7 +570,6 @@ const getRegionsFromOverlaps = (
             region = {
                 ...region,
                 name: RegionName.APPLICATION,
-                color: RegionColor.APPLICATION,
             };
         }
 

src/util/usbsdfuHelpers.ts

@@ -6,7 +6,7 @@
 
 import { convertDeviceDefinitionToCoreArray } from './devices';
 import { DeviceDefinition } from './deviceTypes';
-import { defaultRegion, Region, RegionColor, RegionName } from './regions';
+import { defaultRegion, Region, RegionName } from './regions';
 
 export const generateRegionDetectedNames = (fileRegions: Region[]) => {
     const regionChecklist = [
@@ -82,7 +82,6 @@ export const generateFileAppRegions = (
             name: RegionName.APPLICATION,
             startAddress: appStartAddress,
             regionSize: appEndAddress - appStartAddress,
-            color: RegionColor.APPLICATION,
         };
         fileRegions = [...restFileRegions, appRegion];
     }