From afd4f8969319aad74f4cdf9fa38d9181ca2bf84c Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sat, 16 Jul 2016 13:23:59 +0300
Subject: [PATCH 01/18] Rename variables in DynamicTable class

---
 src/webui/www/public/scripts/dynamicTable.js | 54 ++++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 15f30fb9c..cf5505b3b 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -35,14 +35,14 @@ var DynamicTable = new Class({
 
         initialize : function () {},
 
-        setup : function (tableId, tableHeaderId, context_menu) {
+        setup : function (tableId, tableHeaderId, contextMenu) {
             this.tableId = tableId;
             this.tableHeaderId = tableHeaderId;
             this.table = $(tableId);
             this.rows = new Hash();
-            this.cur = new Array();
+            this.selectedRows = new Array();
             this.columns = new Array();
-            this.context_menu = context_menu;
+            this.contextMenu = contextMenu;
             this.sortedColumn = getLocalStorageItem('sorted_column_' + this.tableId, 0);
             this.reverseSort = getLocalStorageItem('reverse_sort_' + this.tableId, '0');
             this.initColumns();
@@ -163,8 +163,8 @@ var DynamicTable = new Class({
         },
 
         getSelectedRowId : function () {
-            if (this.cur.length > 0)
-                return this.cur[0];
+            if (this.selectedRows.length > 0)
+                return this.selectedRows[0];
             return '';
         },
 
@@ -183,24 +183,24 @@ var DynamicTable = new Class({
         },
 
         selectAll : function () {
-            this.cur.empty();
+            this.selectedRows.empty();
 
             var trs = this.table.getElements('tr');
             for (var i = 0; i < trs.length; i++) {
                 var tr = trs[i];
-                this.cur.push(tr.rowId);
+                this.selectedRows.push(tr.rowId);
                 if (!tr.hasClass('selected'))
                     tr.addClass('selected');
             }
         },
 
         deselectAll : function () {
-            this.cur.empty();
+            this.selectedRows.empty();
         },
 
         selectRow : function (rowId) {
-            this.cur.empty();
-            this.cur.push(rowId);
+            this.selectedRows.empty();
+            this.selectedRows.push(rowId);
             var trs = this.table.getElements('tr');
             for (var i = 0; i < trs.length; i++) {
                 var tr = trs[i];
@@ -272,9 +272,9 @@ var DynamicTable = new Class({
 
             var rows = this.getFilteredAndSortedRows();
 
-            for (var i = 0; i < this.cur.length; i++)
-                if (!(this.cur[i] in rows)) {
-                    this.cur.splice(i, 1);
+            for (var i = 0; i < this.selectedRows.length; i++)
+                if (!(this.selectedRows[i] in rows)) {
+                    this.selectedRows.splice(i, 1);
                     i--;
                 }
 
@@ -304,7 +304,7 @@ var DynamicTable = new Class({
 
                     tr._this = this;
                     tr.addEvent('contextmenu', function (e) {
-                        if (!this._this.cur.contains(this.rowId))
+                        if (!this._this.selectedRows.contains(this.rowId))
                             this._this.selectRow(this.rowId);
                         return true;
                     });
@@ -312,37 +312,37 @@ var DynamicTable = new Class({
                         e.stop();
                         if (e.control) {
                             // CTRL key was pressed
-                            if (this._this.cur.contains(this.rowId)) {
+                            if (this._this.selectedRows.contains(this.rowId)) {
                                 // remove it
-                                this._this.cur.erase(this.rowId);
+                                this._this.selectedRows.erase(this.rowId);
                                 // Remove selected style
                                 this.removeClass('selected');
                             }
                             else {
-                                this._this.cur.push(this.rowId);
+                                this._this.selectedRows.push(this.rowId);
                                 // Add selected style
                                 this.addClass('selected');
                             }
                         }
                         else {
-                            if (e.shift && this._this.cur.length == 1) {
+                            if (e.shift && this._this.selectedRows.length == 1) {
                                 // Shift key was pressed
-                                var first_row_id = this._this.cur[0];
+                                var first_row_id = this._this.selectedRows[0];
                                 var last_row_id = this.rowId;
-                                this._this.cur.empty();
+                                this._this.selectedRows.empty();
                                 var trs = this._this.table.getElements('tr');
                                 var select = false;
                                 for (var i = 0; i < trs.length; i++) {
                                     var tr = trs[i];
 
                                     if ((tr.rowId == first_row_id) || (tr.rowId == last_row_id)) {
-                                        this._this.cur.push(tr.rowId);
+                                        this._this.selectedRows.push(tr.rowId);
                                         tr.addClass('selected');
                                         select = !select;
                                     }
                                     else {
                                         if (select) {
-                                            this._this.cur.push(tr.rowId);
+                                            this._this.selectedRows.push(tr.rowId);
                                             tr.addClass('selected');
                                         }
                                         else
@@ -377,8 +377,8 @@ var DynamicTable = new Class({
                     }
 
                     // Update context menu
-                    if (this.context_menu)
-                        this.context_menu.addTarget(tr);
+                    if (this.contextMenu)
+                        this.contextMenu.addTarget(tr);
 
                     this.updateRow(tr, true);
                 }
@@ -407,7 +407,7 @@ var DynamicTable = new Class({
         },
 
         removeRow : function (rowId) {
-            this.cur.erase(rowId);
+            this.selectedRows.erase(rowId);
             var tr = this.getTrByRowId(rowId);
             if (tr != null) {
                 tr.dispose();
@@ -418,7 +418,7 @@ var DynamicTable = new Class({
         },
 
         clear : function () {
-            this.cur.empty();
+            this.selectedRows.empty();
             this.rows.empty();
             var trs = this.table.getElements('tr');
             while (trs.length > 0) {
@@ -428,7 +428,7 @@ var DynamicTable = new Class({
         },
 
         selectedRowsIds : function () {
-            return this.cur.slice();
+            return this.selectedRows.slice();
         },
 
         getRowIds : function () {

From 7aadf644e0a0abd47b3f5fc749c2ea96b4ed45e3 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sat, 16 Jul 2016 22:21:14 +0300
Subject: [PATCH 02/18] Make torrents table scrollable horizontally

---
 src/webui/www/public/css/dynamicTable.css    |  59 ++++++---
 src/webui/www/public/css/style.css           |  16 +--
 src/webui/www/public/properties_content.html |  10 +-
 src/webui/www/public/scripts/dynamicTable.js | 123 ++++++++++++++-----
 src/webui/www/public/transferlist.html       |  25 ++--
 5 files changed, 158 insertions(+), 75 deletions(-)

diff --git a/src/webui/www/public/css/dynamicTable.css b/src/webui/www/public/css/dynamicTable.css
index 55a024ab7..270a1dafc 100644
--- a/src/webui/www/public/css/dynamicTable.css
+++ b/src/webui/www/public/css/dynamicTable.css
@@ -8,8 +8,7 @@
 **************************************************************/
 
 #properties #torrentFiles table,
-#properties #trackers table,
-#transferList table {
+#properties #trackers table {
 	border: 1px solid #ccc;
 	width: 100%;
 }
@@ -78,18 +77,50 @@
 	vertical-align: middle;
 }
 
-#trackers th,
-#trackers td,
-#torrentFiles th,
-#torrentFiles td,
-#transferList th,
-#transferList td {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	max-width: 300px;
-}
-
 tr.dynamicTableHeader {
     cursor: pointer;
 }
+
+.dynamicTable {
+    table-layout: fixed;
+    width :1%;
+    padding: 0;
+    border-spacing: 0;
+}
+
+.dynamicTable th {
+    padding: 5px 10px;
+    white-space: nowrap;
+}
+
+.dynamicTable td {
+    padding: 0px 3px;
+    white-space: nowrap;
+}
+
+.dynamicTable thead tr {
+    background-color: #eee;
+}
+
+.dynamicTable th,
+.dynamicTable td {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 300px;
+}
+
+.dynamicTableFixedHeaderDiv {
+    overflow: hidden;
+}
+
+.dynamicTableDiv {
+    overflow: auto;
+}
+
+.dynamicTableDiv thead th {
+    line-height: 0px !important;
+    height: 0px !important;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
diff --git a/src/webui/www/public/css/style.css b/src/webui/www/public/css/style.css
index f99d60a54..e101065fb 100644
--- a/src/webui/www/public/css/style.css
+++ b/src/webui/www/public/css/style.css
@@ -389,7 +389,7 @@ td.generalLabel {
     margin-bottom: -3px;
 }
 
-.torrentTable {
+.unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -398,20 +398,6 @@ td.generalLabel {
     user-select: none;
 }
 
-.torrentTable th {
-    padding: 5px 10px;
-    white-space: nowrap;
-}
-
-.torrentTable td {
-    padding: 0px 3px;
-    white-space: nowrap;
-}
-
-.torrentTable thead tr {
-    background-color: #eee;
-}
-
 #prop_general {
     padding: 2px;
 }
diff --git a/src/webui/www/public/properties_content.html b/src/webui/www/public/properties_content.html
index 60b3dca83..624922062 100644
--- a/src/webui/www/public/properties_content.html
+++ b/src/webui/www/public/properties_content.html
@@ -49,7 +49,7 @@
 
 <div id="prop_trackers" class="invisible">
     <div id="trackers">
-        <table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%">
+        <table class="dynamicTable" style="width: 100%">
             <thead>
                 <tr>
                     <th style="width: 30%;">QBT_TR(URL)QBT_TR <img src="theme/list-add" id="addTrackersPlus"/></th>
@@ -65,7 +65,7 @@
 
 <div id="prop_peers" class="invisible">
     <div id="peers">
-        <table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%">
+        <table class="dynamicTable" style="width: 100%">
             <thead>
                 <tr id="torrentPeersTableHeader" class="dynamicTableHeader">
                 </tr>
@@ -77,7 +77,7 @@
 
 <div id="prop_webseeds" class="invisible">
     <div id="webseeds">
-        <table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%">
+        <table class="dynamicTable" style="width: 100%">
             <thead>
                 <tr>
                     <th>QBT_TR(URL)QBT_TR</th>
@@ -90,7 +90,7 @@
 
 <div id="prop_files" class="invisible">
     <div id="torrentFiles">
-        <table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%">
+        <table class="dynamicTable" style="width: 100%">
             <thead>
                 <tr>
                     <th style="width: 30px; border-right: 0"><input type="checkbox" id="tristate_cb" style="display: none;" onclick="javascript:switchCBState()" /><label id="all_files_cb" class="tristate" for="tristate_cb"></label></th>
@@ -106,6 +106,6 @@
 </div>
 
 <script type="text/javascript">
-    torrentPeersTable.setup('torrentPeersTable', 'torrentPeersTableHeader', null);
+    //torrentPeersTable.setup('torrentPeersTable', 'torrentPeersTableHeader', null);
     $(getLocalStorageItem('selected_tab', 'PropGeneralLink')).click();
 </script>
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index cf5505b3b..6fec81a89 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -35,19 +35,65 @@ var DynamicTable = new Class({
 
         initialize : function () {},
 
-        setup : function (tableId, tableHeaderId, contextMenu) {
-            this.tableId = tableId;
-            this.tableHeaderId = tableHeaderId;
-            this.table = $(tableId);
+        setup : function (dynamicTableDivId, dynamicTableFixedHeaderDivId, contextMenu) {
+            this.dynamicTableDivId = dynamicTableDivId;
+            this.dynamicTableFixedHeaderDivId = dynamicTableFixedHeaderDivId;
+            this.fixedTableHeader = $(dynamicTableFixedHeaderDivId).getElements('tr')[0];
+            this.hiddenTableHeader = $(dynamicTableDivId).getElements('tr')[0];
+            this.tableBody = $(dynamicTableDivId).getElements('tbody')[0];
             this.rows = new Hash();
             this.selectedRows = new Array();
             this.columns = new Array();
             this.contextMenu = contextMenu;
-            this.sortedColumn = getLocalStorageItem('sorted_column_' + this.tableId, 0);
-            this.reverseSort = getLocalStorageItem('reverse_sort_' + this.tableId, '0');
+            this.sortedColumn = getLocalStorageItem('sorted_column_' + this.dynamicTableDivId, 0);
+            this.reverseSort = getLocalStorageItem('reverse_sort_' + this.dynamicTableDivId, '0');
             this.initColumns();
             this.loadColumnsOrder();
-            this.updateHeader();
+            this.updateTableHeaders();
+            this.setupEvents();
+        },
+
+        setupEvents : function () {
+            var scrollFn = function() {
+                $(this.dynamicTableFixedHeaderDivId).getElements('table')[0].style.left =
+                       -$(this.dynamicTableDivId).scrollLeft + 'px';
+            }.bind(this);
+
+            $(this.dynamicTableDivId).addEvent('scroll', scrollFn);
+
+            var resizeFn = function() {
+                var panel = $(this.dynamicTableDivId).getParent('.panel');
+                var h = panel.getBoundingClientRect().height - $(this.dynamicTableFixedHeaderDivId).getBoundingClientRect().height;
+                $(this.dynamicTableDivId).style.height = h + 'px';
+
+                // Workaround due to inaccurate calculation of elements heights by browser
+
+                var n = 2;
+
+                while (panel.clientWidth != panel.offsetWidth && n > 0) { // is panel vertical scrollbar visible ?
+                    n--;
+                    h -= 0.5;
+                    $(this.dynamicTableDivId).style.height = h + 'px';
+                }
+
+                this.lastPanelHeight = panel.getBoundingClientRect().height;
+            }.bind(this);
+
+            $(this.dynamicTableDivId).getParent('.panel').addEvent('resize', resizeFn);
+
+            this.lastPanelHeight = 0;
+
+            // Workaround. Resize event is called not always (for example it isn't called when browser window changes it's size)
+
+            var checkResizeFn = function() {
+                var panel = $(this.dynamicTableDivId).getParent('.panel');
+                if (this.lastPanelHeight != panel.getBoundingClientRect().height) {
+                    this.lastPanelHeight = panel.getBoundingClientRect().height;
+                    panel.fireEvent('resize');
+                }
+            }.bind(this);
+
+            setInterval(checkResizeFn, 500);
         },
 
         initColumns : function () {},
@@ -55,7 +101,7 @@ var DynamicTable = new Class({
         newColumn : function (name, style, caption) {
             var column = {};
             column['name'] = name;
-            column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.tableId, '1');
+            column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, '1');
             column['force_hide'] = false;
             column['caption'] = caption;
             column['style'] = style;
@@ -79,12 +125,13 @@ var DynamicTable = new Class({
             this.columns.push(column);
             this.columns[name] = column;
 
-            $(this.tableHeaderId).appendChild(new Element('th'));
+            this.hiddenTableHeader.appendChild(new Element('th'));
+            this.fixedTableHeader.appendChild(new Element('th'));
         },
 
         loadColumnsOrder : function () {
             columnsOrder = ['state_icon']; // status icon column is always the first
-            val = localStorage.getItem('columns_order_' + this.tableId);
+            val = localStorage.getItem('columns_order_' + this.dynamicTableDivId);
             if (val === null || val === undefined) return;
             val.split(',').forEach(function(v) {
                 if ((v in this.columns) && (!columnsOrder.contains(v)))
@@ -106,11 +153,16 @@ var DynamicTable = new Class({
                     val += ',';
                 val += this.columns[i].name;
             }
-            localStorage.setItem('columns_order_' + this.tableId, val);
+            localStorage.setItem('columns_order_' + this.dynamicTableDivId, val);
         },
 
-        updateHeader : function () {
-            var ths = $(this.tableHeaderId).getElements('th');
+        updateTableHeaders : function () {
+            this.updateHeader(this.hiddenTableHeader);
+            this.updateHeader(this.fixedTableHeader);
+        },
+
+        updateHeader : function (header) {
+            var ths = header.getElements('th');
 
             for (var i = 0; i < ths.length; i++) {
                 th = ths[i];
@@ -135,17 +187,22 @@ var DynamicTable = new Class({
         updateColumn : function (columnName) {
             var pos = this.getColumnPos(columnName);
             var visible = ((this.columns[pos].visible != '0') && !this.columns[pos].force_hide);
-            var ths = $(this.tableHeaderId).getElements('th');
-            if (visible)
+            var ths = this.hiddenTableHeader.getElements('th');
+            var fths = this.fixedTableHeader.getElements('th');
+            var trs = this.tableBody.getElements('tr');
+
+            if (visible) {
                 ths[pos].removeClass('invisible');
-            else
-                ths[pos].addClass('invisible');
-            var trs = this.table.getElements('tr');
-            for (var i = 0; i < trs.length; i++)
-                if (visible)
+                fths[pos].removeClass('invisible');
+                for (var i = 0; i < trs.length; i++)
                     trs[i].getElements('td')[pos].removeClass('invisible');
-                else
+            }
+            else {
+                ths[pos].addClass('invisible');
+                fths[pos].addClass('invisible');
+                for (var i = 0; i < trs.length; i++)
                     trs[i].getElements('td')[pos].addClass('invisible');
+            }
         },
 
         setSortedColumn : function (column) {
@@ -157,8 +214,8 @@ var DynamicTable = new Class({
                 // Toggle sort order
                 this.reverseSort = this.reverseSort == '0' ? '1' : '0';
             }
-            localStorage.setItem('sorted_column_' + this.tableId, column);
-            localStorage.setItem('reverse_sort_' + this.tableId, this.reverseSort);
+            localStorage.setItem('sorted_column_' + this.dynamicTableDivId, column);
+            localStorage.setItem('reverse_sort_' + this.dynamicTableDivId, this.reverseSort);
             this.updateTable(false);
         },
 
@@ -172,7 +229,7 @@ var DynamicTable = new Class({
             if (!MUI.ieLegacySupport)
                 return;
 
-            var trs = this.table.getElements('tr');
+            var trs = this.tableBody.getElements('tr');
             trs.each(function (el, i) {
                 if (i % 2) {
                     el.addClass('alt');
@@ -185,7 +242,7 @@ var DynamicTable = new Class({
         selectAll : function () {
             this.selectedRows.empty();
 
-            var trs = this.table.getElements('tr');
+            var trs = this.tableBody.getElements('tr');
             for (var i = 0; i < trs.length; i++) {
                 var tr = trs[i];
                 this.selectedRows.push(tr.rowId);
@@ -201,7 +258,7 @@ var DynamicTable = new Class({
         selectRow : function (rowId) {
             this.selectedRows.empty();
             this.selectedRows.push(rowId);
-            var trs = this.table.getElements('tr');
+            var trs = this.tableBody.getElements('tr');
             for (var i = 0; i < trs.length; i++) {
                 var tr = trs[i];
                 if (tr.rowId == rowId) {
@@ -259,7 +316,7 @@ var DynamicTable = new Class({
         },
 
         getTrByRowId : function (rowId) {
-            trs = this.table.getElements('tr');
+            trs = this.tableBody.getElements('tr');
             for (var i = 0; i < trs.length; i++)
                 if (trs[i].rowId == rowId)
                     return trs[i];
@@ -278,7 +335,7 @@ var DynamicTable = new Class({
                     i--;
                 }
 
-            var trs = this.table.getElements('tr');
+            var trs = this.tableBody.getElements('tr');
 
             for (var rowPos = 0; rowPos < rows.length; rowPos++) {
                 var rowId = rows[rowPos]['rowId'];
@@ -330,7 +387,7 @@ var DynamicTable = new Class({
                                 var first_row_id = this._this.selectedRows[0];
                                 var last_row_id = this.rowId;
                                 this._this.selectedRows.empty();
-                                var trs = this._this.table.getElements('tr');
+                                var trs = this._this.tableBody.getElements('tr');
                                 var select = false;
                                 for (var i = 0; i < trs.length; i++) {
                                     var tr = trs[i];
@@ -368,7 +425,7 @@ var DynamicTable = new Class({
 
                     // Insert
                     if (rowPos >= trs.length) {
-                        tr.inject(this.table);
+                        tr.inject(this.tableBody);
                         trs.push(tr);
                     }
                     else {
@@ -420,7 +477,7 @@ var DynamicTable = new Class({
         clear : function () {
             this.selectedRows.empty();
             this.rows.empty();
-            var trs = this.table.getElements('tr');
+            var trs = this.tableBody.getElements('tr');
             while (trs.length > 0) {
                 trs[trs.length - 1].dispose();
                 trs.pop();
@@ -442,7 +499,7 @@ var TorrentsTable = new Class({
         initColumns : function () {
             this.newColumn('priority', 'width: 30px', '#');
             this.newColumn('state_icon', 'width: 16px; cursor: default', '');
-            this.newColumn('name', 'min-width: 200px', 'QBT_TR(Name)QBT_TR');
+            this.newColumn('name', 'width: 200px', 'QBT_TR(Name)QBT_TR');
             this.newColumn('size', 'width: 100px', 'QBT_TR(Size)QBT_TR');
             this.newColumn('progress', 'width: 80px', 'QBT_TR(Done)QBT_TR');
             this.newColumn('num_seeds', 'width: 100px', 'QBT_TR(Seeds)QBT_TR');
@@ -763,7 +820,7 @@ var TorrentPeersTable = new Class({
             this.newColumn('uploaded', 'width: 30px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
             this.newColumn('connection', 'width: 30px', 'QBT_TR(Connection)QBT_TR');
             this.newColumn('flags', 'width: 30px', 'QBT_TR(Flags)QBT_TR');
-            this.newColumn('relevance', 'min-width: 30px', 'QBT_TR(Relevance)QBT_TR');
+            this.newColumn('relevance', 'width: 30px', 'QBT_TR(Relevance)QBT_TR');
 
             this.columns['country'].dataProperties.push('country_code');
             this.columns['flags'].dataProperties.push('flags_desc');
diff --git a/src/webui/www/public/transferlist.html b/src/webui/www/public/transferlist.html
index fb5444366..e088e66d6 100644
--- a/src/webui/www/public/transferlist.html
+++ b/src/webui/www/public/transferlist.html
@@ -1,10 +1,19 @@
-<table class="torrentTable" cellpadding="0" cellspacing="0">
-    <thead>
-        <tr id="torrentsTableHeader" class="dynamicTableHeader">
-        </tr>
-    </thead>
-    <tbody id="torrentsTable"></tbody>
-</table>
+<div id="torrentsTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
+    <table class="dynamicTable unselectable" style="position:relative;">
+        <thead>
+            <tr class="dynamicTableHeader"></tr>
+        </thead>
+    </table>
+</div>
+
+<div id="torrentsTableDiv" class="dynamicTableDiv">
+    <table class="dynamicTable unselectable">
+        <thead>
+            <tr class="dynamicTableHeader"></tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+</div>
 
 <script type="text/javascript">
 
@@ -62,5 +71,5 @@
         }
     });
 
-    torrentsTable.setup('torrentsTable', 'torrentsTableHeader', torrentsTableContextMenu);
+    torrentsTable.setup('torrentsTableDiv', 'torrentsTableFixedHeaderDiv', torrentsTableContextMenu);
 </script>

From b1c45901f0592779333a18388e2de1646c79bfa5 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sun, 17 Jul 2016 11:17:03 +0300
Subject: [PATCH 03/18] Simplify dynamic table CSS styles

---
 src/webui/www/public/css/dynamicTable.css    | 79 ++++++--------------
 src/webui/www/public/scripts/dynamicTable.js |  1 -
 2 files changed, 21 insertions(+), 59 deletions(-)

diff --git a/src/webui/www/public/css/dynamicTable.css b/src/webui/www/public/css/dynamicTable.css
index 270a1dafc..d200ced26 100644
--- a/src/webui/www/public/css/dynamicTable.css
+++ b/src/webui/www/public/css/dynamicTable.css
@@ -2,79 +2,41 @@
 
 /**************************************************************
 
-	Dynamic Table
-	v 0.4
+    Dynamic Table
+    v 0.4
 
 **************************************************************/
-
-#properties #torrentFiles table,
-#properties #trackers table {
-	border: 1px solid #ccc;
-	width: 100%;
+.dynamicTable tbody tr {
+    background-color: #fff;
 }
 
-#properties #torrentFiles th,
-#properties #trackers th,
-#transferList th {
-	background-color: #eee;
-	padding: 4px;
+.dynamicTable tbody tr:nth-child(even),
+.dynamicTable tbody tr.alt {
+    background-color: #eee;
 }
 
-#properties #torrentFiles tr,
-#properties #trackers tr,
-#transferList tr {
-	background-color: #fff;
-	padding: 4px;
+#transferList .dynamicTable td {
+    padding: 0 2px;
 }
 
-
-#torrentsTable tr:nth-child(even),
-#torrentPeersTable tr:nth-child(even),
-#filesTable tr:nth-child(even),
-#properties #torrentFiles tr.alt,
-#properties #trackers tr.alt,
-#transferList tr.alt {
-	background-color: #eee;
-	padding: 4px;
+.dynamicTable tbody tr.selected {
+    background-color: #354158;
+    color: #fff;
 }
 
-#properties #torrentFiles td,
-#properties #trackers td,
-#transferList td {
-	padding: 0 2px;
+.dynamicTable tbody tr:hover {
+    background-color: #ee6600;
+    color: #fff;
 }
 
-#properties #torrentFiles tr.selected,
-#properties #trackers tr.selected,
-#transferList tr.selected {
-	background-color: #415A8D;
-	color: #fff;
-}
-#torrentPeersTable tr.selected {
-	background-color: #354158;
-	color: #fff;
-}
-
-#torrentsTable tr:hover,
-#torrentPeersTable tr:hover,
-#filesTable tr:hover,
-#properties #torrentFiles tr.over,
-#properties #trackers tr.over,
-#transferList tr.over {
-	background-color: #ee6600;
-	color: #fff;
-}
-
-#torrentsTable tr:hover,
-#properties #torrentFiles tr.over,
-#properties #trackers tr.over,
-#transferList tr.over {
-	cursor: pointer;
+#transferList tr:hover {
+    cursor: pointer;
 }
 
 #transferList img.statusIcon {
 	height: 1.3em;
 	vertical-align: middle;
+    margin-bottom: -1px;
 }
 
 tr.dynamicTableHeader {
@@ -89,12 +51,13 @@ tr.dynamicTableHeader {
 }
 
 .dynamicTable th {
-    padding: 5px 10px;
+    background-color: #eee;
+    padding: 4px;
     white-space: nowrap;
 }
 
 .dynamicTable td {
-    padding: 0px 3px;
+    padding:0px 4px;
     white-space: nowrap;
 }
 
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 6fec81a89..978a74eae 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -342,7 +342,6 @@ var DynamicTable = new Class({
                 tr_found = false;
                 for (j = rowPos; j < trs.length; j++)
                     if (trs[j]['rowId'] == rowId) {
-                        trs[rowPos].removeClass('over');
                         tr_found = true;
                         if (rowPos == j)
                             break;

From dd1959abfb69a5471da0323a3fbc61bff45670f6 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sat, 16 Jul 2016 23:39:13 +0300
Subject: [PATCH 04/18] Make torrent peers table scrollable horizontally

---
 src/webui/www/public/properties_content.html | 24 +++++++++++++-------
 src/webui/www/public/scripts/dynamicTable.js | 16 ++++++-------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/webui/www/public/properties_content.html b/src/webui/www/public/properties_content.html
index 624922062..d27407de2 100644
--- a/src/webui/www/public/properties_content.html
+++ b/src/webui/www/public/properties_content.html
@@ -65,13 +65,21 @@
 
 <div id="prop_peers" class="invisible">
     <div id="peers">
-        <table class="dynamicTable" style="width: 100%">
-            <thead>
-                <tr id="torrentPeersTableHeader" class="dynamicTableHeader">
-                </tr>
-            </thead>
-            <tbody id="torrentPeersTable"></tbody>
-        </table>
+        <div id="torrentPeersTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
+            <table class="dynamicTable" style="position:relative;">
+                <thead>
+                    <tr class="dynamicTableHeader"></tr>
+                </thead>
+            </table>
+        </div>
+        <div id="torrentPeersTableDiv" class="dynamicTableDiv">
+            <table class="dynamicTable">
+                <thead>
+                    <tr class="dynamicTableHeader"></tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
     </div>
 </div>
 
@@ -106,6 +114,6 @@
 </div>
 
 <script type="text/javascript">
-    //torrentPeersTable.setup('torrentPeersTable', 'torrentPeersTableHeader', null);
+    torrentPeersTable.setup('torrentPeersTableDiv', 'torrentPeersTableFixedHeaderDiv', null);
     $(getLocalStorageItem('selected_tab', 'PropGeneralLink')).click();
 </script>
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 978a74eae..baf1c8da1 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -811,14 +811,14 @@ var TorrentPeersTable = new Class({
             this.newColumn('country', 'width: 4px', '');
             this.newColumn('ip', 'width: 80px', 'QBT_TR(IP)QBT_TR');
             this.newColumn('port', 'width: 35px', 'QBT_TR(Port)QBT_TR');
-            this.newColumn('client', 'width: 110px', 'QBT_TR(Client)QBT_TR');
-            this.newColumn('progress', 'width: 30px', 'QBT_TR(Progress)QBT_TR');
-            this.newColumn('dl_speed', 'width: 30px', 'QBT_TR(Down Speed)QBT_TR');
-            this.newColumn('up_speed', 'width: 30px', 'QBT_TR(Up Speed)QBT_TR');
-            this.newColumn('downloaded', 'width: 30px', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]');
-            this.newColumn('uploaded', 'width: 30px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
-            this.newColumn('connection', 'width: 30px', 'QBT_TR(Connection)QBT_TR');
-            this.newColumn('flags', 'width: 30px', 'QBT_TR(Flags)QBT_TR');
+            this.newColumn('client', 'width: 140px', 'QBT_TR(Client)QBT_TR');
+            this.newColumn('progress', 'width: 50px', 'QBT_TR(Progress)QBT_TR');
+            this.newColumn('dl_speed', 'width: 50px', 'QBT_TR(Down Speed)QBT_TR');
+            this.newColumn('up_speed', 'width: 50px', 'QBT_TR(Up Speed)QBT_TR');
+            this.newColumn('downloaded', 'width: 50px', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]');
+            this.newColumn('uploaded', 'width: 50px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
+            this.newColumn('connection', 'width: 50px', 'QBT_TR(Connection)QBT_TR');
+            this.newColumn('flags', 'width: 50px', 'QBT_TR(Flags)QBT_TR');
             this.newColumn('relevance', 'width: 30px', 'QBT_TR(Relevance)QBT_TR');
 
             this.columns['country'].dataProperties.push('country_code');

From c765d8ebe21eb2c34b2d802e9a6f490d0b2a8be9 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sat, 16 Jul 2016 23:51:24 +0300
Subject: [PATCH 05/18] Add tooltips to dynamic table header

---
 src/webui/www/public/scripts/dynamicTable.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index baf1c8da1..23075dc9c 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -168,6 +168,7 @@ var DynamicTable = new Class({
                 th = ths[i];
                 th._this = this;
                 th.setAttribute('onclick', this.columns[i].onclick);
+                th.setAttribute('title', this.columns[i].caption);
                 th.innerHTML = this.columns[i].caption;
                 th.setAttribute('style', this.columns[i].style);
                 if ((this.columns[i].visible == '0') || this.columns[i].force_hide)

From 56c07704d8e6c80e4d13a3b92e1ec81561424235 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sun, 17 Jul 2016 23:35:55 +0300
Subject: [PATCH 06/18] Implement dynamic table columns resizing

---
 src/webui/www/public/scripts/dynamicTable.js | 147 +++++++++++++++----
 1 file changed, 116 insertions(+), 31 deletions(-)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 23075dc9c..35de754a3 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -50,10 +50,11 @@ var DynamicTable = new Class({
             this.initColumns();
             this.loadColumnsOrder();
             this.updateTableHeaders();
-            this.setupEvents();
+            this.setupCommonEvents();
+            this.setupHeaderEvents();
         },
 
-        setupEvents : function () {
+        setupCommonEvents : function () {
             var scrollFn = function() {
                 $(this.dynamicTableFixedHeaderDivId).getElements('table')[0].style.left =
                        -$(this.dynamicTableDivId).scrollLeft + 'px';
@@ -96,16 +97,96 @@ var DynamicTable = new Class({
             setInterval(checkResizeFn, 500);
         },
 
+        setupHeaderEvents : function () {
+            this.currentHeaderAction = '';
+            this.canResize = false;
+
+            var mouseMoveFn = function (e) {
+                var brect = e.target.getBoundingClientRect();
+                var mouseXRelative = e.event.clientX - brect.left;
+                if (this.currentHeaderAction === '') {
+                    if (brect.width - mouseXRelative < 5) {
+                        this.resizeTh = e.target;
+                        this.canResize = true;
+                        e.target.getParent("tr").style.cursor = 'col-resize';
+                    }
+                    else if ((mouseXRelative < 5) && e.target.getPrevious('[class=""]')) {
+                        this.resizeTh = e.target.getPrevious('[class=""]');
+                        this.canResize = true;
+                        e.target.getParent("tr").style.cursor = 'col-resize';
+                    } else {
+                        this.canResize = false;
+                        e.target.getParent("tr").style.cursor = '';
+                    }
+                }
+                this.lastHoverTh = e.target;
+                this.lastClientX = e.event.clientX;
+            }.bind(this);
+
+            var mouseOutFn = function (e) {
+            }.bind(this);
+
+            var onBeforeStart = function (el) {
+                this.clickedTh = el;
+                this.currentHeaderAction = 'start';
+                this.dragMovement = false;
+                this.dragStartX = this.lastClientX;
+            }.bind(this);
+
+            var onStart = function (el, event) {
+                if (this.canResize)
+                    this.currentHeaderAction = 'resize';
+                this.startWidth = this.resizeTh.getStyle('width').toFloat();
+            }.bind(this);
+
+            var onDrag = function (el, event) {
+                if (this.currentHeaderAction === 'resize') {
+                    var width = this.startWidth + (event.page.x - this.dragStartX);
+                    if (width < 16)
+                        width = 16;
+                    this.columns[this.resizeTh.columnName].width = width;
+                    this.updateColumn(this.resizeTh.columnName);
+                }
+            }.bind(this);
+
+            var onComplete = function (el, event) {
+                if (this.currentHeaderAction === 'resize')
+                    localStorage.setItem('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
+                this.currentHeaderAction = '';
+            }.bind(this);
+
+            var onCancel = function (el) {
+                this.currentHeaderAction = '';
+                this.setSortedColumn(el.columnName);
+            }.bind(this);
+
+            var ths = this.fixedTableHeader.getElements('th');
+
+            for (var i = 0; i < ths.length; i++) {
+                var th = ths[i];
+                th.addEvent('mousemove', mouseMoveFn);
+                th.addEvent('mouseout', mouseOutFn);
+                th.makeResizable({
+                    modifiers : {x: '', y: ''},
+                    onBeforeStart : onBeforeStart,
+                    onStart : onStart,
+                    onDrag : onDrag,
+                    onComplete : onComplete,
+                    onCancel : onCancel
+                })
+            }
+        },
+
         initColumns : function () {},
 
-        newColumn : function (name, style, caption) {
+        newColumn : function (name, style, caption, defaultWidth) {
             var column = {};
             column['name'] = name;
             column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, '1');
             column['force_hide'] = false;
             column['caption'] = caption;
             column['style'] = style;
-            column['onclick'] = 'this._this.setSortedColumn(\'' + name + '\');';
+            column['width'] = getLocalStorageItem('column_' + name + '_width_' + this.dynamicTableDivId, defaultWidth);
             column['dataProperties'] = [name];
             column['getRowValue'] = function (row, pos) {
                 if (pos == undefined)
@@ -167,10 +248,10 @@ var DynamicTable = new Class({
             for (var i = 0; i < ths.length; i++) {
                 th = ths[i];
                 th._this = this;
-                th.setAttribute('onclick', this.columns[i].onclick);
                 th.setAttribute('title', this.columns[i].caption);
                 th.innerHTML = this.columns[i].caption;
-                th.setAttribute('style', this.columns[i].style);
+                th.setAttribute('style', 'width: ' + this.columns[i].width + 'px;' + this.columns[i].style);
+                th.columnName = this.columns[i].name;
                 if ((this.columns[i].visible == '0') || this.columns[i].force_hide)
                     th.addClass('invisible');
                 else
@@ -191,6 +272,10 @@ var DynamicTable = new Class({
             var ths = this.hiddenTableHeader.getElements('th');
             var fths = this.fixedTableHeader.getElements('th');
             var trs = this.tableBody.getElements('tr');
+            var style = 'width: ' + this.columns[pos].width + 'px;' + this.columns[pos].style;
+
+            ths[pos].setAttribute('style', style);
+            fths[pos].setAttribute('style', style);
 
             if (visible) {
                 ths[pos].removeClass('invisible');
@@ -497,19 +582,19 @@ var TorrentsTable = new Class({
         Extends: DynamicTable,
 
         initColumns : function () {
-            this.newColumn('priority', 'width: 30px', '#');
-            this.newColumn('state_icon', 'width: 16px; cursor: default', '');
-            this.newColumn('name', 'width: 200px', 'QBT_TR(Name)QBT_TR');
-            this.newColumn('size', 'width: 100px', 'QBT_TR(Size)QBT_TR');
-            this.newColumn('progress', 'width: 80px', 'QBT_TR(Done)QBT_TR');
-            this.newColumn('num_seeds', 'width: 100px', 'QBT_TR(Seeds)QBT_TR');
-            this.newColumn('num_leechs', 'width: 100px', 'QBT_TR(Peers)QBT_TR');
-            this.newColumn('dlspeed', 'width: 100px', 'QBT_TR(Down Speed)QBT_TR');
-            this.newColumn('upspeed', 'width: 100px', 'QBT_TR(Up Speed)QBT_TR');
-            this.newColumn('eta', 'width: 100px', 'QBT_TR(ETA)QBT_TR');
-            this.newColumn('ratio', 'width: 100px', 'QBT_TR(Ratio)QBT_TR');
-            this.newColumn('category', 'width: 100px', 'QBT_TR(Category)QBT_TR');
-            this.newColumn('added_on', 'width: 100px', 'QBT_TR(Added on)QBT_TR');
+            this.newColumn('priority', '', '#', 30);
+            this.newColumn('state_icon', 'cursor: default', '', 22);
+            this.newColumn('name', '', 'QBT_TR(Name)QBT_TR', 200);
+            this.newColumn('size', '', 'QBT_TR(Size)QBT_TR', 100);
+            this.newColumn('progress', '', 'QBT_TR(Done)QBT_TR', 85);
+            this.newColumn('num_seeds', '', 'QBT_TR(Seeds)QBT_TR', 100);
+            this.newColumn('num_leechs', '', 'QBT_TR(Peers)QBT_TR', 100);
+            this.newColumn('dlspeed', '', 'QBT_TR(Down Speed)QBT_TR', 100);
+            this.newColumn('upspeed', '', 'QBT_TR(Up Speed)QBT_TR', 100);
+            this.newColumn('eta', '', 'QBT_TR(ETA)QBT_TR', 100);
+            this.newColumn('ratio', '', 'QBT_TR(Ratio)QBT_TR', 100);
+            this.newColumn('category', '', 'QBT_TR(Category)QBT_TR', 100);
+            this.newColumn('added_on', '', 'QBT_TR(Added on)QBT_TR', 100);
 
             this.columns['state_icon'].onclick = '';
             this.columns['state_icon'].dataProperties[0] = 'state';
@@ -809,18 +894,18 @@ var TorrentPeersTable = new Class({
         Extends: DynamicTable,
 
         initColumns : function () {
-            this.newColumn('country', 'width: 4px', '');
-            this.newColumn('ip', 'width: 80px', 'QBT_TR(IP)QBT_TR');
-            this.newColumn('port', 'width: 35px', 'QBT_TR(Port)QBT_TR');
-            this.newColumn('client', 'width: 140px', 'QBT_TR(Client)QBT_TR');
-            this.newColumn('progress', 'width: 50px', 'QBT_TR(Progress)QBT_TR');
-            this.newColumn('dl_speed', 'width: 50px', 'QBT_TR(Down Speed)QBT_TR');
-            this.newColumn('up_speed', 'width: 50px', 'QBT_TR(Up Speed)QBT_TR');
-            this.newColumn('downloaded', 'width: 50px', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]');
-            this.newColumn('uploaded', 'width: 50px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
-            this.newColumn('connection', 'width: 50px', 'QBT_TR(Connection)QBT_TR');
-            this.newColumn('flags', 'width: 50px', 'QBT_TR(Flags)QBT_TR');
-            this.newColumn('relevance', 'width: 30px', 'QBT_TR(Relevance)QBT_TR');
+            this.newColumn('country', '', '', 22);
+            this.newColumn('ip', '', 'QBT_TR(IP)QBT_TR', 80);
+            this.newColumn('port', '', 'QBT_TR(Port)QBT_TR', 35);
+            this.newColumn('client', '', 'QBT_TR(Client)QBT_TR', 140);
+            this.newColumn('progress', '', 'QBT_TR(Progress)QBT_TR', 50);
+            this.newColumn('dl_speed', '', 'QBT_TR(Down Speed)QBT_TR', 50);
+            this.newColumn('up_speed', '', 'QBT_TR(Up Speed)QBT_TR', 50);
+            this.newColumn('downloaded', '', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]', 50);
+            this.newColumn('uploaded', '', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]', 50);
+            this.newColumn('connection', '', 'QBT_TR(Connection)QBT_TR', 50);
+            this.newColumn('flags', '', 'QBT_TR(Flags)QBT_TR', 50);
+            this.newColumn('relevance', '', 'QBT_TR(Relevance)QBT_TR', 30);
 
             this.columns['country'].dataProperties.push('country_code');
             this.columns['flags'].dataProperties.push('flags_desc');

From 56b885995ced5be1a0905a26670159eb5ef17886 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Mon, 18 Jul 2016 13:06:44 +0300
Subject: [PATCH 07/18] Implement dynamic table columns reordering

---
 src/webui/www/public/scripts/dynamicTable.js | 81 +++++++++++++++++++-
 1 file changed, 77 insertions(+), 4 deletions(-)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 35de754a3..27c04b827 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -101,6 +101,19 @@ var DynamicTable = new Class({
             this.currentHeaderAction = '';
             this.canResize = false;
 
+            var resetElementBorderStyle = function (el, side) {
+                if (side === 'left' || side !== 'right') {
+                    el.setStyle('border-left-style', '');
+                    el.setStyle('border-left-color', '');
+                    el.setStyle('border-left-width', '');
+                }
+                if (side === 'right' || side !== 'left') {
+                    el.setStyle('border-right-style', '');
+                    el.setStyle('border-right-color', '');
+                    el.setStyle('border-right-width', '');
+                }
+            }
+
             var mouseMoveFn = function (e) {
                 var brect = e.target.getBoundingClientRect();
                 var mouseXRelative = e.event.clientX - brect.left;
@@ -119,11 +132,44 @@ var DynamicTable = new Class({
                         e.target.getParent("tr").style.cursor = '';
                     }
                 }
+                if (this.currentHeaderAction === 'drag') {
+                    var previousVisibleSibling = e.target.getPrevious('[class=""]');
+                    var borderChangeElement = previousVisibleSibling;
+                    var changeBorderSide = 'right';
+
+                    if (mouseXRelative > brect.width / 2) {
+                        borderChangeElement = e.target;
+                        this.dropSide = 'right';
+                    }
+                    else {
+                        this.dropSide = 'left';
+                    }
+
+                    e.target.getParent("tr").style.cursor = 'move';
+
+                    if (!previousVisibleSibling) { // right most column
+                        borderChangeElement = e.target;
+
+                        if (mouseXRelative <= brect.width / 2)
+                            changeBorderSide = 'left';
+                    }
+
+                    borderChangeElement.setStyle('border-' + changeBorderSide + '-style', 'solid');
+                    borderChangeElement.setStyle('border-' + changeBorderSide + '-color', '#e60');
+                    borderChangeElement.setStyle('border-' + changeBorderSide + '-width', 'initial');
+
+                    resetElementBorderStyle(borderChangeElement, changeBorderSide === 'right' ? 'left' : 'right');
+
+                    borderChangeElement.getSiblings('[class=""]').each(function(el){
+                        resetElementBorderStyle(el);
+                    });
+                }
                 this.lastHoverTh = e.target;
                 this.lastClientX = e.event.clientX;
             }.bind(this);
 
             var mouseOutFn = function (e) {
+                resetElementBorderStyle(e.target);
             }.bind(this);
 
             var onBeforeStart = function (el) {
@@ -134,9 +180,14 @@ var DynamicTable = new Class({
             }.bind(this);
 
             var onStart = function (el, event) {
-                if (this.canResize)
+                if (this.canResize) {
                     this.currentHeaderAction = 'resize';
-                this.startWidth = this.resizeTh.getStyle('width').toFloat();
+                    this.startWidth = this.resizeTh.getStyle('width').toFloat();
+                }
+                else {
+                    this.currentHeaderAction = 'drag';
+                    el.setStyle('background-color', '#C1D5E7');
+                }
             }.bind(this);
 
             var onDrag = function (el, event) {
@@ -150,8 +201,30 @@ var DynamicTable = new Class({
             }.bind(this);
 
             var onComplete = function (el, event) {
+                resetElementBorderStyle(this.lastHoverTh);
+                el.setStyle('background-color', '');
                 if (this.currentHeaderAction === 'resize')
                     localStorage.setItem('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
+                if ((this.currentHeaderAction === 'drag') && (el !== this.lastHoverTh)) {
+                    this.saveColumnsOrder();
+                    var val = localStorage.getItem('columns_order_' + this.dynamicTableDivId).split(',');
+                    val.erase(el.columnName);
+                    var pos = val.indexOf(this.lastHoverTh.columnName);
+                    if (this.dropSide === 'right') pos++;
+                    val.splice(pos, 0, el.columnName);
+                    localStorage.setItem('columns_order_' + this.dynamicTableDivId, val.join(','));
+                    this.loadColumnsOrder();
+                    this.updateTableHeaders();
+                    while (this.tableBody.firstChild)
+                        this.tableBody.removeChild(this.tableBody.firstChild);
+                    this.updateTable(true);
+                }
+                if (this.currentHeaderAction === 'drag') {
+                    resetElementBorderStyle(el);
+                    el.getSiblings('[class=""]').each(function(el){
+                        resetElementBorderStyle(el);
+                    });
+                }
                 this.currentHeaderAction = '';
             }.bind(this);
 
@@ -211,8 +284,8 @@ var DynamicTable = new Class({
         },
 
         loadColumnsOrder : function () {
-            columnsOrder = ['state_icon']; // status icon column is always the first
-            val = localStorage.getItem('columns_order_' + this.dynamicTableDivId);
+            var columnsOrder = [];
+            var val = localStorage.getItem('columns_order_' + this.dynamicTableDivId);
             if (val === null || val === undefined) return;
             val.split(',').forEach(function(v) {
                 if ((v in this.columns) && (!columnsOrder.contains(v)))

From 3ac87f22cb2ea68151d5526651586fec9ea39256 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Mon, 18 Jul 2016 18:58:16 +0300
Subject: [PATCH 08/18] Implement dynamic table columns hiding

---
 src/webui/www/public/scripts/contextmenu.js  |  2 +-
 src/webui/www/public/scripts/dynamicTable.js | 68 ++++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/webui/www/public/scripts/contextmenu.js b/src/webui/www/public/scripts/contextmenu.js
index c8f83483e..491595ea4 100644
--- a/src/webui/www/public/scripts/contextmenu.js
+++ b/src/webui/www/public/scripts/contextmenu.js
@@ -228,7 +228,7 @@ var ContextMenu = new Class({
     //execute an action
     execute: function (action, element) {
         if (this.options.actions[action]) {
-            this.options.actions[action](element, this);
+            this.options.actions[action](element, this, action);
         }
         return this;
     }
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 27c04b827..0e7be0eeb 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -31,6 +31,8 @@
 
  **************************************************************/
 
+var DynamicTableHeaderContextMenuClass = null;
+
 var DynamicTable = new Class({
 
         initialize : function () {},
@@ -52,6 +54,7 @@ var DynamicTable = new Class({
             this.updateTableHeaders();
             this.setupCommonEvents();
             this.setupHeaderEvents();
+            this.setupHeaderMenu();
         },
 
         setupCommonEvents : function () {
@@ -250,6 +253,71 @@ var DynamicTable = new Class({
             }
         },
 
+        setupDynamicTableHeaderContextMenuClass : function () {
+            if (!DynamicTableHeaderContextMenuClass) {
+                DynamicTableHeaderContextMenuClass = new Class({
+                    Extends: ContextMenu,
+                    updateMenuItems: function () {
+                        for (var i = 0; i < this.dynamicTable.columns.length; i++) {
+                            if (this.dynamicTable.columns[i].caption === '')
+                                continue;
+                            if (this.dynamicTable.columns[i].visible !== '0')
+                                this.setItemChecked(this.dynamicTable.columns[i].name, true);
+                            else
+                                this.setItemChecked(this.dynamicTable.columns[i].name, false);
+                        }
+                    }
+                });
+            }
+        },
+
+        showColumn : function (columnName, show) {
+            this.columns[columnName].visible = show ? '1' : '0';
+            localStorage.setItem('column_' + columnName + '_visible_' + this.dynamicTableDivId, show ? '1' : '0');
+            this.updateColumn(columnName);
+        },
+
+        setupHeaderMenu : function () {
+            this.setupDynamicTableHeaderContextMenuClass();
+
+            var menuId = this.dynamicTableDivId + '_headerMenu';
+
+            var ul = new Element('ul', {id: menuId, class: 'contextMenu'});
+
+            var createLi = function(columnName, text) {
+                    var html = '<a href="#' + columnName + '" ><img src="theme/checked"/>' + escapeHtml(text) + '</a>';
+                    return new Element('li', {html: html});
+                };
+
+            var actions = {};
+
+            var onMenuItemClicked = function (element, ref, action) {
+                    this.showColumn(action, this.columns[action].visible === '0');
+                }.bind(this);
+
+            for (var i = 0; i < this.columns.length; i++) {
+                var text = this.columns[i].caption;
+                if (text === '')
+                    continue;
+                ul.appendChild(createLi(this.columns[i].name, text));
+                actions[this.columns[i].name] = onMenuItemClicked;
+            }
+
+            ul.inject(document.body);
+
+            this.headerContextMenu = new DynamicTableHeaderContextMenuClass({
+                targets: '#' + this.dynamicTableFixedHeaderDivId + ' tr',
+                actions: actions,
+                menu : menuId,
+                offsets : {
+                    x : -15,
+                    y : 2
+                }
+            });
+
+            this.headerContextMenu.dynamicTable = this;
+        },
+
         initColumns : function () {},
 
         newColumn : function (name, style, caption, defaultWidth) {

From a087d146df8b071f215ea7761b3d2109c1da0237 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Mon, 18 Jul 2016 18:59:38 +0300
Subject: [PATCH 09/18] Fix columns names

---
 src/webui/www/public/scripts/dynamicTable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 0e7be0eeb..fb6efe209 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -735,7 +735,7 @@ var TorrentsTable = new Class({
             this.newColumn('eta', '', 'QBT_TR(ETA)QBT_TR', 100);
             this.newColumn('ratio', '', 'QBT_TR(Ratio)QBT_TR', 100);
             this.newColumn('category', '', 'QBT_TR(Category)QBT_TR', 100);
-            this.newColumn('added_on', '', 'QBT_TR(Added on)QBT_TR', 100);
+            this.newColumn('added_on', '', 'QBT_TR(Added On)QBT_TR', 100);
 
             this.columns['state_icon'].onclick = '';
             this.columns['state_icon'].dataProperties[0] = 'state';
@@ -1035,7 +1035,7 @@ var TorrentPeersTable = new Class({
         Extends: DynamicTable,
 
         initColumns : function () {
-            this.newColumn('country', '', '', 22);
+            this.newColumn('country', '', 'QBT_TR(Country)QBT_TR', 22);
             this.newColumn('ip', '', 'QBT_TR(IP)QBT_TR', 80);
             this.newColumn('port', '', 'QBT_TR(Port)QBT_TR', 35);
             this.newColumn('client', '', 'QBT_TR(Client)QBT_TR', 140);

From 134e4c1eb9eed84f3dec927b646a645ebda53c63 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Mon, 18 Jul 2016 22:13:55 +0300
Subject: [PATCH 10/18] Add some missing columns to dynamic tables

---
 src/webui/abstractwebapplication.cpp         |   2 +-
 src/webui/btjson.cpp                         |  62 +++++++++
 src/webui/www/public/scripts/dynamicTable.js | 135 +++++++++++++++----
 3 files changed, 171 insertions(+), 28 deletions(-)

diff --git a/src/webui/abstractwebapplication.cpp b/src/webui/abstractwebapplication.cpp
index 5b74f1bd8..b8f8c0575 100644
--- a/src/webui/abstractwebapplication.cpp
+++ b/src/webui/abstractwebapplication.cpp
@@ -244,7 +244,7 @@ void AbstractWebApplication::translateDocument(QString& data)
         "options_imp", "Preferences", "TrackersAdditionDlg", "ScanFoldersModel",
         "PropTabBar", "TorrentModel", "downloadFromURL", "MainWindow", "misc",
         "StatusBar", "AboutDlg", "about", "PeerListWidget", "StatusFiltersWidget",
-        "CategoryFiltersList"
+        "CategoryFiltersList", "TransferListDelegate"
     };
     const size_t context_count = sizeof(contexts) / sizeof(contexts[0]);
     int i = 0;
diff --git a/src/webui/btjson.cpp b/src/webui/btjson.cpp
index 7fa3a9388..f221e15ac 100644
--- a/src/webui/btjson.cpp
+++ b/src/webui/btjson.cpp
@@ -109,6 +109,19 @@ static const char KEY_TORRENT_FORCE_START[] = "force_start";
 static const char KEY_TORRENT_SAVE_PATH[] = "save_path";
 static const char KEY_TORRENT_ADDED_ON[] = "added_on";
 static const char KEY_TORRENT_COMPLETION_ON[] = "completion_on";
+static const char KEY_TORRENT_TRACKER[] = "tracker";
+static const char KEY_TORRENT_DL_LIMIT[] = "dl_limit";
+static const char KEY_TORRENT_UP_LIMIT[] = "up_limit";
+static const char KEY_TORRENT_AMOUNT_DOWNLOADED[] = "downloaded";
+static const char KEY_TORRENT_AMOUNT_UPLOADED[] = "uploaded";
+static const char KEY_TORRENT_AMOUNT_DOWNLOADED_SESSION[] = "downloaded_session";
+static const char KEY_TORRENT_AMOUNT_UPLOADED_SESSION[] = "uploaded_session";
+static const char KEY_TORRENT_AMOUNT_LEFT[] = "remaining";
+static const char KEY_TORRENT_AMOUNT_COMPLETED[] = "completed";
+static const char KEY_TORRENT_RATIO_LIMIT[] = "ratio_limit";
+static const char KEY_TORRENT_LAST_SEEN_COMPLETE_TIME[] = "seen_complete";
+static const char KEY_TORRENT_LAST_ACTIVITY_TIME[] = "last_activity";
+static const char KEY_TORRENT_TOTAL_SIZE[] = "total_size";
 
 // Peer keys
 static const char KEY_PEER_IP[] = "ip";
@@ -125,6 +138,7 @@ static const char KEY_PEER_CONNECTION_TYPE[] = "connection";
 static const char KEY_PEER_FLAGS[] = "flags";
 static const char KEY_PEER_FLAGS_DESCRIPTION[] = "flags_desc";
 static const char KEY_PEER_RELEVANCE[] = "relevance";
+static const char KEY_PEER_FILES[] = "files";
 
 // Tracker keys
 static const char KEY_TRACKER_URL[] = "url";
@@ -347,6 +361,21 @@ QByteArray btjson::getTorrents(QString filter, QString category,
  *  - "state": Torrent state
  *  - "seq_dl": Torrent sequential download state
  *  - "f_l_piece_prio": Torrent first last piece priority state
+ *  - "completion_on": Torrent copletion time
+ *  - "tracker": Torrent tracker
+ *  - "dl_limit": Torrent download limit
+ *  - "up_limit": Torrent upload limit
+ *  - "downloaded": Amount of data downloaded
+ *  - "uploaded": Amount of data uploaded
+ *  - "downloaded_session": Amount of data downloaded since program open
+ *  - "uploaded_session": Amount of data uploaded since program open
+ *  - "amount_left": Amount of data left to download
+ *  - "save_path": Torrent save path
+ *  - "completed": Amount of data completed
+ *  - "ratio_limit": Upload share ratio limit
+ *  - "seen_complete": Indicates the time when the torrent was last seen complete/whole
+ *  - "last_activity": Last time when a chunk was downloaded/uploaded
+ *  - "total_size": Size including unwanted data
  * Server state map may contain the following keys:
  *  - "connection_status": connection status
  *  - "dht_nodes": DHT nodes count
@@ -369,6 +398,16 @@ QByteArray btjson::getSyncMainData(int acceptedResponseId, QVariantMap &lastData
     foreach (BitTorrent::TorrentHandle *const torrent, session->torrents()) {
         QVariantMap map = toMap(torrent);
         map.remove(KEY_TORRENT_HASH);
+
+        // Calculated last activity time can differ from actual value by up to 10 seconds (this is a libtorrent issue).
+        // So we don't need unnecessary updates of last activity time in response.
+        if (lastData.contains("torrents") && lastData["torrents"].toHash().contains(torrent->hash()) &&
+                lastData["torrents"].toHash()[torrent->hash()].toMap().contains(KEY_TORRENT_LAST_ACTIVITY_TIME)) {
+            uint lastValue = lastData["torrents"].toHash()[torrent->hash()].toMap()[KEY_TORRENT_LAST_ACTIVITY_TIME].toUInt();
+            if (qAbs((int)(lastValue - map[KEY_TORRENT_LAST_ACTIVITY_TIME].toUInt())) < 15)
+                map[KEY_TORRENT_LAST_ACTIVITY_TIME] = lastValue;
+        }
+
         torrents[torrent->hash()] = map;
     }
 
@@ -429,6 +468,8 @@ QByteArray btjson::getSyncTorrentPeersData(int acceptedResponseId, QString hash,
         peer[KEY_PEER_FLAGS] = pi.flags();
         peer[KEY_PEER_FLAGS_DESCRIPTION] = pi.flagsDescription();
         peer[KEY_PEER_RELEVANCE] = pi.relevance();
+        peer[KEY_PEER_FILES] = torrent->info().filesForPiece(pi.downloadingPieceIndex()).join(QLatin1String("\n"));
+
         peers[pi.address().ip.toString() + ":" + QString::number(pi.address().port)] = peer;
     }
 
@@ -723,6 +764,27 @@ QVariantMap toMap(BitTorrent::TorrentHandle *const torrent)
     ret[KEY_TORRENT_SAVE_PATH] = Utils::Fs::toNativePath(torrent->savePath());
     ret[KEY_TORRENT_ADDED_ON] = torrent->addedTime().toTime_t();
     ret[KEY_TORRENT_COMPLETION_ON] = torrent->completedTime().toTime_t();
+    ret[KEY_TORRENT_TRACKER] = torrent->currentTracker();
+    ret[KEY_TORRENT_DL_LIMIT] = torrent->downloadLimit();
+    ret[KEY_TORRENT_UP_LIMIT] = torrent->uploadLimit();
+    ret[KEY_TORRENT_AMOUNT_DOWNLOADED] = torrent->totalDownload();
+    ret[KEY_TORRENT_AMOUNT_UPLOADED] = torrent->totalUpload();
+    ret[KEY_TORRENT_AMOUNT_DOWNLOADED_SESSION] = torrent->totalPayloadDownload();
+    ret[KEY_TORRENT_AMOUNT_UPLOADED_SESSION] = torrent->totalPayloadUpload();
+    ret[KEY_TORRENT_AMOUNT_LEFT] = torrent->incompletedSize();
+    ret[KEY_TORRENT_AMOUNT_COMPLETED] = torrent->completedSize();
+    ret[KEY_TORRENT_RATIO_LIMIT] = torrent->maxRatio();
+    ret[KEY_TORRENT_LAST_SEEN_COMPLETE_TIME] = torrent->lastSeenComplete().toTime_t();
+
+    if (torrent->isPaused() || torrent->isChecking())
+        ret[KEY_TORRENT_LAST_ACTIVITY_TIME] = 0;
+    else {
+        QDateTime dt = QDateTime::currentDateTime();
+        dt = dt.addSecs(-torrent->timeSinceActivity());
+        ret[KEY_TORRENT_LAST_ACTIVITY_TIME] = dt.toTime_t();
+    }
+
+    ret[KEY_TORRENT_TOTAL_SIZE] = torrent->totalSize();
 
     return ret;
 }
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index fb6efe209..8f9a0caa7 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -320,10 +320,10 @@ var DynamicTable = new Class({
 
         initColumns : function () {},
 
-        newColumn : function (name, style, caption, defaultWidth) {
+        newColumn : function (name, style, caption, defaultWidth, defaultVisible) {
             var column = {};
             column['name'] = name;
-            column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, '1');
+            column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, defaultVisible ? '1' : '0');
             column['force_hide'] = false;
             column['caption'] = caption;
             column['style'] = style;
@@ -723,19 +723,34 @@ var TorrentsTable = new Class({
         Extends: DynamicTable,
 
         initColumns : function () {
-            this.newColumn('priority', '', '#', 30);
-            this.newColumn('state_icon', 'cursor: default', '', 22);
-            this.newColumn('name', '', 'QBT_TR(Name)QBT_TR', 200);
-            this.newColumn('size', '', 'QBT_TR(Size)QBT_TR', 100);
-            this.newColumn('progress', '', 'QBT_TR(Done)QBT_TR', 85);
-            this.newColumn('num_seeds', '', 'QBT_TR(Seeds)QBT_TR', 100);
-            this.newColumn('num_leechs', '', 'QBT_TR(Peers)QBT_TR', 100);
-            this.newColumn('dlspeed', '', 'QBT_TR(Down Speed)QBT_TR', 100);
-            this.newColumn('upspeed', '', 'QBT_TR(Up Speed)QBT_TR', 100);
-            this.newColumn('eta', '', 'QBT_TR(ETA)QBT_TR', 100);
-            this.newColumn('ratio', '', 'QBT_TR(Ratio)QBT_TR', 100);
-            this.newColumn('category', '', 'QBT_TR(Category)QBT_TR', 100);
-            this.newColumn('added_on', '', 'QBT_TR(Added On)QBT_TR', 100);
+            this.newColumn('priority', '', '#', 30, true);
+            this.newColumn('state_icon', 'cursor: default', '', 22, true);
+            this.newColumn('name', '', 'QBT_TR(Name)QBT_TR[CONTEXT=TorrentModel]', 200, true);
+            this.newColumn('size', '', 'QBT_TR(Size)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('progress', '', 'QBT_TR(Done)QBT_TR[CONTEXT=TorrentModel]', 85, true);
+            this.newColumn('num_seeds', '', 'QBT_TR(Seeds)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('num_leechs', '', 'QBT_TR(Peers)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('dlspeed', '', 'QBT_TR(Down Speed)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('upspeed', '', 'QBT_TR(Up Speed)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('eta', '', 'QBT_TR(ETA)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('ratio', '', 'QBT_TR(Ratio)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('category', '', 'QBT_TR(Category)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('added_on', '', 'QBT_TR(Added On)QBT_TR[CONTEXT=TorrentModel]', 100, true);
+            this.newColumn('completion_on', '', 'QBT_TR(Completed On)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('tracker', '', 'QBT_TR(Tracker)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('dl_limit', '', 'QBT_TR(Down Limit)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('up_limit', '', 'QBT_TR(Up Limit)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('downloaded', '', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('uploaded', '', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('downloaded_session', '', 'QBT_TR(Session Download)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('uploaded_session', '', 'QBT_TR(Session Upload)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('amount_left', '', 'QBT_TR(Remaining)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('save_path', '', 'QBT_TR(Save path)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('completed', '', 'QBT_TR(Completed)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('ratio_limit', '', 'QBT_TR(Ratio Limit)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('seen_complete', '', 'QBT_TR(Last Seen Complete)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('last_activity', '', 'QBT_TR(Last Activity)QBT_TR[CONTEXT=TorrentModel]', 100, false);
+            this.newColumn('total_size', '', 'QBT_TR(Total Size)QBT_TR[CONTEXT=TorrentModel]', 100, false);
 
             this.columns['state_icon'].onclick = '';
             this.columns['state_icon'].dataProperties[0] = 'state';
@@ -909,6 +924,64 @@ var TorrentsTable = new Class({
                 var date = new Date(this.getRowValue(row) * 1000).toLocaleString();
                 td.set('html', date);
             };
+
+            // completion_on
+
+            this.columns['completion_on'].updateTd = function (td, row) {
+                var val = this.getRowValue(row);
+                if (val === 0xffffffff || val < 0)
+                    td.set('html', '');
+                else {
+                    var date = new Date(this.getRowValue(row) * 1000).toLocaleString();
+                    td.set('html', date);
+                }
+            };
+
+            // seen_complete
+
+            this.columns['seen_complete'].updateTd = this.columns['completion_on'].updateTd;
+
+            //  dl_limit, up_limit
+
+            this.columns['dl_limit'].updateTd = function (td, row) {
+                var speed = this.getRowValue(row);
+                if (speed === 0)
+                    td.set('html', '∞')
+                else
+                    td.set('html', friendlyUnit(speed, true));
+            };
+
+            this.columns['up_limit'].updateTd = this.columns['dl_limit'].updateTd;
+
+            // downloaded, uploaded, downloaded_session, uploaded_session, amount_left, completed, total_size
+
+            this.columns['downloaded'].updateTd = this.columns['size'].updateTd;
+            this.columns['uploaded'].updateTd = this.columns['size'].updateTd;
+            this.columns['downloaded_session'].updateTd = this.columns['size'].updateTd;
+            this.columns['uploaded_session'].updateTd = this.columns['size'].updateTd;
+            this.columns['amount_left'].updateTd = this.columns['size'].updateTd;
+            this.columns['amount_left'].updateTd = this.columns['size'].updateTd;
+            this.columns['completed'].updateTd = this.columns['size'].updateTd;
+            this.columns['total_size'].updateTd = this.columns['size'].updateTd;
+
+            // save_path, tracker
+
+            this.columns['save_path'].updateTd = this.columns['name'].updateTd;
+            this.columns['tracker'].updateTd = this.columns['name'].updateTd;
+
+            // ratio_limit
+
+            this.columns['ratio_limit'].updateTd = this.columns['ratio'].updateTd;
+
+            // last_activity
+
+            this.columns['last_activity'].updateTd = function (td, row) {
+                var val = this.getRowValue(row);
+                if (val < 1)
+                    td.set('html', '∞');
+                else
+                    td.set('html', 'QBT_TR(%1 ago)QBT_TR[CONTEXT=TransferListDelegate]'.replace('%1', friendlyDuration((new Date()) / 1000 - val, true)));
+            };
         },
 
         applyFilter : function (row, filterName, categoryHash) {
@@ -1035,18 +1108,19 @@ var TorrentPeersTable = new Class({
         Extends: DynamicTable,
 
         initColumns : function () {
-            this.newColumn('country', '', 'QBT_TR(Country)QBT_TR', 22);
-            this.newColumn('ip', '', 'QBT_TR(IP)QBT_TR', 80);
-            this.newColumn('port', '', 'QBT_TR(Port)QBT_TR', 35);
-            this.newColumn('client', '', 'QBT_TR(Client)QBT_TR', 140);
-            this.newColumn('progress', '', 'QBT_TR(Progress)QBT_TR', 50);
-            this.newColumn('dl_speed', '', 'QBT_TR(Down Speed)QBT_TR', 50);
-            this.newColumn('up_speed', '', 'QBT_TR(Up Speed)QBT_TR', 50);
-            this.newColumn('downloaded', '', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]', 50);
-            this.newColumn('uploaded', '', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]', 50);
-            this.newColumn('connection', '', 'QBT_TR(Connection)QBT_TR', 50);
-            this.newColumn('flags', '', 'QBT_TR(Flags)QBT_TR', 50);
-            this.newColumn('relevance', '', 'QBT_TR(Relevance)QBT_TR', 30);
+            this.newColumn('country', '', 'QBT_TR(Country)QBT_TR[CONTEXT=PeerListWidget]', 22, true);
+            this.newColumn('ip', '', 'QBT_TR(IP)QBT_TR[CONTEXT=PeerListWidget]', 80, true);
+            this.newColumn('port', '', 'QBT_TR(Port)QBT_TR[CONTEXT=PeerListWidget]', 35, true);
+            this.newColumn('client', '', 'QBT_TR(Client)QBT_TR[CONTEXT=PeerListWidget]', 140, true);
+            this.newColumn('progress', '', 'QBT_TR(Progress)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('dl_speed', '', 'QBT_TR(Down Speed)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('up_speed', '', 'QBT_TR(Up Speed)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('downloaded', '', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('uploaded', '', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('connection', '', 'QBT_TR(Connection)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('flags', '', 'QBT_TR(Flags)QBT_TR[CONTEXT=PeerListWidget]', 50, true);
+            this.newColumn('relevance', '', 'QBT_TR(Relevance)QBT_TR[CONTEXT=PeerListWidget]', 30, true);
+            this.newColumn('files', '', 'QBT_TR(Files)QBT_TR[CONTEXT=PeerListWidget]', 100, true);
 
             this.columns['country'].dataProperties.push('country_code');
             this.columns['flags'].dataProperties.push('flags_desc');
@@ -1141,6 +1215,13 @@ var TorrentPeersTable = new Class({
                 td.title = this.getRowValue(row, 1);
             };
 
+            // files
+
+            this.columns['files'].updateTd = function (td, row) {
+                td.innerHTML = escapeHtml(this.getRowValue(row, 0).replace('\n', ';'));
+                td.title = escapeHtml(this.getRowValue(row, 0));
+            };
+
         }
     });
 

From 3dfcd6db6a0abdc5ccfb57a59d87da56531c94a1 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Mon, 18 Jul 2016 22:33:16 +0300
Subject: [PATCH 11/18] Make too tall menus scrollable

---
 src/webui/www/private/index.html             |  2 +-
 src/webui/www/public/css/style.css           |  5 +++++
 src/webui/www/public/scripts/contextmenu.js  | 11 +++++++++--
 src/webui/www/public/scripts/dynamicTable.js |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index 1b5eb46f8..4ed47a2c6 100644
--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -107,7 +107,7 @@
         <li class="separator"><a href="#Delete"><img src="theme/list-remove" alt="QBT_TR(Delete)QBT_TR"/> QBT_TR(Delete)QBT_TR</a></li>
         <li class="separator">
             <a href="#Category" class="arrow-right"><img src="theme/view-categories" alt="QBT_TR(Category)QBT_TR"/> QBT_TR(Category)QBT_TR</a>
-            <ul id="contextCategoryList"></ul>
+            <ul id="contextCategoryList" class="scrollableMenu"></ul>
         </li>
         <li id="queueingMenuItems" class="separator">
             <a href="#priority" class="arrow-right"><span style="display: inline-block; width:16px"></span> QBT_TR(Priority)QBT_TR</a>
diff --git a/src/webui/www/public/css/style.css b/src/webui/www/public/css/style.css
index e101065fb..5eea81c7a 100644
--- a/src/webui/www/public/css/style.css
+++ b/src/webui/www/public/css/style.css
@@ -165,6 +165,11 @@ a.propButton img {
     margin-bottom: -4px;
 }
 
+.scrollableMenu {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
 /* context menu specific */
 
 .contextMenu { border:1px solid #999; padding:0; background:#eee; list-style-type:none; display:none;}
diff --git a/src/webui/www/public/scripts/contextmenu.js b/src/webui/www/public/scripts/contextmenu.js
index 491595ea4..11cfbf222 100644
--- a/src/webui/www/public/scripts/contextmenu.js
+++ b/src/webui/www/public/scripts/contextmenu.js
@@ -57,6 +57,11 @@ var ContextMenu = new Class({
     adjustMenuPosition: function(e) {
         this.updateMenuItems();
 
+        var scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75;
+
+        if (this.menu.hasClass('scrollableMenu'))
+            this.menu.setStyle('max-height', scrollableMenuMaxHeight);
+
         // draw the menu off-screen to know the menu dimentions
         this.menu.setStyles({
             left: '-999em',
@@ -69,7 +74,7 @@ var ContextMenu = new Class({
         if (xPos + this.menu.offsetWidth > document.documentElement.clientWidth)
             xPos -= this.menu.offsetWidth;
         if (yPos + this.menu.offsetHeight > document.documentElement.clientHeight)
-            yPos -= this.menu.offsetHeight;
+            yPos = document.documentElement.clientHeight - this.menu.offsetHeight;
         if (xPos < 0)
             xPos = 0;
         if (yPos < 0)
@@ -85,6 +90,8 @@ var ContextMenu = new Class({
         var uls = this.menu.getElementsByTagName('ul');
         for (var i = 0; i < uls.length; i++) {
             var ul = uls[i];
+            if (ul.hasClass('scrollableMenu'))
+                ul.setStyle('max-height', scrollableMenuMaxHeight);
             var rectParent = ul.parentNode.getBoundingClientRect();
             var xPosOrigin = rectParent.left;
             var yPosOrigin = rectParent.bottom;
@@ -93,7 +100,7 @@ var ContextMenu = new Class({
             if (xPos + ul.offsetWidth > document.documentElement.clientWidth)
                 xPos -= (ul.offsetWidth + rectParent.width - 2);
             if (yPos + ul.offsetHeight > document.documentElement.clientHeight)
-                yPos -= (ul.offsetHeight - rectParent.height - 2);
+                yPos = document.documentElement.clientHeight - ul.offsetHeight;
             if (xPos < 0)
                 xPos = 0;
             if (yPos < 0)
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 8f9a0caa7..9d711ea41 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -282,7 +282,7 @@ var DynamicTable = new Class({
 
             var menuId = this.dynamicTableDivId + '_headerMenu';
 
-            var ul = new Element('ul', {id: menuId, class: 'contextMenu'});
+            var ul = new Element('ul', {id: menuId, class: 'contextMenu scrollableMenu'});
 
             var createLi = function(columnName, text) {
                     var html = '<a href="#' + columnName + '" ><img src="theme/checked"/>' + escapeHtml(text) + '</a>';

From bdf736b7d7e013e079d9f5b1a5e922e242e6c11c Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Wed, 7 Sep 2016 15:08:03 +0300
Subject: [PATCH 12/18] Prevent text wrapping in menus

---
 src/webui/www/public/css/style.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/webui/www/public/css/style.css b/src/webui/www/public/css/style.css
index 5eea81c7a..1c92eca60 100644
--- a/src/webui/www/public/css/style.css
+++ b/src/webui/www/public/css/style.css
@@ -175,7 +175,15 @@ a.propButton img {
 .contextMenu { border:1px solid #999; padding:0; background:#eee; list-style-type:none; display:none;}
 .contextMenu .separator { border-top:1px solid #999; }
 .contextMenu li { margin:0; padding:0;}
-.contextMenu li a { display:block; padding:5px 10px 5px 5px; font-size:12px; text-decoration:none; font-family:tahoma,arial,sans-serif; color:#000; }
+.contextMenu li a {
+    display: block;
+    padding: 5px 14px 5px 5px;
+    font-size: 12px;
+    text-decoration: none;
+    font-family: tahoma,arial,sans-serif;
+    color: #000;
+    white-space: nowrap;
+}
 .contextMenu li a:hover { background-color:#ddd; }
 .contextMenu li a.disabled { color:#ccc; font-style:italic; }
 .contextMenu li a.disabled:hover { background-color:#eee; }

From e65a628bf92f208fdc2b664957de7f9249137e1d Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Wed, 7 Sep 2016 15:41:17 +0300
Subject: [PATCH 13/18] Add a vertical separator between columns

---
 src/webui/www/public/css/dynamicTable.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/webui/www/public/css/dynamicTable.css b/src/webui/www/public/css/dynamicTable.css
index d200ced26..380947ed2 100644
--- a/src/webui/www/public/css/dynamicTable.css
+++ b/src/webui/www/public/css/dynamicTable.css
@@ -54,6 +54,12 @@ tr.dynamicTableHeader {
     background-color: #eee;
     padding: 4px;
     white-space: nowrap;
+    border-right-color: #ccc;
+    border-right-style: solid;
+    border-right-width: 1px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 
 .dynamicTable td {

From 09cf93521f26ee794725653c01aef5cbf93d8704 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sun, 18 Dec 2016 07:34:20 +0300
Subject: [PATCH 14/18] Follow project coding style. Issue #2192.

---
 src/webui/www/public/scripts/progressbar.js | 174 ++++++++++----------
 1 file changed, 87 insertions(+), 87 deletions(-)

diff --git a/src/webui/www/public/scripts/progressbar.js b/src/webui/www/public/scripts/progressbar.js
index 32fee1fcf..cf84c4c65 100644
--- a/src/webui/www/public/scripts/progressbar.js
+++ b/src/webui/www/public/scripts/progressbar.js
@@ -1,99 +1,99 @@
 var ProgressBar = new Class({
-	initialize: function(value, parameters) {
-		var vals = {
-			'id': 'progressbar_' + (ProgressBars++),
-			'value': $pick(value, 0),
-			'width': 0,
-			'height': 0,
-			'darkbg': '#006',
-			'darkfg': '#fff',
-			'lightbg': '#fff',
-			'lightfg': '#000'
-		};
-		if (parameters && $type(parameters) == 'object') $extend(vals, parameters);
-		if (vals.height < 12) vals.height = 12;
-		var obj = new Element('div', {
-			'id': vals.id,
-			'class': 'progressbar_wrapper',
-			'styles': {
-				'border': '1px solid #000',
-				'width': vals.width,
-				'height': vals.height,
-				'position': 'relative',
-				'margin': '0 auto'
-			}
-		});
-		obj.vals = vals;
-		obj.vals.value = $pick(value, 0); // Fix by Chris
-		obj.vals.dark = new Element('div', {
-			'id': vals.id + '_dark',
-			'class': 'progressbar_dark',
-			'styles': {
-				'width': vals.width,
-				'height': vals.height,
-				'background': vals.darkbg,
-				'color': vals.darkfg,
-				'position': 'absolute',
-				'text-align': 'center',
-				'left': 0,
-				'top': 0,
-				'line-height': vals.height
-			}
-		});
-		obj.vals.light = new Element('div', {
-			'id': vals.id + '_light',
-			'class': 'progressbar_light',
-			'styles': {
-				'width': vals.width,
-				'height': vals.height,
-				'background': vals.lightbg,
-				'color': vals.lightfg,
-				'position': 'absolute',
-				'text-align': 'center',
-				'left': 0,
-				'top': 0,
-				'line-height': vals.height
-			}
-		});
-		obj.appendChild(obj.vals.dark);
-		obj.appendChild(obj.vals.light);
-		obj.getValue = ProgressBar_getValue;
-		obj.setValue = ProgressBar_setValue;
-		if (vals.width) obj.setValue(vals.value);
-		else setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1);
-		return obj;
-	}
+    initialize: function(value, parameters) {
+        var vals = {
+            'id': 'progressbar_' + (ProgressBars++),
+            'value': $pick(value, 0),
+            'width': 0,
+            'height': 0,
+            'darkbg': '#006',
+            'darkfg': '#fff',
+            'lightbg': '#fff',
+            'lightfg': '#000'
+        };
+        if (parameters && $type(parameters) == 'object') $extend(vals, parameters);
+        if (vals.height < 12) vals.height = 12;
+        var obj = new Element('div', {
+            'id': vals.id,
+            'class': 'progressbar_wrapper',
+            'styles': {
+                'border': '1px solid #000',
+                'width': vals.width,
+                'height': vals.height,
+                'position': 'relative',
+                'margin': '0 auto'
+            }
+        });
+        obj.vals = vals;
+        obj.vals.value = $pick(value, 0); // Fix by Chris
+        obj.vals.dark = new Element('div', {
+            'id': vals.id + '_dark',
+            'class': 'progressbar_dark',
+            'styles': {
+                'width': vals.width,
+                'height': vals.height,
+                'background': vals.darkbg,
+                'color': vals.darkfg,
+                'position': 'absolute',
+                'text-align': 'center',
+                'left': 0,
+                'top': 0,
+                'line-height': vals.height
+            }
+        });
+        obj.vals.light = new Element('div', {
+            'id': vals.id + '_light',
+            'class': 'progressbar_light',
+            'styles': {
+                'width': vals.width,
+                'height': vals.height,
+                'background': vals.lightbg,
+                'color': vals.lightfg,
+                'position': 'absolute',
+                'text-align': 'center',
+                'left': 0,
+                'top': 0,
+                'line-height': vals.height
+            }
+        });
+        obj.appendChild(obj.vals.dark);
+        obj.appendChild(obj.vals.light);
+        obj.getValue = ProgressBar_getValue;
+        obj.setValue = ProgressBar_setValue;
+        if (vals.width) obj.setValue(vals.value);
+        else setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1);
+        return obj;
+    }
 });
 
 function ProgressBar_getValue() {
-	return this.vals.value;
+    return this.vals.value;
 }
 
 function ProgressBar_setValue(value) {
-	value = parseFloat(value);
-	if (isNaN(value)) value = 0;
-	if (value > 100) value = 100;
-	if (value < 0) value = 0;
-	this.vals.value = value;
-	this.vals.dark.empty();
-	this.vals.light.empty();
-	this.vals.dark.appendText(value + '%');
-	this.vals.light.appendText(value + '%');
-	var r = parseInt(this.vals.width * (value / 100));
-	this.vals.dark.setStyle('clip', 'rect(0,' + r + 'px,' + this.vals.height + 'px,0)');
-	this.vals.light.setStyle('clip', 'rect(0,' + this.vals.width + 'px,' + this.vals.height + 'px,' + r + 'px)');
+    value = parseFloat(value);
+    if (isNaN(value)) value = 0;
+    if (value > 100) value = 100;
+    if (value < 0) value = 0;
+    this.vals.value = value;
+    this.vals.dark.empty();
+    this.vals.light.empty();
+    this.vals.dark.appendText(value + '%');
+    this.vals.light.appendText(value + '%');
+    var r = parseInt(this.vals.width * (value / 100));
+    this.vals.dark.setStyle('clip', 'rect(0,' + r + 'px,' + this.vals.height + 'px,0)');
+    this.vals.light.setStyle('clip', 'rect(0,' + this.vals.width + 'px,' + this.vals.height + 'px,' + r + 'px)');
 }
 
 function ProgressBar_checkForParent(id) {
-	var obj = $(id);
-	if (!obj) return;
-	if (!obj.parentNode) return setTimeout('ProgressBar_checkForParent("' + id + '")', 1);
-	obj.setStyle('width', '100%');
-	var w = obj.offsetWidth;
-	obj.vals.dark.setStyle('width', w);
-	obj.vals.light.setStyle('width', w);
-	obj.vals.width = w;
-	obj.setValue(obj.vals.value);
+    var obj = $(id);
+    if (!obj) return;
+    if (!obj.parentNode) return setTimeout('ProgressBar_checkForParent("' + id + '")', 1);
+    obj.setStyle('width', '100%');
+    var w = obj.offsetWidth;
+    obj.vals.dark.setStyle('width', w);
+    obj.vals.light.setStyle('width', w);
+    obj.vals.width = w;
+    obj.setValue(obj.vals.value);
 }
 
-var ProgressBars = 0;
\ No newline at end of file
+var ProgressBars = 0;

From d50a7778fe6367296b738cb91ce3555bbb829c84 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sun, 18 Dec 2016 07:40:46 +0300
Subject: [PATCH 15/18] Implement resizable progress bar in "Done" column

---
 src/webui/www/public/scripts/dynamicTable.js | 15 ++++++++++++++-
 src/webui/www/public/scripts/progressbar.js  | 11 +++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 9d711ea41..5fb4e732b 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -344,6 +344,7 @@ var DynamicTable = new Class({
             column['updateTd'] = function (td, row) {
                 td.innerHTML = this.getRowValue(row);
             };
+            column['onResize'] = null;
             this.columns.push(column);
             this.columns[name] = column;
 
@@ -430,6 +431,10 @@ var DynamicTable = new Class({
                 for (var i = 0; i < trs.length; i++)
                     trs[i].getElements('td')[pos].addClass('invisible');
             }
+            if (this.columns[pos].onResize !== null)
+            {
+                this.columns[pos].onResize(columnName);
+            }
         },
 
         setSortedColumn : function (column) {
@@ -846,15 +851,23 @@ var TorrentsTable = new Class({
 
                 if (td.getChildren('div').length) {
                     var div = td.getChildren('div')[0];
+                    div.setWidth(td.offsetWidth - 5);
                     if (div.getValue() != progressFormated)
                         div.setValue(progressFormated);
                 }
                 else
                     td.adopt(new ProgressBar(progressFormated.toFloat(), {
-                        'width' : 80
+                        'width' : td.offsetWidth - 5
                     }));
             };
 
+            this.columns['progress'].onResize = function (columnName) {
+                var pos = this.getColumnPos(columnName);
+                var trs = this.tableBody.getElements('tr');
+                for (var i = 0; i < trs.length; i++)
+                    this.columns[columnName].updateTd(trs[i].getElements('td')[pos], this.rows.get(trs[i].rowId));
+            }.bind(this);
+
             // num_seeds
 
             this.columns['num_seeds'].updateTd = function (td, row) {
diff --git a/src/webui/www/public/scripts/progressbar.js b/src/webui/www/public/scripts/progressbar.js
index cf84c4c65..880670ae8 100644
--- a/src/webui/www/public/scripts/progressbar.js
+++ b/src/webui/www/public/scripts/progressbar.js
@@ -59,6 +59,7 @@ var ProgressBar = new Class({
         obj.appendChild(obj.vals.light);
         obj.getValue = ProgressBar_getValue;
         obj.setValue = ProgressBar_setValue;
+        obj.setWidth = ProgressBar_setWidth;
         if (vals.width) obj.setValue(vals.value);
         else setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1);
         return obj;
@@ -84,6 +85,16 @@ function ProgressBar_setValue(value) {
     this.vals.light.setStyle('clip', 'rect(0,' + this.vals.width + 'px,' + this.vals.height + 'px,' + r + 'px)');
 }
 
+function ProgressBar_setWidth(value) {
+    if (this.vals.width !== value) {
+        this.vals.width = value;
+        this.setStyle('width', value);
+        this.vals.dark.setStyle('width', value);
+        this.vals.light.setStyle('width', value);
+        this.setValue(this.vals.value);
+    }
+}
+
 function ProgressBar_checkForParent(id) {
     var obj = $(id);
     if (!obj) return;

From 7628490def8f8bd47213f0ee2195db1ffe0917c0 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sun, 18 Dec 2016 08:18:35 +0300
Subject: [PATCH 16/18] Fix scrollbar covers menu item with long text

---
 src/webui/www/public/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webui/www/public/css/style.css b/src/webui/www/public/css/style.css
index 1c92eca60..f8c19ac85 100644
--- a/src/webui/www/public/css/style.css
+++ b/src/webui/www/public/css/style.css
@@ -177,7 +177,7 @@ a.propButton img {
 .contextMenu li { margin:0; padding:0;}
 .contextMenu li a {
     display: block;
-    padding: 5px 14px 5px 5px;
+    padding: 5px 20px 5px 5px;
     font-size: 12px;
     text-decoration: none;
     font-family: tahoma,arial,sans-serif;

From 741e0a08ea8f5186e72b7a8635ee7f70311793d3 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sat, 21 Jan 2017 16:19:42 +0300
Subject: [PATCH 17/18] Remove 300px limit of column width

---
 src/webui/www/public/css/dynamicTable.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/webui/www/public/css/dynamicTable.css b/src/webui/www/public/css/dynamicTable.css
index 380947ed2..c36310531 100644
--- a/src/webui/www/public/css/dynamicTable.css
+++ b/src/webui/www/public/css/dynamicTable.css
@@ -76,7 +76,6 @@ tr.dynamicTableHeader {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    max-width: 300px;
 }
 
 .dynamicTableFixedHeaderDiv {

From 484e021ca2c02d48e4e28ba7acb2a2241cbd18bd Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Sat, 21 Jan 2017 16:37:34 +0300
Subject: [PATCH 18/18] Avoid lags in firefox on resizing progress column

---
 src/webui/www/public/scripts/dynamicTable.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 5fb4e732b..09235f09a 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/src/webui/www/public/scripts/dynamicTable.js
@@ -851,7 +851,11 @@ var TorrentsTable = new Class({
 
                 if (td.getChildren('div').length) {
                     var div = td.getChildren('div')[0];
-                    div.setWidth(td.offsetWidth - 5);
+                    var newWidth = td.offsetWidth - 5;
+                    if (div.lastWidth !== newWidth) {
+                        div.setWidth(newWidth);
+                        div.lastWidth = newWidth;
+                    }
                     if (div.getValue() != progressFormated)
                         div.setValue(progressFormated);
                 }