Changing colors. Adding info icons

Author: danijelaskov

src/app/bytecode-viewer/bytecode-viewer.component.css

@@ -36,53 +36,63 @@ th, td {
 }
 
 .row-selected > th, .row-selected > td {
- background-color: darkgreen;
+ background-color: lightgreen;
 }
 
 .row-selected > th > code, .row-selected > td > code {
- color: lightgreen;
+ color: black;
 }
 
 .red-colored {
  color: red;
 }
 
+.blue-colored {
+ color: blue;
+}
+
 .row-entry-point > th, .row-entry-point > td {
- background-color: darkviolet;
+ background-color: violet;
 }
 
 .row-entry-point > th > code, .row-entry-point > td > code {
- color: thistle;
+ color: black;
 }
 
 .row-destination > th, .row-destination > td {
- background-color: darkblue;
+ background-color: lightblue;
 }
 
-.row-selected > td > .red-colored, .row-destination > td > .red-colored, .row-entry-point > td > .red-colored {
- color: lightpink;
+.row-destination > th > code, .row-destination > td > code {
+ color: black;
 }
 
-.row-destination > th > code, .row-destination > td > code {
+/*
+.row-selected > td > a, .row-destination > td > a, .row-entry-point > td > a {
  color: lightblue;
 }
+*/
+
+.row-selected > td > .red-colored, .row-destination > td > .red-colored, .row-entry-point > td > .red-colored {
+ color: red;
+}
+
+.row-selected > td > .blue-colored, .row-destination > td > .blue-colored, .row-entry-point > td > .blue-colored {
+ color: blue;
+}
+
+.tab-pane {
+ padding-top: 10px;
+}
 
 .pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
 }
 
-.row-selected > td > a, .row-destination > td > a, .row-entry-point > td > a {
- color: lightblue;
-}
-
 @keyframes pulse {
  from { transform: scale(1); }
  50% { transform: scale(0.5); }
  to { transform: scale(1); }
-}
-
-.tab-pane {
- padding-top: 10px;
 }

src/app/bytecode-viewer/bytecode-viewer.component.html

@@ -160,7 +160,11 @@
  <code>{{disassembledInstruction.toString()}}</code>
  &nbsp;
  <fa-icon [icon]="exclamationIcon" class="pulse red-colored" tooltip="{{disassembledInstruction.warning}}"></fa-icon>
- </ng-template> 
+ </ng-template>
+ <ng-container *ngIf="disassembledInstruction.info">
+ &nbsp;
+ <fa-icon [icon]="infoIcon" class="blue-colored" tooltip="{{disassembledInstruction.info}}"></fa-icon>
+ </ng-container>
  </td>
  </tr>
  </tbody>

src/app/bytecode-viewer/bytecode-viewer.component.ts

@@ -20,7 +20,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Disassembler } from '../shared/disassembler.shared';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faExclamationCircle, faChartBar, faFile } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationCircle, faInfoCircle, faChartBar, faFile } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
  selector: 'bytecode-viewer-component',
@@ -41,6 +41,7 @@ export class BytecodeViewerComponent implements OnInit {
  loading: boolean = false;
 
  exclamationIcon: IconDefinition = faExclamationCircle;
+ infoIcon: IconDefinition = faInfoCircle;
  fileIcon: IconDefinition = faFile;
  barChartIcon: IconDefinition = faChartBar;
 

src/app/shared/disassembler.shared.ts

@@ -30,17 +30,19 @@ class DisassembledInstruction {
 
  public referencedAddress: number;
  public warning: string;
+ public info: string;
 
  public bytes: Uint8Array;
 
- constructor(address: number, instruction: Instruction, operands: string, referencedAddress: number, warning: string, bytes: Uint8Array) {
+ constructor(address: number, instruction: Instruction, operands: string, referencedAddress: number, warning: string, info: string, bytes: Uint8Array) {
  this.address = address;
 
  this.instruction = instruction;
  this.operands = operands;
 
  this.referencedAddress = referencedAddress;
  this.warning = warning;
+ this.info = info;
 
  this.bytes = bytes;
  }
@@ -69,6 +71,7 @@ export class Disassembler {
 
  private jumpDestination: number;
  private warning: string;
+ private info: string;
 
  public static readonly MIN_OBJ_SIZE: number = 1 + 1 + 3 * 4 + 1;
 
@@ -150,7 +153,7 @@ export class Disassembler {
  public static readonly DUP_X1: Instruction = {mnemonic: "dup_x1", opcode: 59};
  public static readonly DUP_X2: Instruction = {mnemonic: "dup_x2", opcode: 60};
 
- public static readonly INVALID_INSTR: Instruction = {mnemonic: "", opcode: 61};
+ public static readonly INVALID_INSTR: Instruction = {mnemonic: "???", opcode: 61};
 
  public static readonly INSTRUCTIONS: Instruction[] = [
  Disassembler.LOAD, Disassembler.LOAD_0, Disassembler.LOAD_1, Disassembler.LOAD_2,
@@ -201,7 +204,7 @@ export class Disassembler {
  if (this.jumpDestination && (this.jumpDestination < 0 || this.jumpDestination >= this.uint8Array.length - this.headerSize)) {
  this.warning = 'This instruction is problematic! Destination address does not exist.';
  }
- this.disassembledInstructions.push(new DisassembledInstruction(this.address, instruction, operands, isJumpInstruction ? this.jumpDestination : null, this.warning, bytes));
+ this.disassembledInstructions.push(new DisassembledInstruction(this.address, instruction, operands, isJumpInstruction ? this.jumpDestination : null, this.warning, this.info, bytes));
  this.address = this.current - this.headerSize;
  }
 
@@ -224,6 +227,7 @@ export class Disassembler {
 
  while (this.current < this.uint8Array.length) {
  this.warning = null;
+ this.info = null;
  this.jumpDestination = null;
  this.startAddresses.push(this.address);
  switch(this.opcode = this.get()) {
@@ -327,7 +331,8 @@ export class Disassembler {
  this.operand1 = this.get4();
  let asciiChar = String.fromCharCode(this.operand1);
  let isPrintable = /^[ -~]$/.test(asciiChar);
- this.put(Disassembler.CONST, new Uint8Array([this.opcode, (this.operand1 >> 24) & 0x0ff, (this.operand1 >> 16) & 0x0ff, (this.operand1 >> 8) & 0x0ff, this.operand1 & 0x0ff]), this.operand1.toString() + (isPrintable ? " (ASCII char: '" + asciiChar + "')" : ""));
+ this.info = isPrintable ? "If it is interpreted as an ASCII char, this value is '" + asciiChar + "'" : "";
+ this.put(Disassembler.CONST, new Uint8Array([this.opcode, (this.operand1 >> 24) & 0x0ff, (this.operand1 >> 16) & 0x0ff, (this.operand1 >> 8) & 0x0ff, this.operand1 & 0x0ff]), this.operand1.toString());
  break;
  }
 case Disassembler.ADD.opcode: {