From f0c2ec1fa435ffaecc5f75e04184d3f6c56d6465 Mon Sep 17 00:00:00 2001 From: David Back Date: Wed, 7 Nov 2018 16:02:15 -0800 Subject: [PATCH] entity list data-driven resizable addable/removable columns --- scripts/system/html/css/edit-style.css | 269 ++++-------- scripts/system/html/entityList.html | 67 +-- scripts/system/html/js/entityList.js | 580 ++++++++++++++++++------- scripts/system/html/js/listView.js | 17 +- 4 files changed, 530 insertions(+), 403 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index cf7124d9eb..d0a83b9937 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -110,6 +110,7 @@ thead { tbody { width: 100%; + display: block; } tfoot { @@ -185,13 +186,18 @@ th { td { overflow: hidden; - text-overflow: ellipsis; + text-overflow: clip; white-space: nowrap; word-wrap: nowrap; padding-left: 12px; padding-right: 12px; } +td.hidden { + padding-left: 0px; + padding-right: 0px; +} + td.url { white-space: nowrap; overflow: hidden; @@ -777,20 +783,15 @@ hr { color: #252525; } -.multiselect { - position: relative; -} -.select-box { +.multiselect-box { position: absolute; } -.select-box select { +.multiselect-box select { font-family: FiraSans-SemiBold; font-size: 15px; color: #afafaf; background-color: #252525; border: none; - height: 28px; - width: 107px; text-align-last: center; } .over-select { @@ -800,6 +801,41 @@ hr { top: 0; bottom: 0; } +.multiselect-options { + position: absolute; + display: none; + border: none; +} +.multiselect-options span { + font-family: hifi-glyphs; + font-size: 13px; + color: #000000; +} +.multiselect-options label { + z-index: 2; + display: block; + font-family: FiraSans-SemiBold; + font-size: 11px; + color: #000000; + background-color: #afafaf; +} +.multiselect-options label:hover { + background-color: #1e90ff; +} +.multiselect-options input[type=checkbox] + label { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADUOYnF4LQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIMSURBVFjD7ZmxkqowFIZ/7mwJPen1AezV3t6hFvrQhweAHvrQ8wL2xt4HwD7ppd+tvHOvu0gCYdEZTsmAfpNzzpcTcAB84o3iD94sZuCx4+Pxwvl8dl4JcL1ef84lMQPPwBZDSgkp5XsASylBKUUYhhBCvDbw7XYDpRRKKTRNA8YYOOevC5ymKZRS/13jnHdCTwLMOW8tAc45GGNomuY1gKuq6lxFIQQopdMDXy4X5HmudW8URdMCSynBGNOG3Ww20wHf9dVWl4+wbav7a8CMsW9G+Cm22+1T2F8BzvMc1+u18z5CCJIkseNhKSX2+z2qqjLWl84zhBAURQHXde0A31Oa57nWbqSrLwDwPA9FUcD3fTtb82NKu8QOAHVda+srSRJt2E7gtpQKIXA4HH6csmzpyxj4dDo9TalSCpRS1HX9TV86RujSlxGwlBJpmnY+rJRCGIZ/s2BTX9qnZgBwHAee52mJ/l7nx+PRqr6MVtj3fZRlaVRf/5aGDX0Z17DrusiyrHfqhuqrt9aiKEIcx4OBTfU1aOMIggBlWYIQ0utP+uhr8CyxXC5RFIUxdBAE1srKePgxbcbVamWlnAZNa7rNSAhBlmWv8yLlWTPa0Nco83BbM2ZZZsUIowzwj80YxzEWi8VoB4IPGz9yb0YhBHa73agnGGtHJNd1R4ed9FVV33Awf6ebgd8b+Av9A/rq6s3hjgAAAABJRU5ErkJggg=='); + background-size: 11px 11px; + background-position: top 5px left 14px; +} +.multiselect-options input[type=checkbox]:enabled + label:hover { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADUOYnF4LQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIMSURBVFjD7ZmxkqowFIZ/7mwJPen1AezV3t6hFvrQhweAHvrQ8wL2xt4HwD7ppd+tvHOvu0gCYdEZTsmAfpNzzpcTcAB84o3iD94sZuCx4+Pxwvl8dl4JcL1ef84lMQPPwBZDSgkp5XsASylBKUUYhhBCvDbw7XYDpRRKKTRNA8YYOOevC5ymKZRS/13jnHdCTwLMOW8tAc45GGNomuY1gKuq6lxFIQQopdMDXy4X5HmudW8URdMCSynBGNOG3Ww20wHf9dVWl4+wbav7a8CMsW9G+Cm22+1T2F8BzvMc1+u18z5CCJIkseNhKSX2+z2qqjLWl84zhBAURQHXde0A31Oa57nWbqSrLwDwPA9FUcD3fTtb82NKu8QOAHVda+srSRJt2E7gtpQKIXA4HH6csmzpyxj4dDo9TalSCpRS1HX9TV86RujSlxGwlBJpmnY+rJRCGIZ/s2BTX9qnZgBwHAee52mJ/l7nx+PRqr6MVtj3fZRlaVRf/5aGDX0Z17DrusiyrHfqhuqrt9aiKEIcx4OBTfU1aOMIggBlWYIQ0utP+uhr8CyxXC5RFIUxdBAE1srKePgxbcbVamWlnAZNa7rNSAhBlmWv8yLlWTPa0Nco83BbM2ZZZsUIowzwj80YxzEWi8VoB4IPGz9yb0YhBHa73agnGGtHJNd1R4ed9FVV33Awf6ebgd8b+Av9A/rq6s3hjgAAAABJRU5ErkJggg=='); +} +.multiselect-options input[type=checkbox]:checked + label { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADMveELP9QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIqSURBVFjD7ZmxkqowFIb/7GwJPfT6APZib+9QC33o4QGghz70vIC9sfcBsE966bPNWlxnlQTDRWc4JUT4hpPz5SQSAAofFF/4sJiBx47v+wun04m8E+B6vVbzlJiBZ2CLIYRQQgj1EcBCCEUpRRRF4Jyrtwa+Xq+glEJKia7rkKYpGGPqbYHzPFdSyn+uMcZ6oScBZowpzvmje0jTVHVd9x7ATdMoxtjTMZxzUErV5MDn81mVZak1No7jab+wEEKlaaoNGwQBmQz4pq9H8/IeNo5jMmnRpWmKeyP8FZvN5insfwEuy1JdLpfecb7vI8uy3tb2Szelu91ONU1jtP9jjKmmabRgq6qC4zh2VrpbSsuy1FqNdPUFAK7roqoqeJ6ntXH4Mk1pn9gBoG1bbX1lWaYN2wv8KKWcc+z3+z+7LFv6MgY+Ho9PUyqlBKUUbduqe33pGKFPX0bAQgiV53nvj6WUiKIIt2K0qS/tXTMAEELguq6W6H/nOQ6Hg1V9GX1hz/NIXdckCALtB7Vta1VfxnPYcRwURUEeNSGmYaqvwVqL45gkSfIysKm+Xlo4wjAkdV3D9/1BLxmir5d7ieVySaqqMoYOw3CwEV5ufkyLcbVaIUkSq2d1xt2abjH6vo+iKKwfLA5uL58Vow19jdIPPyrGoiisGGGUBv6+GJMkwWKxGO2M+dvGQ36LEZxztd1uRz0Qt7ZFchwHY8NOelQ1NAjm/+lm4M8G/gH2zx33BSr7jAAAAABJRU5ErkJggg=='); +} +.multiselect-options input[type=checkbox]:checked + label:hover { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADMveELP9QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIqSURBVFjD7ZmxkqowFIb/7GwJPfT6APZib+9QC33o4QGghz70vIC9sfcBsE966bPNWlxnlQTDRWc4JUT4hpPz5SQSAAofFF/4sJiBx47v+wun04m8E+B6vVbzlJiBZ2CLIYRQQgj1EcBCCEUpRRRF4Jyrtwa+Xq+glEJKia7rkKYpGGPqbYHzPFdSyn+uMcZ6oScBZowpzvmje0jTVHVd9x7ATdMoxtjTMZxzUErV5MDn81mVZak1No7jab+wEEKlaaoNGwQBmQz4pq9H8/IeNo5jMmnRpWmKeyP8FZvN5insfwEuy1JdLpfecb7vI8uy3tb2Szelu91ONU1jtP9jjKmmabRgq6qC4zh2VrpbSsuy1FqNdPUFAK7roqoqeJ6ntXH4Mk1pn9gBoG1bbX1lWaYN2wv8KKWcc+z3+z+7LFv6MgY+Ho9PUyqlBKUUbduqe33pGKFPX0bAQgiV53nvj6WUiKIIt2K0qS/tXTMAEELguq6W6H/nOQ6Hg1V9GX1hz/NIXdckCALtB7Vta1VfxnPYcRwURUEeNSGmYaqvwVqL45gkSfIysKm+Xlo4wjAkdV3D9/1BLxmir5d7ieVySaqqMoYOw3CwEV5ufkyLcbVaIUkSq2d1xt2abjH6vo+iKKwfLA5uL58Vow19jdIPPyrGoiisGGGUBv6+GJMkwWKxGO2M+dvGQ36LEZxztd1uRz0Qt7ZFchwHY8NOelQ1NAjm/+lm4M8G/gH2zx33BSr7jAAAAABJRU5ErkJggg=='); +} div.refresh { box-sizing: border-box; @@ -1112,57 +1148,32 @@ body#entity-list-body { padding-bottom: 24px; } -#filter-type-select-box select { +#filter-type-multiselect-box select { border-radius: 14.5px; + width: 107px; + height: 28px; } -#filter-type-checkboxes { - position: absolute; - z-index: 2; +#filter-type-options { + position: absolute; top: 48px; - display: none; - border: none; } -#filter-type-checkboxes div { - position: relative; - height: 22px; +#filter-type-options div { + position: relative; + height: 22px; } -#filter-type-checkboxes span { +#filter-type-options span { position: relative; top: 3px; - font-family: hifi-glyphs; - font-size: 13px; - color: #000000; padding-left: 6px; padding-right: 4px; } -#filter-type-checkboxes label { - position: absolute; - top: -20px; +#filter-type-options label { + position: absolute; + top: -20px; z-index: 2; - display: block; - font-family: FiraSans-SemiBold; - font-size: 11px; - color: #000000; - background-color: #afafaf; - width: 200px; - height: 22px; - padding-top: 1px; -} -#filter-type-checkboxes label:hover { - background-color: #1e90ff; -} -#filter-type-checkboxes input[type=checkbox] + label { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADUOYnF4LQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIMSURBVFjD7ZmxkqowFIZ/7mwJPen1AezV3t6hFvrQhweAHvrQ8wL2xt4HwD7ppd+tvHOvu0gCYdEZTsmAfpNzzpcTcAB84o3iD94sZuCx4+Pxwvl8dl4JcL1ef84lMQPPwBZDSgkp5XsASylBKUUYhhBCvDbw7XYDpRRKKTRNA8YYOOevC5ymKZRS/13jnHdCTwLMOW8tAc45GGNomuY1gKuq6lxFIQQopdMDXy4X5HmudW8URdMCSynBGNOG3Ww20wHf9dVWl4+wbav7a8CMsW9G+Cm22+1T2F8BzvMc1+u18z5CCJIkseNhKSX2+z2qqjLWl84zhBAURQHXde0A31Oa57nWbqSrLwDwPA9FUcD3fTtb82NKu8QOAHVda+srSRJt2E7gtpQKIXA4HH6csmzpyxj4dDo9TalSCpRS1HX9TV86RujSlxGwlBJpmnY+rJRCGIZ/s2BTX9qnZgBwHAee52mJ/l7nx+PRqr6MVtj3fZRlaVRf/5aGDX0Z17DrusiyrHfqhuqrt9aiKEIcx4OBTfU1aOMIggBlWYIQ0utP+uhr8CyxXC5RFIUxdBAE1srKePgxbcbVamWlnAZNa7rNSAhBlmWv8yLlWTPa0Nco83BbM2ZZZsUIowzwj80YxzEWi8VoB4IPGz9yb0YhBHa73agnGGtHJNd1R4ed9FVV33Awf6ebgd8b+Av9A/rq6s3hjgAAAABJRU5ErkJggg=='); - background-size: 11px 11px; - background-position: top 5px left 14px; -} -#filter-type-checkboxes input[type=checkbox]:checked + label { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADMveELP9QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIqSURBVFjD7ZmxkqowFIb/7GwJPfT6APZib+9QC33o4QGghz70vIC9sfcBsE966bPNWlxnlQTDRWc4JUT4hpPz5SQSAAofFF/4sJiBx47v+wun04m8E+B6vVbzlJiBZ2CLIYRQQgj1EcBCCEUpRRRF4Jyrtwa+Xq+glEJKia7rkKYpGGPqbYHzPFdSyn+uMcZ6oScBZowpzvmje0jTVHVd9x7ATdMoxtjTMZxzUErV5MDn81mVZak1No7jab+wEEKlaaoNGwQBmQz4pq9H8/IeNo5jMmnRpWmKeyP8FZvN5insfwEuy1JdLpfecb7vI8uy3tb2Szelu91ONU1jtP9jjKmmabRgq6qC4zh2VrpbSsuy1FqNdPUFAK7roqoqeJ6ntXH4Mk1pn9gBoG1bbX1lWaYN2wv8KKWcc+z3+z+7LFv6MgY+Ho9PUyqlBKUUbduqe33pGKFPX0bAQgiV53nvj6WUiKIIt2K0qS/tXTMAEELguq6W6H/nOQ6Hg1V9GX1hz/NIXdckCALtB7Vta1VfxnPYcRwURUEeNSGmYaqvwVqL45gkSfIysKm+Xlo4wjAkdV3D9/1BLxmir5d7ieVySaqqMoYOw3CwEV5ufkyLcbVaIUkSq2d1xt2abjH6vo+iKKwfLA5uL58Vow19jdIPPyrGoiisGGGUBv6+GJMkwWKxGO2M+dvGQ36LEZxztd1uRz0Qt7ZFchwHY8NOelQ1NAjm/+lm4M8G/gH2zx33BSr7jAAAAABJRU5ErkJggg=='); - background-size: 11px 11px; - background-position: top 5px left 14px; -} -#filter-type-checkboxes input[type=checkbox]:hover + label { - background-color: #1e90ff; + height: 22px; + width: 200px; + padding-top: 1px; } #filter-search-and-icon { @@ -1228,6 +1239,37 @@ input[type=button]#export { color: #afafaf; } +#entity-table-columns-multiselect { + position: absolute; + top: 51px; + right: 22px; +} +#entity-table-columns-multiselect-box select { + height: 28px; + width: 20px; + background-color: #1c1c1c; + border-top-right-radius: 7px; +} +#entity-table-columns-options { + position: absolute; + top: 50px; + right: 110px; +} +#entity-table-columns-options div { + position: relative; + height: 22px; +} +#entity-table-columns-options label { + position: absolute; + top: -22px; + height: 22px; + width: 100px; + padding-top: 4px; +} +#entity-table-columns-options input[type=checkbox] + label { + padding-left: 30px; +} + #entity-table-scroll { /* Height is set by JavaScript. */ width: 100%; @@ -1281,10 +1323,6 @@ input[type=button]#export { overflow: hidden; } -.verticesCount, .texturesCount, .texturesSize, .drawCalls { - text-align: right; -} - #entity-table th { display: inline-block; box-sizing: border-box; @@ -1307,14 +1345,6 @@ input[type=button]#export { left: 4px; } -#entity-table th#entity-hasScript { - overflow: visible; -} - -#entity-table th#entity-hasScript .glyph { - text-transform: none; -} - #entity-table thead .sort-order { display: inline-block; width: 8px; @@ -1322,128 +1352,21 @@ input[type=button]#export { vertical-align: middle; } -#entity-table th #info-toggle { - display: inline-block; - position: absolute; - left: initial; - right: 0; - width: 11px; - background-color: #1c1c1c; - z-index: 100; -} -#entity-table th #info-toggle span { - position: relative; - left: -2px; -} - -th#entity-hasTransparent .glyph { - font-weight: normal; - font-size: 24px !important; - margin: -6px; - position: relative; - top: -6px; -} -th#entity-hasTransparent .sort-order { - position: relative; - top: -4px; +#entity-table thead .resizer { + position: absolute; + top: 1px; + height: 26px; + width: 10px; + cursor: col-resize; } #entity-table td { box-sizing: border-box; } - #entity-table td.glyph { text-align: center; padding: 0; } -#entity-table td.hasTransparent.glyph { - font-size: 22px; - position: relative; - top: -1px; -} - -#entity-table td.isBaked.glyph { - font-size: 22px; - position: relative; - top: -1px; -} - -#col-type { - width: 16%; -} -#col-name { - width: 34%; -} -#col-url { - width: 34%; -} -#col-locked, #col-visible { - width: 9%; -} -#col-verticesCount, #col-texturesCount, #col-texturesSize, #col-hasTransparent, #col-isBaked, #col-drawCalls, #col-hasScript { - width: 0; -} - -.showExtraInfo #col-type { - width: 10%; -} -.showExtraInfo #col-name { - width: 19%; -} -.showExtraInfo #col-url { - width: 19%; -} -.showExtraInfo #col-locked, .showExtraInfo #col-visible { - width: 4%; -} -.showExtraInfo #col-verticesCount { - width: 8%; -} -.showExtraInfo #col-texturesCount { - width: 8%; -} -.showExtraInfo #col-texturesSize { - width: 10%; -} -.showExtraInfo #col-hasTransparent { - width: 4%; -} -.showExtraInfo #col-isBaked { - width: 8%; -} -.showExtraInfo #col-drawCalls { - width: 8%; -} -.showExtraInfo #col-hasScript { - width: 6%; -} - -th#entity-verticesCount, th#entity-texturesCount, th#entity-texturesSize, th#entity-hasTransparent, th#entity-isBaked, th#entity-drawCalls, -th#entity-hasScript { - display: none; -} - -.verticesCount, .texturesCount, .texturesSize, .hasTransparent, .isBaked, .drawCalls, .hasScript { - display: none; -} - -#entity-visible { - border: none; -} - -.showExtraInfo #entity-verticesCount, .showExtraInfo #entity-texturesCount, .showExtraInfo #entity-texturesSize, -.showExtraInfo #entity-hasTransparent, .showExtraInfo #entity-isBaked, .showExtraInfo #entity-drawCalls, .showExtraInfo #entity-hasScript { - display: inline-block; -} - -.showExtraInfo .verticesCount, .showExtraInfo .texturesCount, .showExtraInfo .texturesSize, .showExtraInfo .hasTransparent, -.showExtraInfo .isBaked, .showExtraInfo .drawCalls, .showExtraInfo .hasScript { - display: table-cell; -} - -.showExtraInfo #entity-visible { - border-right: 1px solid #575757; -} #properties-base { border-top: none !important; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 2e7ac58ac1..84397fdb5a 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -31,14 +31,14 @@
-
-
+
+
-
+
@@ -53,54 +53,21 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
TypeDNameFileVertsTextsText MBBakedDrawsk
+
+
+ +
+
+
+ +
+
There are no entities to display. Please check your filters or create an entity to begin.
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 41c957c4fa..0d75f6c1d1 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -10,36 +10,103 @@ const ASCENDING_SORT = 1; const DESCENDING_SORT = -1; const ASCENDING_STRING = '▴'; const DESCENDING_STRING = '▾'; -const LOCKED_GLYPH = ""; -const VISIBLE_GLYPH = ""; -const TRANSPARENCY_GLYPH = ""; -const BAKED_GLYPH = ""; -const SCRIPT_GLYPH = "k"; const BYTES_PER_MEGABYTE = 1024 * 1024; const IMAGE_MODEL_NAME = 'default-image-model.fbx'; const COLLAPSE_EXTRA_INFO = "E"; const EXPAND_EXTRA_INFO = "D"; const FILTER_IN_VIEW_ATTRIBUTE = "pressed"; const WINDOW_NONVARIABLE_HEIGHT = 227; -const NUM_COLUMNS = 12; const EMPTY_ENTITY_ID = "0"; const MAX_LENGTH_RADIUS = 9; +const MINIMUM_COLUMN_WIDTH = 24; +const SCROLLBAR_WIDTH = 20; +const RESIZER_WIDTH = 10; const DELETE = 46; // Key code for the delete key. const KEY_P = 80; // Key code for letter p used for Parenting hotkey. -const COLUMN_INDEX = { - TYPE: 0, - NAME: 1, - URL: 2, - LOCKED: 3, - VISIBLE: 4, - VERTICLES_COUNT: 5, - TEXTURES_COUNT: 6, - TEXTURES_SIZE: 7, - HAS_TRANSPARENT: 8, - IS_BAKED: 9, - DRAW_CALLS: 10, - HAS_SCRIPT: 11 +const COLUMNS = { + type: { + columnHeader: "Type", + propertyID: "type", + initialWidth: 0.16, + initiallyShown: true, + alwaysShown: true, + }, + name: { + columnHeader: "Name", + propertyID: "name", + initialWidth: 0.34, + initiallyShown: true, + alwaysShown: true, + }, + url: { + columnHeader: "File", + dropdownLabel: "File", + propertyID: "url", + initialWidth: 0.34, + initiallyShown: true, + }, + locked: { + columnHeader: "", + glyph: true, + propertyID: "locked", + initialWidth: 0.08, + initiallyShown: true, + alwaysShown: true, + }, + visible: { + columnHeader: "", + glyph: true, + propertyID: "visible", + initialWidth: 0.08, + initiallyShown: true, + alwaysShown: true, + }, + verticesCount: { + columnHeader: "Verts", + dropdownLabel: "Vertices", + propertyID: "verticesCount", + initialWidth: 0.08, + }, + texturesCount: { + columnHeader: "Texts", + dropdownLabel: "Textures", + propertyID: "texturesCount", + initialWidth: 0.08, + }, + texturesSize: { + columnHeader: "Text MB", + dropdownLabel: "Texture Size", + propertyID: "texturesSize", + initialWidth: 0.10, + }, + hasTransparent: { + columnHeader: "", + glyph: true, + dropdownLabel: "Transparency", + propertyID: "hasTransparent", + initialWidth: 0.04, + }, + isBaked: { + columnHeader: "", + glyph: true, + dropdownLabel: "Baked", + propertyID: "isBaked", + initialWidth: 0.08, + }, + drawCalls: { + columnHeader: "Draws", + dropdownLabel: "Draws", + propertyID: "drawCalls", + initialWidth: 0.08, + }, + hasScript: { + columnHeader: "k", + glyph: true, + dropdownLabel: "Script", + propertyID: "hasScript", + initialWidth: 0.06, + }, }; const COMPARE_ASCENDING = function(a, b) { @@ -100,11 +167,18 @@ var entityList = null; // The ListView */ var entityListContextMenu = null; -var currentSortColumn = 'type'; +var currentSortColumn = null; var currentSortOrder = ASCENDING_SORT; +var elSortOrders = {}; var typeFilters = []; var isFilterInView = false; -var showExtraInfo = false; + +var columns = []; +var columnsByID = {}; +var currentResizeEl = null; +var startResizeEvent = null; +var resizeColumnIndex = 0; +var startThClick = null; const ENABLE_PROFILING = false; var profileIndent = ''; @@ -129,67 +203,28 @@ debugPrint = function (message) { function loaded() { openEventBridge(function() { elEntityTable = document.getElementById("entity-table"); + elEntityTableHeader = document.getElementById("entity-table-header"); elEntityTableBody = document.getElementById("entity-table-body"); elEntityTableScroll = document.getElementById("entity-table-scroll"); - elEntityTableHeaderRow = document.querySelectorAll("#entity-table thead th"); elRefresh = document.getElementById("refresh"); elToggleLocked = document.getElementById("locked"); elToggleVisible = document.getElementById("visible"); elDelete = document.getElementById("delete"); - elFilterTypeSelectBox = document.getElementById("filter-type-select-box"); + elFilterTypeMultiselectBox = document.getElementById("filter-type-multiselect-box"); elFilterTypeText = document.getElementById("filter-type-text"); - elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes"); + elFilterTypeOptions = document.getElementById("filter-type-options"); elFilterSearch = document.getElementById("filter-search"); elFilterInView = document.getElementById("filter-in-view") elFilterRadius = document.getElementById("filter-radius"); elExport = document.getElementById("export"); elPal = document.getElementById("pal"); - elInfoToggle = document.getElementById("info-toggle"); - elInfoToggleGlyph = elInfoToggle.firstChild; elSelectedEntitiesCount = document.getElementById("selected-entities-count"); elVisibleEntitiesCount = document.getElementById("visible-entities-count"); elNoEntitiesMessage = document.getElementById("no-entities"); + elColumnsMultiselectBox = document.getElementById("entity-table-columns-multiselect-box"); + elColumnsOptions = document.getElementById("entity-table-columns-options"); document.body.onclick = onBodyClick; - document.getElementById("entity-name").onclick = function() { - setSortColumn('name'); - }; - document.getElementById("entity-type").onclick = function() { - setSortColumn('type'); - }; - document.getElementById("entity-url").onclick = function() { - setSortColumn('url'); - }; - document.getElementById("entity-locked").onclick = function() { - setSortColumn('locked'); - }; - document.getElementById("entity-visible").onclick = function() { - setSortColumn('visible'); - }; - document.getElementById("entity-verticesCount").onclick = function() { - setSortColumn('verticesCount'); - }; - document.getElementById("entity-texturesCount").onclick = function() { - setSortColumn('texturesCount'); - }; - document.getElementById("entity-texturesSize").onclick = function() { - setSortColumn('texturesSize'); - }; - document.getElementById("entity-hasTransparent").onclick = function() { - setSortColumn('hasTransparent'); - }; - document.getElementById("entity-isBaked").onclick = function() { - setSortColumn('isBaked'); - }; - document.getElementById("entity-drawCalls").onclick = function() { - setSortColumn('drawCalls'); - }; - document.getElementById("entity-hasScript").onclick = function() { - setSortColumn('hasScript'); - }; - elRefresh.onclick = function() { - refreshEntities(); - }; elToggleLocked.onclick = function() { EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' })); }; @@ -205,52 +240,139 @@ function loaded() { elDelete.onclick = function() { EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' })); }; - elFilterTypeSelectBox.onclick = onToggleTypeDropdown; + elRefresh.onclick = refreshEntities; + elFilterTypeMultiselectBox.onclick = onToggleTypeDropdown; elFilterSearch.onkeyup = refreshEntityList; elFilterSearch.onsearch = refreshEntityList; - elFilterInView.onclick = toggleFilterInView; + elFilterInView.onclick = onToggleFilterInView; elFilterRadius.onkeyup = onRadiusChange; elFilterRadius.onchange = onRadiusChange; - elFilterRadius.onclick = onRadiusChange; - elInfoToggle.onclick = toggleInfo; + elColumnsMultiselectBox.onclick = onToggleColumnsDropdown; // create filter type dropdown checkboxes with label and icon for each type for (let i = 0; i < FILTER_TYPES.length; ++i) { let type = FILTER_TYPES[i]; let typeFilterID = "filter-type-" + type; + let elDiv = document.createElement('div'); - let elLabel = document.createElement('label'); - elLabel.setAttribute("for", typeFilterID); - elLabel.innerText = type; - let elSpan = document.createElement('span'); - elSpan.setAttribute("class", "typeIcon"); - elSpan.innerHTML = ICON_FOR_TYPE[type]; + elDiv.onclick = onToggleTypeFilter; + elFilterTypeOptions.appendChild(elDiv); + let elInput = document.createElement('input'); elInput.setAttribute("type", "checkbox"); elInput.setAttribute("id", typeFilterID); elInput.setAttribute("filterType", type); elInput.checked = true; // all types are checked initially - toggleTypeFilter(elInput, false); // add all types to the initial types filter elDiv.appendChild(elInput); - elLabel.insertBefore(elSpan, elLabel.childNodes[0]); + + let elLabel = document.createElement('label'); + elLabel.setAttribute("for", typeFilterID); + elLabel.innerText = type; elDiv.appendChild(elLabel); - elFilterTypeCheckboxes.appendChild(elDiv); - elDiv.onclick = onToggleTypeFilter; + + let elSpan = document.createElement('span'); + elSpan.setAttribute("class", "typeIcon"); + elSpan.innerHTML = ICON_FOR_TYPE[type]; + + elLabel.insertBefore(elSpan, elLabel.childNodes[0]); + + toggleTypeFilter(elInput, false); // add all types to the initial types filter } + // create columns + elHeaderTr = document.createElement("tr"); + elEntityTableHeader.appendChild(elHeaderTr); + let columnIndex = 0; + for (let columnID in COLUMNS) { + let columnData = COLUMNS[columnID]; + + let thID = "entity-" + columnID; + let elTh = document.createElement("th"); + elTh.setAttribute("id", thID); + elTh.setAttribute("data-resizable-column-id", thID); + if (columnData.glyph) { + let elGlyph = document.createElement("span"); + elGlyph.className = "glyph"; + elGlyph.innerHTML = columnData.columnHeader; + elTh.appendChild(elGlyph); + } else { + elTh.innerText = columnData.columnHeader; + } + elTh.onmousedown = function() { + startThClick = this; + }; + elTh.onmouseup = function() { + if (startThClick === this) { + setSortColumn(columnID); + } + startThClick = null; + }; + + let elResizer = document.createElement("span"); + elResizer.className = "resizer"; + elResizer.innerHTML = " "; + elResizer.setAttribute("columnIndex", columnIndex); + elResizer.onmousedown = onStartResize; + elTh.appendChild(elResizer); + + let elSortOrder = document.createElement("span"); + elSortOrder.className = "sort-order"; + elTh.appendChild(elSortOrder); + elHeaderTr.appendChild(elTh); + + elSortOrders[columnID] = document.querySelector('#' + thID + ' .sort-order'); + if (currentSortColumn === null) { + currentSortColumn = columnID; + } + + // add column to columns dropdown if it is not set to be always shown + if (columnData.alwaysShown !== true) { + let columnDropdownID = "entity-table-column-" + columnID; + + let elDiv = document.createElement('div'); + elDiv.onclick = onToggleColumn; + elColumnsOptions.appendChild(elDiv); + + let elInput = document.createElement('input'); + elInput.setAttribute("type", "checkbox"); + elInput.setAttribute("id", columnDropdownID); + elInput.setAttribute("columnID", columnID); + elInput.checked = columnData.initiallyShown === true; + elDiv.appendChild(elInput); + + let elLabel = document.createElement('label'); + elLabel.setAttribute("for", columnDropdownID); + elLabel.innerText = columnData.dropdownLabel; + elDiv.appendChild(elLabel); + } + + let initialWidth = columnData.initiallyShown === true ? columnData.initialWidth : 0; + columns.push({ + columnID: columnID, + elTh: elTh, + elResizer: elResizer, + width: initialWidth, + data: columnData + }); + columnsByID[columnID] = columns[columnIndex]; + + ++columnIndex; + } + + elEntityTableHeaderRow = document.querySelectorAll("#entity-table thead th"); + entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow, createRow, updateRow, clearRow, WINDOW_NONVARIABLE_HEIGHT); entityListContextMenu = new EntityListContextMenu(); - function startRenamingEntity(entityID) { let entity = entitiesByID[entityID]; if (!entity || entity.locked || !entity.elRow) { return; } - let elCell = entity.elRow.childNodes[COLUMN_INDEX.NAME]; + let elCell = entity.elRow.childNodes[getColumnIndex("name")]; let elRenameInput = document.createElement("input"); elRenameInput.setAttribute('class', 'rename-entity'); elRenameInput.value = entity.name; @@ -467,6 +589,7 @@ function loaded() { PROFILE("update-dom", function() { entityList.itemData = visibleEntities; entityList.refresh(); + updateColumnWidths(); }); refreshFooter(); @@ -549,26 +672,12 @@ function loaded() { refreshNoEntitiesMessage(); } - var elSortOrder = { - name: document.querySelector('#entity-name .sort-order'), - type: document.querySelector('#entity-type .sort-order'), - url: document.querySelector('#entity-url .sort-order'), - locked: document.querySelector('#entity-locked .sort-order'), - visible: document.querySelector('#entity-visible .sort-order'), - verticesCount: document.querySelector('#entity-verticesCount .sort-order'), - texturesCount: document.querySelector('#entity-texturesCount .sort-order'), - texturesSize: document.querySelector('#entity-texturesSize .sort-order'), - hasTransparent: document.querySelector('#entity-hasTransparent .sort-order'), - isBaked: document.querySelector('#entity-isBaked .sort-order'), - drawCalls: document.querySelector('#entity-drawCalls .sort-order'), - hasScript: document.querySelector('#entity-hasScript .sort-order'), - }; function setSortColumn(column) { PROFILE("set-sort-column", function() { if (currentSortColumn === column) { currentSortOrder *= -1; } else { - elSortOrder[currentSortColumn].innerHTML = ""; + elSortOrders[currentSortColumn].innerHTML = ""; currentSortColumn = column; currentSortOrder = ASCENDING_SORT; } @@ -576,8 +685,9 @@ function loaded() { refreshEntityList(); }); } + function refreshSortOrder() { - elSortOrder[currentSortColumn].innerHTML = currentSortOrder === ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING; + elSortOrders[currentSortColumn].innerHTML = currentSortOrder === ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING; } function refreshEntities() { @@ -651,54 +761,33 @@ function loaded() { return notFound; } - function isGlyphColumn(columnIndex) { - return columnIndex === COLUMN_INDEX.LOCKED || columnIndex === COLUMN_INDEX.VISIBLE || - columnIndex === COLUMN_INDEX.HAS_TRANSPARENT || columnIndex === COLUMN_INDEX.IS_BAKED || - columnIndex === COLUMN_INDEX.HAS_SCRIPT; - } - function createRow() { - let row = document.createElement("tr"); - for (let i = 0; i < NUM_COLUMNS; i++) { - let column = document.createElement("td"); - if (isGlyphColumn(i)) { - column.className = 'glyph'; - } - row.appendChild(column); - } - row.oncontextmenu = onRowContextMenu; - row.onclick = onRowClicked; - row.ondblclick = onRowDoubleClicked; - return row; + let elRow = document.createElement("tr"); + columns.forEach(function(column) { + let elRowColumn = document.createElement("td"); + elRowColumn.className = getColumnClassName(column.columnID); + elRow.appendChild(elRowColumn); + }); + elRow.oncontextmenu = onRowContextMenu; + elRow.onclick = onRowClicked; + elRow.ondblclick = onRowDoubleClicked; + return elRow; } function updateRow(elRow, itemData) { // update all column texts and glyphs to this entity's data - let typeCell = elRow.childNodes[COLUMN_INDEX.TYPE]; - typeCell.innerText = itemData.type; - let nameCell = elRow.childNodes[COLUMN_INDEX.NAME]; - nameCell.innerText = itemData.name; - let urlCell = elRow.childNodes[COLUMN_INDEX.URL]; - urlCell.innerText = itemData.url; - let lockedCell = elRow.childNodes[COLUMN_INDEX.LOCKED]; - lockedCell.innerHTML = itemData.locked ? LOCKED_GLYPH : null; - let visibleCell = elRow.childNodes[COLUMN_INDEX.VISIBLE]; - visibleCell.innerHTML = itemData.visible ? VISIBLE_GLYPH : null; - let verticesCountCell = elRow.childNodes[COLUMN_INDEX.VERTICLES_COUNT]; - verticesCountCell.innerText = itemData.verticesCount; - let texturesCountCell = elRow.childNodes[COLUMN_INDEX.TEXTURES_COUNT]; - texturesCountCell.innerText = itemData.texturesCount; - let texturesSizeCell = elRow.childNodes[COLUMN_INDEX.TEXTURES_SIZE]; - texturesSizeCell.innerText = itemData.texturesSize; - let hasTransparentCell = elRow.childNodes[COLUMN_INDEX.HAS_TRANSPARENT]; - hasTransparentCell.innerHTML = itemData.hasTransparent ? TRANSPARENCY_GLYPH : null; - let isBakedCell = elRow.childNodes[COLUMN_INDEX.IS_BAKED]; - isBakedCell.innerHTML = itemData.isBaked ? BAKED_GLYPH : null; - let drawCallsCell = elRow.childNodes[COLUMN_INDEX.DRAW_CALLS]; - drawCallsCell.innerText = itemData.drawCalls; - let hasScriptCell = elRow.childNodes[COLUMN_INDEX.HAS_SCRIPT]; - hasScriptCell.innerHTML = itemData.hasScript ? SCRIPT_GLYPH : null; - + for (let i = 0; i < columns.length; ++i) { + let column = columns[i]; + let elCell = elRow.childNodes[i]; + if (column.data.glyph) { + elCell.innerHTML = itemData[column.data.propertyID] ? column.data.columnHeader : null; + } else { + elCell.innerText = itemData[column.data.propertyID]; + } + elCell.style = "min-width:" + column.widthPx + "px;" + "max-width:" + column.widthPx + "px;"; + elCell.className = getColumnClassName(column.columnID); + } + // if this entity was previously selected flag it's row as selected if (itemData.selected) { elRow.className = 'selected'; @@ -723,16 +812,16 @@ function loaded() { } function clearRow(elRow) { - // reset all texts and glyphs for each of the row's column - for (let i = 0; i < NUM_COLUMNS; i++) { + // reset all texts and glyphs for each of the row's columns + for (let i = 0; i < columns.length; ++i) { let cell = elRow.childNodes[i]; - if (isGlyphColumn(i)) { + if (columns[i].data.glyph) { cell.innerHTML = ""; } else { cell.innerText = ""; } - } - + } + // clear the row from any associated entity let entityID = elRow.dataset.entityID; if (entityID && entitiesByID[entityID]) { @@ -744,7 +833,7 @@ function loaded() { elRow.dataset.entityID = EMPTY_ENTITY_ID; } - function toggleFilterInView() { + function onToggleFilterInView() { isFilterInView = !isFilterInView; if (isFilterInView) { elFilterInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE); @@ -761,17 +850,110 @@ function loaded() { EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value })); refreshEntities(); } + + function getColumnIndex(columnID) { + for (let i = 0; i < columns.length; ++i) { + if (columns[i].columnID === columnID) { + return i; + } + } + return -1; + } - function isTypeDropdownVisible() { - return elFilterTypeCheckboxes.style.display === "block"; + function getColumnClassName(columnID) { + let column = columnsByID[columnID]; + let visible = column.elTh.style.visibility !== "hidden"; + let className = column.data.glyph ? "glyph" : ""; + className += visible ? "" : " hidden"; + return className; + } + + function isColumnsDropdownVisible() { + return elColumnsOptions.style.display === "block"; + } + + function toggleColumnsDropdown() { + elColumnsOptions.style.display = isColumnsDropdownVisible() ? "none" : "block"; + } + + function onToggleColumnsDropdown(event) { + toggleColumnsDropdown(); + if (isTypeDropdownVisible()) { + toggleTypeDropdown(); + } + event.stopPropagation(); + } + + function toggleColumn(elInput, refresh) { + let columnID = elInput.getAttribute("columnID"); + let columnChecked = elInput.checked; + + if (columnChecked) { + let widthNeeded = columnsByID[columnID].data.initialWidth; + + let numberVisibleColumns = 0; + for (let i = 0; i < columns.length; ++i) { + let column = columns[i]; + if (column.columnID === columnID) { + column.width = widthNeeded; + } else if (column.width > 0) { + ++numberVisibleColumns; + } + } + + for (let i = 0; i < columns.length; ++i) { + let column = columns[i]; + if (column.columnID !== columnID && column.width > 0) { + column.width -= column.width * widthNeeded; + } + } + } else { + let widthLoss = 0; + + let numberVisibleColumns = 0; + for (let i = 0; i < columns.length; ++i) { + let column = columns[i]; + if (column.columnID === columnID) { + widthLoss = column.width; + column.width = 0; + } else if (column.width > 0) { + ++numberVisibleColumns; + } + } + + for (let i = 0; i < columns.length; ++i) { + let column = columns[i]; + if (column.columnID !== columnID && column.width > 0) { + let newTotalWidth = (1 - widthLoss); + column.width += (column.width / newTotalWidth) * widthLoss; + } + } + } + + updateColumnWidths(); + } + + function onToggleColumn(event) { + let elTarget = event.target; + if (elTarget instanceof HTMLInputElement) { + toggleColumn(elTarget, true); + } + event.stopPropagation(); + } + + function isTypeDropdownVisible() { + return elFilterTypeOptions.style.display === "block"; } function toggleTypeDropdown() { - elFilterTypeCheckboxes.style.display = isTypeDropdownVisible() ? "none" : "block"; + elFilterTypeOptions.style.display = isTypeDropdownVisible() ? "none" : "block"; } function onToggleTypeDropdown(event) { toggleTypeDropdown(); + if (isColumnsDropdownVisible()) { + toggleColumnsDropdown(); + } event.stopPropagation(); } @@ -808,26 +990,94 @@ function loaded() { } function onBodyClick(event) { - // if clicking anywhere outside of the type filter dropdown (since click event bubbled up to onBodyClick and - // propagation wasn't stopped by onToggleTypeFilter or onToggleTypeDropdown) and the dropdown is open then close it + // if clicking anywhere outside of the multiselect dropdowns (since click event bubbled up to onBodyClick and + // propagation wasn't stopped in the toggle type/column callbacks) and the dropdown is open then close it if (isTypeDropdownVisible()) { toggleTypeDropdown(); } - } - - function toggleInfo(event) { - showExtraInfo = !showExtraInfo; - if (showExtraInfo) { - elEntityTable.className = "showExtraInfo"; - elInfoToggleGlyph.innerHTML = COLLAPSE_EXTRA_INFO; - } else { - elEntityTable.className = ""; - elInfoToggleGlyph.innerHTML = EXPAND_EXTRA_INFO; + if (isColumnsDropdownVisible()) { + toggleColumnsDropdown(); } - entityList.resize(); - event.stopPropagation(); } - + + function onStartResize(event) { + startResizeEvent = event; + resizeColumnIndex = parseInt(this.getAttribute("columnIndex")); + event.stopPropagation(); + } + + function updateColumnWidths() { + let fullWidth = elEntityTableBody.offsetWidth; + let remainingWidth = fullWidth; + let scrollbarVisible = elEntityTableScroll.scrollHeight > elEntityTableScroll.clientHeight; + let resizerRight = scrollbarVisible ? SCROLLBAR_WIDTH - RESIZER_WIDTH/2 : -RESIZER_WIDTH/2; + let visibleColumns = 0; + + for (let i = columns.length - 1; i > 0; --i) { + let column = columns[i]; + column.widthPx = Math.ceil(column.width * fullWidth); + column.elTh.style = "min-width:" + column.widthPx + "px;" + "max-width:" + column.widthPx + "px;"; + let columnVisible = column.width > 0; + column.elTh.style.visibility = columnVisible ? "visible" : "hidden"; + if (column.elResizer) { + column.elResizer.style = "right:" + resizerRight + "px;"; + column.elResizer.style.visibility = columnVisible && visibleColumns > 0 ? "visible" : "hidden"; + } + resizerRight += column.widthPx; + remainingWidth -= column.widthPx; + if (columnVisible) { + ++visibleColumns; + } + } + + // assign all remaining space to the first column + let column = columns[0]; + column.widthPx = remainingWidth; + column.width = remainingWidth / fullWidth; + column.elTh.style = "min-width:" + column.widthPx + "px;" + "max-width:" + column.widthPx + "px;"; + let columnVisible = column.width > 0; + column.elTh.style.visibility = columnVisible ? "visible" : "hidden"; + if (column.elResizer) { + column.elResizer.style = "right:" + resizerRight + "px;"; + column.elResizer.style.visibility = columnVisible && visibleColumns > 0 ? "visible" : "hidden"; + } + + entityList.refresh(); + } + + document.onmousemove = function(ev) { + if (startResizeEvent) { + startTh = null; + + let column = columns[resizeColumnIndex]; + + let nextColumnIndex = resizeColumnIndex + 1; + let nextColumn = columns[nextColumnIndex]; + while (nextColumn.width === 0) { + nextColumn = columns[++nextColumnIndex]; + } + + let fullWidth = elEntityTableBody.offsetWidth; + let dx = ev.clientX - startResizeEvent.clientX; + let dPct = dx / fullWidth; + + let newColWidth = column.width + dPct; + let newNextColWidth = nextColumn.width - dPct; + + if (newColWidth * fullWidth >= MINIMUM_COLUMN_WIDTH && newNextColWidth * fullWidth >= MINIMUM_COLUMN_WIDTH) { + column.width += dPct; + nextColumn.width -= dPct; + updateColumnWidths(); + startResizeEvent = ev; + } + } + } + + document.onmouseup = function(ev) { + startResizeEvent = null; + ev.stopPropagation(); + } + document.addEventListener("keydown", function (keyDownEvent) { if (keyDownEvent.target.nodeName === "INPUT") { return; @@ -878,6 +1128,8 @@ function loaded() { refreshSortOrder(); refreshEntities(); + + window.onresize = updateColumnWidths; }); augmentSpinButtons(); diff --git a/scripts/system/html/js/listView.js b/scripts/system/html/js/listView.js index 62163ffe16..07aba53f1c 100644 --- a/scripts/system/html/js/listView.js +++ b/scripts/system/html/js/listView.js @@ -7,7 +7,7 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html const SCROLL_ROWS = 2; // number of rows used as scrolling buffer, each time we pass this number of rows we scroll -const FIRST_ROW_INDEX = 3; // the first elRow element's index in the child nodes of the table body +const FIRST_ROW_INDEX = 2; // the first elRow element's index in the child nodes of the table body debugPrint = function (message) { console.log(message); @@ -284,18 +284,6 @@ ListView.prototype = { this.elTableBody.insertBefore(scrollRow, this.elBottomBuffer); this.elRows.push(scrollRow); } - - let ths = this.elTableHeaderRow; - let tds = this.getNumRows() > 0 ? this.elRows[0].childNodes : []; - if (!ths) { - debugPrint("ListView.resize - no valid table header row"); - } else if (tds.length !== ths.length) { - debugPrint("ListView.resize - td list size " + tds.length + " does not match th list size " + ths.length); - } - // update the widths of the header cells to match the body cells (using first body row) - for (let i = 0; i < ths.length; i++) { - ths[i].width = tds[i].offsetWidth; - } // restore the scroll point to the same scroll point from before above changes this.elTableScroll.scrollTop = prevScrollTop; @@ -309,9 +297,6 @@ ListView.prototype = { return; } - // delete initial blank row - this.elTableBody.deleteRow(0); - this.elTopBuffer = document.createElement("tr"); this.elTableBody.appendChild(this.elTopBuffer); this.elTopBuffer.setAttribute("height", 0);