Various bug fixes for v5.1 (#2827)

- Fix an error that occurs when traffic graph is shrunk down to
  less than 1px high.
- Fix bind IP address option incorrect max length limit.
- Fix jQuery selector typo for check_port plugin.

Author: jevenski

css/style.css

@@ -499,7 +499,16 @@ div#gcont div.row.Header {font-size: 14px; font-weight: bold; background: #FCFCF
 div#gcont div.row:not(.Header) {padding: 0 0.3rem; word-break: break-all;}
 div#gcont div.row > div {padding-top: 0.25rem; padding-bottom: 0.25rem;}
 
-div.graph_tab {background-color: #FFFFFF; overflow: hidden; display: block; -moz-user-focus: normal; -moz-user-input: enabled; line-height: 11px; color: #545454;}
+div.graph_tab {
+  height: 100%;
+  background-color: #FFFFFF;
+  overflow: hidden;
+  display: block;
+  -moz-user-focus: normal;
+  -moz-user-input: enabled;
+  line-height: 11px;
+  color: #545454;
+}
 .graph_tab_grid,.graph_tab_legend {display: none;}
 .graph_tab_grid { background-color: transparent; border: 2px solid #545454; }
 .graph_tab_legend { background-color: #F0F0F0; border: 0px none transparent; }

js/content.js

@@ -616,7 +616,7 @@ function makeContent() {
 					$("<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"}),
 				),
 			),
 		),

plugins/check_port/init.js

@@ -3,13 +3,13 @@ plugin.loadMainCSS();
 
 plugin.init = function()
 {
-	$("port-pane .icon").addClass("pstatus0");
+	$("#port-pane .icon").removeClass().addClass("icon pstatus0");
 	theWebUI.request("?action=initportcheck", [plugin.getPortStatus, plugin]);
 }
 
 plugin.update = function()
 {
-	$("port-pane .icon").addClass("pstatus0");
+	$("#port-pane .icon").removeClass().addClass("icon pstatus0");
 	theWebUI.request("?action=updateportcheck", [plugin.getPortStatus, plugin]);
 }
 

plugins/trafic/init.js

@@ -115,14 +115,15 @@ class rTraficGraph extends rGraph {
     this.draw();
   }
 
-  resize(newWidth, newHeight) {
-    if (newWidth) newWidth -= 8;
-    if (this.plot && newHeight)
-      newHeight -=
-        iv($$(this.plot.getPlaceholder().attr("id") + "_ctrl").style.height) +
-        $("#tabbar").outerHeight();
-    super.resize(newWidth, newHeight);
-  }
+	resize(newWidth, newHeight) {
+		if (!newWidth) {
+			newWidth = $("#traf").width();
+		}
+		if (!newHeight) {
+			newHeight = $("#traf").height() - $("#traf_graph_ctrl").height();
+		}
+		super.resize(newWidth, newHeight);
+	}
 }
 
 if(plugin.canChangeTabs())
@@ -147,26 +148,24 @@ if(plugin.canChangeTabs())
 
 	plugin.resizeLeft = theWebUI.resizeLeft;
 	theWebUI.resizeLeft = function(w) {
+		plugin.resizeLeft.call(this, w);
 		if (plugin.enabled) {
 			if (plugin.allStuffLoaded) {
-				const tdcont = $("#tdcont");
-				this.trafGraph.resize(tdcont.width(), tdcont.height());
+				this.trafGraph.resize();
 			} else
 				setTimeout('theWebUI.resize()', 1000);
 		}
-		plugin.resizeLeft.call(this, w);
 	}
 
 	plugin.resizeTop = theWebUI.resizeTop;
 	theWebUI.resizeTop = function(w, h) {
+		plugin.resizeTop.call(this, w, h);
 		if (plugin.enabled) {
 			if (plugin.allStuffLoaded) {
-				const tdcont = $("#tdcont");
-				this.trafGraph.resize(tdcont.width(), tdcont.height());
+				this.trafGraph.resize();
 			} else
 				setTimeout('theWebUI.resize()', 1000);
 		}
-		plugin.resizeTop.call(this, w, h);
 	}
 
 	theWebUI.showTrafic = function(d)
@@ -323,17 +322,17 @@ plugin.onLangLoaded = function()
 		{
 			if(id=="traf")
 			{
-				if(theWebUI.activeView!="traf" || !theWebUI.trafGraph.xticks.length)
+				if(theWebUI.activeView!="traf" || !theWebUI.trafGraph.xticks.length) {
 					theWebUI.reqForTraficGraph();
-				else
-					theWebUI.trafGraph.resize();
+				}
+				theWebUI.trafGraph.resize();
 			}
 			else
 				plugin.onShow.call(this,id);
 		};
 	 	this.attachPageToTabs(
-			$('<div>').attr("id","traf").append(
-				$("<div>").attr({id:"traf_graph_ctrl"}).addClass("graph_tab d-flex flex-row").append(
+			$('<div>').attr("id","traf").addClass("graph_tab").append(
+				$("<div>").attr({id:"traf_graph_ctrl"}).addClass("d-flex flex-row").append(
 					plugin.disableClearButton ? $() : $("<button>").attr({type:"button", onclick: "theWebUI.clearStats();return(false);"}).text(theUILang.ClearButton),
 					$("<select>").attr({
 						name:"tracker_mode",
@@ -352,7 +351,7 @@ plugin.onLangLoaded = function()
 						$("<option>").val("year").text(theUILang.perYear),
 					),
 				),
-				$("<div>").attr({id:"traf_graph"}).addClass("graph_tab"),
+				$("<div>").attr({id:"traf_graph"}),
 			)[0],
 			theUILang.traf,
 			"lcont",