Add memory visualization

package.json

@@ -33,11 +33,13 @@
         "prepare": "husky install"
     },
     "devDependencies": {
-        "nrf-intel-hex": "^1.2.0",
+        "nrf-intel-hex": "^1.3.0",
         "pc-nrfconnect-shared": "git+https://github.com/NordicSemiconductor/pc-nrfconnect-shared.git#v6.6.1",
         "react-timer-hook": "^3.0.5"
     },
-    "dependencies": {},
+    "dependencies": {
+        "elfy": "^1.0.0"
+    },
     "eslintConfig": {
         "extends": "./node_modules/pc-nrfconnect-shared/config/eslintrc"
     },

resources/css/canvas.scss

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.canvas-container {
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+        width: 10px;
+        height: 0px; // Needed, don't remove
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $gray-500;
+        border-radius: 5px;
+        border: 3px solid white;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: $gray-700;
+    }
+
+    canvas {
+        border: 1px solid white;
+    }
+}

resources/css/section-info-view.scss

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.section-info-view {
+    padding-top: 4px;
+    font-size: 12px;
+    min-width: 155px;
+    .fields {
+        padding-top: 12px;
+        border-bottom: 1px solid $gray-200;
+    }
+    div:last-child {
+        border: none;
+    }
+    p {
+        text-align: left !important;
+        padding-top: 0 !important;
+        color: $gray-900 !important;
+    }
+}

src/actions/fileActions.ts

@@ -15,6 +15,7 @@ import {
 } from 'pc-nrfconnect-shared';
 
 import {
+    elfParse,
     fileParse,
     filesEmpty,
     mcubootFileKnown,
@@ -239,6 +240,35 @@ const parseHexFile =
         dispatch(updateTargetWritable());
     };
 
+const parseElf = (filePath: string) => async (dispatch: TDispatch) => {
+    const stats = await new Promise<Stats>((resolve, reject) => {
+        stat(filePath, (statsError, result) => {
+            if (statsError) {
+                logger.error(
+                    `Could not open Elf file: ${describeError(statsError)}`
+                );
+                dispatch(
+                    ErrorDialogActions.showDialog(describeError(statsError))
+                );
+                removeMruFile(filePath);
+                return reject();
+            }
+            return resolve(result);
+        });
+    });
+
+    logger.info('Checking Elf file: ', filePath);
+    logger.info('File was last modified at ', stats.mtime.toLocaleString());
+    addMruFile(filePath);
+    // License for elfy can be found at https://github.com/indutny/elfy
+    /* eslint-disable global-require */
+    const elfy = require('elfy');
+    const fs = require('fs');
+    const fileData = fs.readFileSync(filePath);
+    const elf = elfy.parse(fileData);
+    dispatch(elfParse(elf));
+};
+
 export const openFile =
     (...params: string[]) =>
     async (dispatch: TDispatch): Promise<unknown> => {
@@ -256,22 +286,28 @@ export const openFile =
             dispatch(updateTargetWritable());
             return dispatch(openFile(...params.slice(1)));
         }
+        if (filePath.toLowerCase().endsWith('.elf')) {
+            dispatch(filesEmpty());
+            await dispatch(parseElf(filePath));
+            return dispatch(openFile(...params.slice(1)));
+        }
         if (
             filePath.toLowerCase().endsWith('.hex') ||
             filePath.toLowerCase().endsWith('.ihex')
         ) {
+            dispatch(filesEmpty());
             await dispatch(parseHexFile(filePath));
             return dispatch(openFile(...params.slice(1)));
         }
     };
 
 export const openFileDialog = () => (dispatch: TDispatch) => {
     const dialogOptions = {
-        title: 'Select a HEX / ZIP file',
+        title: 'Select a HEX / ZIP / ELF file',
         filters: [
             {
-                name: 'HEX / ZIP files',
-                extensions: ['hex', 'iHex', 'zip'],
+                name: 'HEX / ZIP / ELF files',
+                extensions: ['hex', 'iHex', 'zip', 'elf'],
             },
         ],
         properties: ['openFile', 'multiSelections'],

src/components/AppMainView.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { getLoaded, getZipFilePath } from '../reducers/fileReducer';
+import { getElf, getLoaded, getZipFilePath } from '../reducers/fileReducer';
 import { getDeviceInfo, getSerialNumber } from '../reducers/targetReducer';
 import useOpenFileFromArgs from '../useOpenFileFromArgs';
 import { DeviceDefinition } from '../util/devices';
@@ -38,6 +38,7 @@ const AppMainView = () => {
     const zipFilePath = useSelector(getZipFilePath);
     const serialNumber = useSelector(getSerialNumber);
     const deviceInfo = useSelector(getDeviceInfo);
+    const elf = useSelector(getElf);
 
     useOpenFileFromArgs();
 
@@ -47,17 +48,18 @@ const AppMainView = () => {
             <div className="memory-box-container">
                 <MemoryBoxView
                     title="File memory layout"
-                    description="Drag & drop HEX/ZIP files here"
-                    iconName="mdi mdi-folder-open"
+                    description="Drag & drop HEX/ZIP/ELF files here"
+                    iconName="mdi mdi-file-outline"
                     isHolder={!hasFileContent(loaded) && !zipFilePath}
+                    containsVisualization={elf !== undefined}
                 />
                 <MemoryBoxView
                     title={
                         getTargetTitle(serialNumber, deviceInfo) ||
                         'Device memory layout'
                     }
                     description="Connect a device to display memory contents"
-                    iconName="appicon-chip"
+                    iconName="mdi appicon-chip"
                     isHolder={!serialNumber}
                     isTarget={!!serialNumber}
                 />