Fix various bugs for v5.2

- Fix binding IP address maxlength limitation error.
- Fix dialog window header not bringing window to top error.
- Fix s-table row height inequality.
- Fix inconsistent s-table scrolling
  (Novik#2847).

css/stable.css

@@ -4,6 +4,7 @@
   --header-border-color: #d0d0d0;
   --header-asc-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAU0lEQVQImYXOsQ0AMQgDQFIgZRxG9G60zECTBdJQ+6t8EfR6JDfWSUbkOgC8uwYyk5/wgL03q6pDAIwIZibXWm8OHABoZjLnFFVtC+4u4+9ZAOMBnF07zgszHpwAAAAASUVORK5CYII=);
   --col-resize-sep-bg-color: #a0a0a0;
+  --row-border-color: #e0e0e0;
   --row-odd-bg-color: #f3f3f3;
   --row-even-bg-color: #ffffff;
   --row-active-bg-color: #cfdeef;
@@ -84,9 +85,11 @@
   height: 100%;
   top: 0;
 }
-.stable tbody tr {cursor: pointer;}
-.stable tbody tr:not(:first-child) {border-top: 1px solid #E0E0E0;}
-.stable tbody tr:not(:last-child) {border-bottom: 1px solid #E0E0E0;}
+.stable tbody tr {
+  cursor: pointer;
+  border-top: 1px solid var(--row-border-color);
+  border-bottom: 1px solid var(--row-border-color);
+}
 .stable tbody td:first-child div {
   display: flex;
   align-items: center;

js/objects.js

@@ -50,7 +50,6 @@ class DnD {
 			$(document).on("mousemove", self, self.run);
 			$(document).on("mouseup", self, self.finish);
 		}
-		return false;
 	}
 
 	run(e) {

js/options.js

@@ -216,7 +216,7 @@ const theOptionsWindow = {
 						$("<label>").attr({id:"lbl_ip", for:"ip"}).text(theUILang.Ip_report_track + ": "),
 					),
 					$("<div>").addClass("col-md-6").append(
-						$("<input>").attr({type:"text", id:"ip"}).prop("maxlength", 6),
+						$("<input>").attr({type:"text", id:"ip"}),
 					),
 				),
 			),

js/stable.js

@@ -34,8 +34,6 @@ var ALIGN_LEFT = 1;
 var ALIGN_CENTER = 2;
 var ALIGN_RIGHT = 3;
 
-var TR_HEIGHT	=	19;
-
 var dxSTable = function() 
 {
 	this.rowdata = {};
@@ -585,21 +583,18 @@ dxSTable.prototype.assignEvents = function()
 	this.scOdd = null;
 	this.isScrolling = false;
 
-	$(this.dBody).on( "scroll",
-		function(e) 
-		{
+	$(this.dBody).on("scroll", function(e) {
 			var maxRows = self.getMaxRows();
-			if(self.scrollTop != self.dBody.scrollTop) 
-			{
+			if (self.scrollTop != self.dBody.scrollTop) {
 				self.scOdd = null;
 				self.scrollDiff = self.scrollTop - self.dBody.scrollTop;
 				self.scrollTop = self.dBody.scrollTop;
-				if (self.isScrolling ||
-				    (!self.noDelayingDraw &&
-				     Math.abs(self.scrollDiff) > TR_HEIGHT*3 &&
-				     (self.viewRows > maxRows))
-				   )
-				{
+				if (
+					self.isScrolling ||
+					(!self.noDelayingDraw &&
+						Math.abs(self.scrollDiff) > this.TR_HEIGHT*3 &&
+						(self.viewRows > maxRows))
+				) {
 					self.isScrolling = true;
 					if (self.scrollTimeout !== 0)
 						clearTimeout(self.scrollTimeout);
@@ -614,7 +609,7 @@ dxSTable.prototype.assignEvents = function()
 				self.pendingSync.scroll = true;
 				self.syncDOMAsync();
 			}
-		});
+	});
 	this.tHeadRow.on("mousemove", (ev) => {
 		if (this.isResizing || this.isMoving) return;
 
@@ -724,9 +719,9 @@ dxSTable.prototype.colDragMoveEnd = function(e) {
 dxSTable.prototype.scrollPos = function()
 {
 	this.scp.style.display = "block";
-	var mni = Math.floor(this.dBody.scrollTop / TR_HEIGHT);
-	var mxi = mni + Math.floor(this.dBody.clientHeight / TR_HEIGHT);
-	var mid = Math.floor(((mni + mxi) / 2));
+	var mni = Math.floor(this.dBody.scrollTop / this.TR_HEIGHT);
+	var mxi = mni + Math.floor(this.tBody.height() / this.TR_HEIGHT);
+	var mid = Math.floor((mni + mxi) / 2);
 	if(mid > this.viewRows)
 		mid = this.viewRows - 1;
 	var vr =- 1;
@@ -752,22 +747,29 @@ dxSTable.prototype.getMaxRows = function()
 {
 	return this.maxRows
 		? this.viewRows
-		: Math.ceil(Math.min(this.dBody.clientHeight, this.dCont[0].clientHeight) / TR_HEIGHT);
+		: Math.ceil(Math.min(this.tBody.height(), this.dCont.height()) / this.TR_HEIGHT);
 }
 
 dxSTable.prototype.refreshRows = function( height, fromScroll ) 
 {
 	if (this.isScrolling || !this.created)
 		return;
 
-	const maxRows = height ? height/TR_HEIGHT : this.getMaxRows();
-	const topRow = Math.max(0, Math.min(this.viewRows - maxRows,
-		Math.floor(this.dBody.scrollTop / TR_HEIGHT)
+	const maxRows = height ? height / this.TR_HEIGHT : this.getMaxRows();
+	const topRow = Math.max(0, Math.min(
+		this.viewRows - maxRows,
+		Math.floor(this.dBody.scrollTop / this.TR_HEIGHT)
 	));
 	const extra = this.noDelayingDraw ? 16 : 4;
-	const extraOffset = topRow % extra;
-	const mni = Math.max(0, topRow - extra - extraOffset);
-	const mxi = Math.min(this.viewRows, topRow + maxRows + 2*extra - extraOffset);
+	const mni = Math.max(
+		0,
+		// floor to the neareast even number to keep alternating background color consistent
+		Math.floor(this.dBody.scrollTop / (this.TR_HEIGHT * 2)) * 2 - extra,
+	);
+	const mxi = Math.min(
+		this.viewRows,
+		Math.ceil((this.dBody.scrollTop + this.dBody.getBoundingClientRect().height) / this.TR_HEIGHT) + extra,
+	);
 	if (fromScroll && (mni==this.mni && mxi==this.mxi))
 		return;
 
@@ -782,9 +784,9 @@ dxSTable.prototype.refreshRows = function( height, fromScroll )
 		.filter((_, index) => index >= mni && index <= mxi)
 		.map(id => $$(id) ?? createRow(id))
 
-	this.tpad.height(mni * TR_HEIGHT);
+	this.tpad.height(mni * this.TR_HEIGHT);
 	this.tBody[0].replaceChildren(...viewRows);
-	this.bpad.height((this.viewRows - mxi) * TR_HEIGHT);
+	this.bpad.height((this.viewRows - mxi) * this.TR_HEIGHT);
 
 	this.refreshSelection();
 	this.resizeColumn();
@@ -1581,6 +1583,7 @@ dxSTable.prototype.scrollTo = function(value)
 
 // getter functions
 Object.defineProperties(dxSTable.prototype, {
+	TR_HEIGHT: {get: function() {return this.tBody.find("tr").height() || 19}},
 	rows: {get: function() {return Object.keys(this.rowdata).length;}},
 	cols: {get: function() {return this.colsdata.length;}},
 	dBody: {get: function() {return this.dCont.find(".stable-body")[0];}},