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 TabPaneSummaryHtml = ` 17<style> 18:host{ 19 display: flex; 20 flex-direction: column; 21 padding: 10px 1px 0 0; 22 height: calc(100% - 25px); 23} 24.vessel { 25 /* overflow: hidden; */ 26 width: 100%; 27 height: 100%; 28} 29.vessel-left { 30 height: 79.5vh; 31 position: relative; 32 float: left; 33 max-width: 70% 34} 35.vessel-right { 36 height: 70vh; 37 box-sizing: border-box; 38 overflow: hidden; 39} 40.text{ 41 opacity: 0.9; 42 font-family: Helvetica; 43 font-size: 16px; 44 color: #000000; 45 line-height: 28px; 46 font-weight: 400; 47 margin-left: 70%; 48} 49ul{ 50 display: inline-flex; 51 margin-top: 0; 52 width: 40%; 53 position: absolute; 54 padding-left: 5px; 55} 56li{ 57 white-space: nowrap; 58 text-overflow: ellipsis; 59 overflow: hidden; 60 opacity: 0.9; 61 font-family: Helvetica; 62 font-size: 16px; 63 color: #000000; 64 line-height: 28px; 65 font-weight: 400; 66 cursor: pointer; 67} 68.active{ 69 border-bottom:2px solid #6C9BFA; 70} 71.stackText{ 72 opacity: 0.9; 73 font-family: Helvetica; 74 font-size: 16px; 75 color: #000000; 76 line-height: 28px; 77 font-weight: 400; 78} 79tab-pane-filter { 80 border: solid rgb(216,216,216) 1px; 81 float: left; 82 position: fixed; 83 bottom: 0; 84 width: 100%; 85} 86.summary_progress{ 87 bottom: 33px; 88 position: absolute; 89 height: 1px; 90 left: 0; 91 right: 0; 92} 93selector{ 94 display: none; 95} 96.summary_show{ 97 display: flex; 98 flex: 1; 99} 100.summary_retainers{ 101 height: 30px; 102 width: 100%; 103 display: flex; 104} 105#summary_right{ 106 height: calc(100% - 30px); 107} 108</style> 109<div style="display: flex;flex-direction: row;height: 100%;"> 110<selector id='show_table' class="summary_show"> 111 <lit-slicer style="width:100%"> 112 <div id="summary_left_table" style="width: 65%;"> 113 <lit-table id="summary_left" style="height: 100%" tree> 114 <lit-table-column width="40%" title="Constructor" data-index="objectName" key="objectName" 115 align="flex-start" order> 116 </lit-table-column> 117 <lit-table-column width="2fr" title="Distance" data-index="distance" key="distance" 118 align="flex-start" order> 119 </lit-table-column> 120 <lit-table-column width="2fr" title="ShallowSize" data-index="shallowSize" key="shallowSize" 121 align="flex-start" order> 122 </lit-table-column> 123 <lit-table-column width="1fr" title="" data-index="shallowPercent" key="shallowPercent" 124 align="flex-start"> 125 </lit-table-column> 126 <lit-table-column width="2fr" title="RetainedSize" data-index="retainedSize" key="retainedSize" 127 align="flex-start" order> 128 </lit-table-column> 129 <lit-table-column width="1fr" title="" data-index="retainedPercent" key="retainedPercent" 130 align="flex-start"> 131 </lit-table-column> 132 </lit-table> 133 </div> 134 <lit-slicer-track ></lit-slicer-track> 135 <div style="flex: 1;display: flex; flex-direction: row;"> 136 <div style="flex: 1;display: block;"> 137 <div class="summary_retainers"> 138 <ul> 139 <li href="#" id="retainers" style="width: 80px; text-align: center;" 140 class="active">Retainers</li> 141 <li href="#" id="stack" style="width: 120px; text-align: center; display: none; 142 padding-left: 10px;">Allocation stack</li> 143 </ul> 144 </div> 145 <lit-table id="summary_right" tree> 146 <lit-table-column width="40%" title="Object" data-index="objectName" key="objectName" 147 align="flex-start" order> 148 </lit-table-column> 149 <lit-table-column width="2fr" title="Distance" data-index="distance" key="distance" 150 align="flex-start" order> 151 </lit-table-column> 152 <lit-table-column width="2fr" title="ShallowSize" data-index="shallowSize" key="shallowSize" 153 align="flex-start" order> 154 </lit-table-column> 155 <lit-table-column width="1fr" title="" data-index="shallowPercent" key="shallowPercent" 156 align="flex-start"> 157 </lit-table-column> 158 <lit-table-column width="2fr" title="RetainedSize" data-index="retainedSize" key="retainedSize" 159 align="flex-start" order> 160 </lit-table-column> 161 <lit-table-column width="1fr" title="" data-index="retainedPercent" key="retainedPercent" 162 align="flex-start"> 163 </lit-table-column> 164 </lit-table> 165 <text class="stackText" style="display: none;"></text> 166 <lit-table id="stackTable" style="height: auto; display: none" hideDownload> 167 <lit-table-column width="100%" title="" data-index="name" key="name" align="flex-start" order> 168 </lit-table-column> 169 </lit-table> 170 </div> 171 </div> 172 </lit-slicer> 173</selector> 174<tab-pane-js-memory-filter id="filter" input inputLeftText></tab-pane-js-memory-filter> 175<lit-progress-bar class="summary_progress"></lit-progress-bar> 176</div> 177`; 178