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.
2016-12-22 17:43:42 +00:00 · 2016-12-22 17:43:42 +00:00 · 87d4937726
parent 43b9e53572
commit 87d4937726
6 changed files with 46 additions and 37 deletions
--- 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;
--- 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;
 }

--- a/web/pgadmin/static/js/slickgrid/README
+++ 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.
--- 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 = $("<div class='slick-row' />").appendTo($canvas);
-      el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
+      var r = $("<div class='sr' />").appendTo($canvas);
+      el = $("<div class='sc' id='' style='visibility:hidden'>-</div>").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;
      }
--- 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;
 }

--- 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';