From 87d49377261c9a6fa92bd19dc045740bc68eb701 Mon Sep 17 00:00:00 2001 From: Dave Page Date: Thu, 22 Dec 2016 17:43:42 +0000 Subject: [PATCH] Minimise memory requirements for rendered cells and rows in SlickGrid. Fixes #2035 - The CSS class 'slick-row' has been renamed to 'sr' - The CSS class 'slick-cell' has been renamed to 'sc' - The SQL Editor included an unused 'normal_row' class on each row which has been removed as it was unreferenced in the code or CSS. The intent of these changes is to minimise memory usage by the grid, by saving a few bytes per row/cell. It's questionable how much difference this actually makes given that SlickGrid updates the document so it only includes the visible rows on the fly, but every little helps. --- .../css/slickgrid/slick-default-theme.css | 20 ++++++++-------- .../static/css/slickgrid/slick.grid.css | 12 +++++----- web/pgadmin/static/js/slickgrid/README | 9 +++++++ web/pgadmin/static/js/slickgrid/slick.grid.js | 24 +++++++++---------- .../tools/sqleditor/static/css/sqleditor.css | 14 +++++------ .../templates/sqleditor/js/sqleditor.js | 4 ++-- 6 files changed, 46 insertions(+), 37 deletions(-) create mode 100644 web/pgadmin/static/js/slickgrid/README diff --git a/web/pgadmin/static/css/slickgrid/slick-default-theme.css b/web/pgadmin/static/css/slickgrid/slick-default-theme.css index e4cfbb735..2338d6e7b 100644 --- a/web/pgadmin/static/css/slickgrid/slick-default-theme.css +++ b/web/pgadmin/static/css/slickgrid/slick-default-theme.css @@ -29,23 +29,23 @@ classes should alter those! height: 100%; } -.slick-row.ui-state-active { +.sr.ui-state-active { background: #F5F7D7; } -.slick-row { +.sr { position: absolute; background: white; border: 0px; line-height: 20px; } -.slick-row.selected { +.sr.selected { z-index: 10; background: #DFE8F6; } -.slick-cell { +.sc { padding-left: 4px; padding-right: 4px; } @@ -73,11 +73,11 @@ classes should alter those! background: white; } -.slick-cell.selected { +.sc.selected { background-color: beige; } -.slick-cell.active { +.sc.active { border-color: gray; border-style: solid; } @@ -86,20 +86,20 @@ classes should alter those! background: silver !important; } -.slick-row.odd { +.sr.odd { background: #fafafa; } -.slick-row.ui-state-active { +.sr.ui-state-active { background: #F5F7D7; } -.slick-row.loading { +.sr.loading { opacity: 0.5; filter: alpha(opacity = 50); } -.slick-cell.invalid { +.sc.invalid { border-color: red; -moz-animation-duration: 0.2s; -webkit-animation-duration: 0.2s; diff --git a/web/pgadmin/static/css/slickgrid/slick.grid.css b/web/pgadmin/static/css/slickgrid/slick.grid.css index 876100574..a628c0293 100644 --- a/web/pgadmin/static/css/slickgrid/slick.grid.css +++ b/web/pgadmin/static/css/slickgrid/slick.grid.css @@ -81,13 +81,13 @@ classes should alter those! outline: 0; } -.slick-row.ui-widget-content, .slick-row.ui-state-active { +.sr.ui-widget-content, .sr.ui-state-active { position: absolute; border: 0px; width: 100%; } -.slick-cell, .slick-headerrow-column { +.sc, .slick-headerrow-column { position: absolute; border: 1px solid transparent; border-right: 1px dotted silver; @@ -110,7 +110,7 @@ classes should alter those! display: inline-block; } -.slick-cell.highlighted { +.sc.highlighted { background: lightskyblue; background: rgba(0, 0, 255, 0.2); -webkit-transition: all 0.5s; @@ -119,11 +119,11 @@ classes should alter those! transition: all 0.5s; } -.slick-cell.flashing { +.sc.flashing { border: 1px solid red !important; } -.slick-cell.editable { +.sc.editable { z-index: 11; overflow: visible; background: white; @@ -131,7 +131,7 @@ classes should alter those! border-style: solid; } -.slick-cell:focus { +.sc:focus { outline: none; } diff --git a/web/pgadmin/static/js/slickgrid/README b/web/pgadmin/static/js/slickgrid/README new file mode 100644 index 000000000..cf5835154 --- /dev/null +++ b/web/pgadmin/static/js/slickgrid/README @@ -0,0 +1,9 @@ +WARNING!! + +The following changes have been made to SlickGrid. These must be re-applied if updating the code from upstream! + +- The CSS class 'slick-row' has been renamed to 'sr' + +- The CSS class 'slick-cell' has been renamed to 'sc' + +The intent of these changes is to minimise memory usage by the grid, by saving a few bytes per row/cell. \ No newline at end of file diff --git a/web/pgadmin/static/js/slickgrid/slick.grid.js b/web/pgadmin/static/js/slickgrid/slick.grid.js index 427175ec8..29d07e4f9 100644 --- a/web/pgadmin/static/js/slickgrid/slick.grid.js +++ b/web/pgadmin/static/js/slickgrid/slick.grid.js @@ -337,8 +337,8 @@ if (typeof Slick === "undefined") { .bind("dragstart", {distance: 3}, handleDragStart) .bind("drag", handleDrag) .bind("dragend", handleDragEnd) - .delegate(".slick-cell", "mouseenter", handleMouseEnter) - .delegate(".slick-cell", "mouseleave", handleMouseLeave); + .delegate(".sc", "mouseenter", handleMouseEnter) + .delegate(".sc", "mouseleave", handleMouseLeave); // Work around http://crbug.com/312427. if (navigator.userAgent.toLowerCase().match(/webkit/) && @@ -953,8 +953,8 @@ if (typeof Slick === "undefined") { } el.remove(); - var r = $("
").appendTo($canvas); - el = $("").appendTo(r); + var r = $("
").appendTo($canvas); + el = $("").appendTo(r); cellWidthDiff = cellHeightDiff = 0; if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") { $.each(h, function (n, val) { @@ -976,8 +976,8 @@ if (typeof Slick === "undefined") { "." + uid + " .slick-header-column { left: 1000px; }", "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }", "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }", - "." + uid + " .slick-cell { height:" + rowHeight + "px; }", - "." + uid + " .slick-row { height:" + options.rowHeight + "px; }" + "." + uid + " .sc { height:" + rowHeight + "px; }", + "." + uid + " .sr { height:" + options.rowHeight + "px; }" ]; for (var i = 0; i < columns.length; i++) { @@ -1462,7 +1462,7 @@ if (typeof Slick === "undefined") { var d = getDataItem(row); var dataLoading = row < dataLength && !d; var diff = dataLength - row; - var rowCss = "slick-row" + + var rowCss = "sr" + (dataLoading ? " loading" : "") + (row === activeRow ? " active" : "") + (((options.enableAddRow && diff < 0) || diff == 0) ? "" : (row % 2 == 1 ? " odd" : " even")); @@ -1521,7 +1521,7 @@ if (typeof Slick === "undefined") { // item: grid data for row var m = columns[cell]; - var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) + + var cellCss = "sc l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) + (m.cssClass ? " " + m.cssClass : ""); if (row === activeRow && cell === activeCell) { cellCss += (" active"); @@ -2322,7 +2322,7 @@ if (typeof Slick === "undefined") { // Interactivity function handleMouseWheel(e) { - var rowNode = $(e.target).closest(".slick-row")[0]; + var rowNode = $(e.target).closest(".sr")[0]; if (rowNode != rowNodeFromLastMouseWheelEvent) { if (zombieRowNodeFromLastMouseWheelEvent && zombieRowNodeFromLastMouseWheelEvent != rowNode) { if (options.enableAsyncPostRenderCleanup && zombieRowPostProcessedFromLastMouseWheelEvent) { @@ -2448,7 +2448,7 @@ if (typeof Slick === "undefined") { // if this click resulted in some cell child node getting focus, // don't steal it back - keyboard events will still bubble up // IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly. - if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) { + if (e.target != document.activeElement || $(e.target).hasClass("sc")) { setFocus(); } } @@ -2472,7 +2472,7 @@ if (typeof Slick === "undefined") { } function handleContextMenu(e) { - var $cell = $(e.target).closest(".slick-cell", $canvas); + var $cell = $(e.target).closest(".sc", $canvas); if ($cell.length === 0) { return; } @@ -2578,7 +2578,7 @@ if (typeof Slick === "undefined") { } function getCellFromEvent(e) { - var $cell = $(e.target).closest(".slick-cell", $canvas); + var $cell = $(e.target).closest(".sc", $canvas); if (!$cell.length) { return null; } diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css index d3dbf5048..c7edc43f7 100644 --- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css +++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css @@ -279,7 +279,7 @@ li { background-color: white; } -.slick-cell.cell-move-handle { +.sc.cell-move-handle { font-weight: bold; text-align: right; border-right: solid gray; @@ -291,15 +291,15 @@ li { background: #b6b9bd; } -.slick-row.selected .cell-move-handle { +.sr.selected .cell-move-handle { background: #D5DC8D; } -.slick-row .cell-actions { +.sr .cell-actions { text-align: left; } -.slick-row.complete { +.sr.complete { background-color: #DFD; color: #555; } @@ -332,11 +332,11 @@ li { font-size: 10px; } -.slick-row.selected .cell-selection { +.sr.selected .cell-selection { background-color: transparent; /* show default selected row background */ } -.slick-cell-checkboxsel { +.sc-cb { background: #f0f0f0; border-right-color: silver; border-right-style: solid; @@ -395,7 +395,7 @@ input.editor-checkbox { } /* Override selected row color */ -.slick-cell.selected { +.sc.selected { background-color: #eeeeee !important; } diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js index b169ec75e..698e84d94 100644 --- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js +++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js @@ -614,7 +614,7 @@ define( checkboxSelector; checkboxSelector = new Slick.CheckboxSelectColumn({ - cssClass: "slick-cell-checkboxsel" + cssClass: "sc-cb" }); grid_columns.push(checkboxSelector.getColumnDefinition()); @@ -673,7 +673,7 @@ define( // Add-on function which allow us to identify the faulty row after insert/update // and apply css accordingly collection.getItemMetadata = function(i) { - var res = {}, cssClass = 'normal_row'; + var res = {}, cssClass = ''; if (_.has(self.handler, 'data_store')) { if (i in self.handler.data_store.added_index) { cssClass = 'new_row';