trace/component/DisassemblingWindow.ts

/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseElement, element } from "../../base-ui/BaseElement.js";

@element('tab-native-data-modal')
export class DisassemblingWindow extends BaseElement {
    private canvas: HTMLCanvasElement | undefined | null;
    private window: HTMLElement | undefined | null;
    private loading: HTMLElement | undefined | null;
    private ctx: CanvasRenderingContext2D | null | undefined;
    private hintLine = 0;
    private addrArray = new Array<string>();
    private maxBinSize = 0;
    private close: Function | undefined | null;
    setCloseListener(callback:Function){
        this.close = callback;
    }

    removeCloseListener(){
        this.close = null;
    };

    private getMap(content: string, hintAttr: string) {
        let lines = content.split('\n');
        this.addrArray = new Array<string>();
        let lineMap = new Map<string, Disassembling>();
        let effectLint = 0;
        this.maxBinSize = 0;
        for (let line of lines) {
            let lineContents = line.split(':');
            if (lineContents.length === 2) {
                let addrHex = lineContents[0].trim();
                let addr = '0x' + addrHex;
                let value = lineContents[1].split('\t');
                try {
                    let binary = value[0];
                    let lineStruct = new Disassembling();
                    if (binary === '') {
                        if (line.includes('Disassembly') || line.includes('file format')) {
                            continue
                        } else {
                            if (addr.includes(' ')) {
                                let funcs = addr.split(' ');
                                lineStruct.addr = funcs[0];
                                lineStruct.binary = funcs[1];
                            }
                        }
                    } else {
                        lineStruct.addr = addr;
                        lineStruct.binary = value[0].trim();
                        lineStruct.type = value.length > 1 ? value[1] : '';
                        lineStruct.code = value.length > 2 ? value[2] : '';
                    }
                    lineMap.set(addrHex, lineStruct);
                    this.maxBinSize = Math.max(this.ctx!.measureText(lineStruct.addr + lineStruct.binary).width, this.maxBinSize);
                    this.addrArray.push(addrHex);
                    if (addrHex === hintAttr) this.hintLine = effectLint;
                    effectLint++;
                } catch (e) {
                    console.log(e);
                }
            }
        }
        return lineMap;
    }

    public showContent(content: string, hintAddr: string): void {
        this.loading!.style.display = "none";
        this.window!.style.display = "block";
        if (content.startsWith('error')) {
            this.window!.innerHTML = `<span class="column1" style="width:100%;text-align: center;">${content}</span>`;
            return;
        }
        let lineMap = this.getMap(content, hintAddr);
        this.maxBinSize = this.maxBinSize * 1.7;
        this.window!.innerHTML = '';
        for (let addr of this.addrArray) {
            if (!lineMap.has(addr)) continue;
            let struct = lineMap.get(addr);
            if (this.addrArray[this.hintLine] == addr) {
                this.window!.innerHTML += `<div class="line" id="emphasis" style = background:red">
                <span class="column0" style="width:${this.maxBinSize}px;">${struct!.addr} : ${struct!.binary}</span>
                <span class="column1" style="width:100px;">${struct!.type}</span>
                <span class="column2" style="width:300px;">${struct!.code}</span></div>`;
                (this.window!.querySelector("#emphasis") as HTMLElement)!.style.width = this.window!.scrollWidth + 'px';
                (this.window!.querySelector("#emphasis") as HTMLElement)!.style.background = '#0A59F7';
            } else {
                this.window!.innerHTML += `<div class="line">
                <span class="column0" style="width:${this.maxBinSize}px;">${struct!.addr} : ${struct!.binary}</span>
                <span class="column1" style="width:100px;">${struct!.type}</span>
                <span class="column2" style="width:300px;">${struct!.code}</span></div>`;
            }
        }
        this.window!.scrollTo(0, (this.hintLine - 1) * (this.shadowRoot!.querySelector("#window>.line")!.clientHeight) - this.window!.clientHeight / 2);
    }

    private resetCanvas(styleWidth: number, styleHeight: number, width: number, height: number): void {
        this.canvas!.style.width = styleWidth + "px";
        this.canvas!.style.height = styleHeight + "px";
        this.canvas!.width = width;
        this.canvas!.height = height;
    }

    public showLoading(): void {
        this.loading!.style.display = 'block';
        this.window!.style.display = 'none';
        this.style.display = 'block';
        this.style.position = 'absolute';
        this.style.left = '0px';
        this.style.border = '1px solid #d8d8d8';
    }

    initElements(): void {
        this.canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("#canvas");
        let close = this.shadowRoot?.querySelector("#close");
        this.window = this.shadowRoot?.querySelector("#window");
        this.loading = this.shadowRoot?.querySelector("#loading");
        this.ctx = this.canvas!.getContext('2d');
        this.resetCanvas(0, 0, 0, 0);
        close!.addEventListener("click", () => {
           if(this.close){
              this.close();
           }
            return true;
        });
    }

    initHtml(): string {
        return `
        <style>
            #close{
                position:absolute;
                top:0px;
                right: 0px;
                color: #D6D6D6;
            }
            #modal-wrap{
                position: absolute;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                background: var(--dark-background,#ffffff);
                z-index: 2000;
            }
            #window{
                overflow: auto;
                position: absolute;
                top: 21px;
                left: 0;
                width: calc(100% - 10px);
                height: calc(100% - 21px);
                padding-left: 10px;
            }
            #loading{
                position: absolute;
                left: calc(50% - 20px);
                top: calc(50% - 20px);
                width:40px;
                height:40px;
                transform: rotate(360deg);
                animation: rotation 2s linear infinite;
                -webkit-animation: rotation 2s linear infinite;
            }
            @keyframes rotation{
                from {
                    -webkit-transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                }
            }
            .line{
                line-height:27px;
                white-space: nowrap;
            }
            span{
                display: inline-block;
            }
        </style>
        <div id="modal-wrap">
            <canvas id="canvas" style="display: none"> </canvas>
            <lit-icon id="close" name="close" size="20"> </lit-icon>
            <div id="window"> </div>
             <lit-icon id="loading" name="loading" size="40"> </lit-icon>
        </div>
        `;
    }
}

class Disassembling {
    addr = '';
    binary = '';
    type = '';
    code = '';
}