1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16export const TabPaneComparisonHtml = ` 17<style> 18:host{ 19 display: flex; 20 flex-direction: column; 21 padding: 10px 10px 0 10px; 22 height: calc(100% - 10px - 31px); 23} 24.show{ 25 display: flex; 26 flex: 1; 27} 28.progress{ 29 bottom: 33px; 30 position: absolute; 31 height: 1px; 32 left: 0; 33 right: 0; 34} 35selector{ 36 display: none; 37} 38tab-pane-filter { 39 border: solid rgb(216,216,216) 1px; 40 float: left; 41 position: fixed; 42 bottom: 0; 43 width: 100%; 44} 45.loading{ 46 bottom: 0; 47 position: absolute; 48 left: 0; 49 right: 0; 50 width:100%; 51 background:transparent; 52 z-index: 999999; 53} 54</style> 55<div style="display: flex;flex-direction: row;height: 100%;"> 56 <selector id='show_table' class="show"> 57 <lit-slicer style="width:100%"> 58 <div style="width: 65%"> 59 <lit-table id="tb-comparison" style="height: auto" tree> 60 <lit-table-column width="30%" title="#Constructor" data-index="objectName" key="objectName" align="flex-start" order> 61 </lit-table-column> 62 <lit-table-column width="1fr" title="#New" data-index="addedCount" key="addedCount" align="flex-start" order> 63 </lit-table-column> 64 <lit-table-column width="1fr" title="#Deleted" data-index="removedCount" key="removedCount" align="flex-start" order> 65 </lit-table-column> 66 <lit-table-column width="1fr" title="#Delta" data-index="deltaCount" key="deltaCount" align="flex-start" order> 67 </lit-table-column> 68 <lit-table-column width="1fr" title="Alloc.Size" data-index="addedSize" key="addedSize" align="flex-start" order> 69 </lit-table-column> 70 <lit-table-column width="1fr" title="Freed Size" data-index="removedSize" key="removedSize" align="flex-start" order> 71 </lit-table-column> 72 <lit-table-column width="1fr" title="Size Delta" data-index="deltaSize" key="deltaSize" align="flex-start" order> 73 </lit-table-column> 74 </lit-table> 75 </div> 76 <lit-slicer-track ></lit-slicer-track> 77 <div style="flex: 1;display: flex; flex-direction: row;"> 78 <div style="flex: 1;display: flex; flex-direction: column;"> 79 <span slot="head" >Retainers</span> 80 <lit-table id="tb-retainer" style="height: calc(100% - 21px);" tree> 81 <lit-table-column width="30%" title="Object" data-index="objectName" key="objectName" align="flex-start" order> 82 </lit-table-column> 83 <lit-table-column width="1fr" title="distance" data-index="distance" key="distance" align="flex-start" order> 84 </lit-table-column> 85 <lit-table-column width="1fr" title="ShallowSize" data-index="shallowSize" key="shallowSize" align="flex-start" order> 86 </lit-table-column> 87 <lit-table-column width="1fr" title="" data-index="shallowPercent" key="shallowPercent" align="flex-start"> 88 </lit-table-column> 89 <lit-table-column width="1fr" title="RetainedSize" data-index="retainedSize" key="retainedSize" align="flex-start" order> 90 </lit-table-column> 91 <lit-table-column width="1fr" title="" data-index="retainedPercent" key="retainedPercent" align="flex-start"> 92 </lit-table-column> 93 </div> 94 </div> 95 </lit-table> 96 </lit-slicer> 97 </selector> 98 <lit-progress-bar class="progress"></lit-progress-bar> 99 <tab-pane-js-memory-filter id="filter" input inputLeftText first ></tab-pane-js-memory-filter> 100 <div class="loading"></div> 101</div> 102`; 103