use hexHighlight

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -7,7 +7,7 @@ import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
   const [calldataObj, dispatch] = useReducer(reducer, initialState)
-  const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent, headStyle, bodyStyle } = props
+  const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent, headStyle, bodyStyle, hexHighlight } = props
   const extractDataDefault: ExtractFunc = (item, parent?) => {
     const ret: ExtractData = {}
 
@@ -35,14 +35,16 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   }
   const formatSelfDefault = (key: string | number, data: ExtractData) => {
     let value    
-    if (typeof(data.self) === 'string') {
+    if (hexHighlight && typeof(data.self) === 'string') {
+        const isHex = data.self.startsWith('0x') || hexHighlight
+        if (isHex) {
           let regex = /^(0+)(.*)/g
           let split = regex.exec(data.self.replace('0x', ''))        
-        if (split && split[1] && split[2]) {
+          if (split && split[1]) {
-          split[1] = data.self.indexOf('0x') === 0 ? '0x' + split[1] : split[1]
+            value = (<span><span className="m-0 label_value">0x</span><span className="m-0 label_value">{split[1]}</span>{ split[2] && <span className="m-0 label_value font-weight-bold text-dark">{split[2]}</span> }</span>)
-          value = (<span><span className="m-0 label_value">{split[1]}</span><span className="m-0 label_value font-weight-bold text-dark">{split[2]}</span></span>)
+          } else value = (<span><span className="m-0 label_value">0x</span><span className="m-0 label_value font-weight-bold text-dark">{data.self.replace('0x', '')}</span></span>)      
-        }
+        } else value = <span className="m-0 label_value">{data.self}</span>
-    } else value = data.self
+    } else value = <span className="m-0 label_value">{data.self}</span>
     return (
       <div className="d-flex mr-1 flex-row label_item">
         <label className="small font-weight-bold mb-0 pr-1 label_key">{key}:</label>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const MemoryPanel = ({ calldata }) => {
   return (
-    <DropdownPanel bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Memory' calldata={calldata || {}} />
+    <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Memory' calldata={calldata || {}} />
   )
 }
 

libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx

@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 export const StackPanel = ({ calldata }) => {
   return (
     <div id='stackpanel'>
-      <DropdownPanel bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Stack' calldata={calldata || {}} />
+      <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Stack' calldata={calldata || {}} />
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx

@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 export const StepDetail = ({ stepDetail }) => {
   return (
     <div id='stepdetail' data-id='stepdetail'>
-      <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
+      <DropdownPanel hexHighlight={false} dropdownName='Step details' calldata={stepDetail || {}} />
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/types/index.ts

@@ -28,8 +28,9 @@ export interface DropdownPanelProps {
     triggerEvent?: Function,
     loadMoreEvent?: string,
     loadMoreCompletedEvent?: string,
-    bodyStyle?: React.CSSProperties
+    bodyStyle?: React.CSSProperties,
-    headStyle?: React.CSSProperties
+    headStyle?: React.CSSProperties,
+    hexHighlight?: boolean // highlight non zero value of hex value
 }
 
 export type FormatSelfFunc = (key: string | number, data: ExtractData) => JSX.Element