Merge pull request #51 from tt-rss/js-proto-extensions-and-misc-cleanup

Remove various JS prototype extensions and alias functions

19 files changed, 219 insertions, 345 deletions

diff --git a/classes/Pref_Prefs.php b/classes/Pref_Prefs.php
index df0b62923..54cb4fa4f 100644
--- a/classes/Pref_Prefs.php
+++ b/classes/Pref_Prefs.php
@@ -345,14 +345,14 @@ class Pref_Prefs extends Handler_Protected {
 							Notify.close();
 							if (reply.indexOf('ERROR: ') == 0) {
 
-								App.byId('pwd_change_infobox').innerHTML =
+								document.getElementById('pwd_change_infobox').innerHTML =
 								reply.replace('ERROR: ', '');
 
 							} else {
-								App.byId('pwd_change_infobox').innerHTML =
+								document.getElementById('pwd_change_infobox').innerHTML =
 								reply.replace('ERROR: ', '');
 
-								const warn = App.byId('default_pass_warning');
+								const warn = document.getElementById('default_pass_warning');
 								if (warn) Element.hide(warn);
 							}
 
diff --git a/classes/Pref_System.php b/classes/Pref_System.php
index 7946dc293..1839c4a51 100644
--- a/classes/Pref_System.php
+++ b/classes/Pref_System.php
@@ -209,7 +209,7 @@ class Pref_System extends Handler_Administrative {
 							evt.preventDefault();
 							if (this.validate()) {
 								xhr.json("backend.php", this.getValues(), (reply) => {
-									const msg = App.byId("mail-test-result");
+									const msg = document.getElementById("mail-test-result");
 
 									if (reply.rc) {
 										msg.innerHTML = __("Mail sent.");
diff --git a/js/App.js b/js/App.js
index e82e45d0c..5befe1fe8 100644
--- a/js/App.js
+++ b/js/App.js
@@ -140,15 +140,6 @@ const App = {
          }
       }
    },
-   byId: function(id) {
-      return document.getElementById(id);
-   },
-   find: function(query) {
-      return document.querySelector(query)
-   },
-   findAll: function(query) {
-      return document.querySelectorAll(query);
-   },
    dialogOf: function (elem) {
 
       // elem could be a Dijit widget
@@ -193,12 +184,12 @@ const App = {
 		}
 	},
 	setupNightModeDetection: function(callback) {
-		if (!App.byId("theme_css")) {
+		if (!document.getElementById("theme_css")) {
 			const mql = window.matchMedia('(prefers-color-scheme: dark)');
 
 			try {
 				mql.addEventListener("change", () => {
-					this.nightModeChanged(mql.matches, App.byId("theme_auto_css"));
+					this.nightModeChanged(mql.matches, document.getElementById("theme_auto_css"));
 				});
 			} catch {
 				console.warn("exception while trying to set MQL event listener");
@@ -210,7 +201,7 @@ const App = {
 
 			if (callback) {
 						link.onload = function() {
-							document.querySelector("body").removeClassName("css_loading");
+							document.body.classList.remove('css_loading');
 							callback();
 						};
 
@@ -221,9 +212,9 @@ const App = {
 
 			this.nightModeChanged(mql.matches, link);
 
-			document.querySelector("head").appendChild(link);
+			document.head.appendChild(link);
 		} else {
-			document.querySelector("body").removeClassName("css_loading");
+			document.body.classList.remove('css_loading');
 
 			if (callback) callback();
 		}
@@ -298,7 +289,7 @@ const App = {
 			dijit.byId("loading_bar").update({progress: this._loading_progress});
 
 		if (this._loading_progress >= 90) {
-			App.byId("overlay").hide();
+			document.getElementById("overlay").hide();
 		}
 
 	},
@@ -355,7 +346,7 @@ const App = {
 		if (!this.hotkey_prefix && hotkeys_map[0].indexOf(keychar) !== -1) {
 
 			this.hotkey_prefix = keychar;
-			App.byId("cmdline").innerHTML = keychar;
+			document.getElementById("cmdline").innerHTML = keychar;
 			Element.show("cmdline");
 
 			window.clearTimeout(this.hotkey_prefix_timeout);
@@ -408,7 +399,7 @@ const App = {
 			dojo.destroy(d.domNode);
 		});
 
-		App.findAll("#" + root + " *").forEach(function (i) {
+		document.querySelectorAll(`#${root} *`).forEach(function (i) {
 			i.parentNode ? i.parentNode.removeChild(i) : true;
 		});
    },
@@ -467,7 +458,7 @@ const App = {
    },
 	handleRpcJson: function(reply) {
 
-		const netalert = App.find(".net-alert");
+		const netalert = document.querySelector('.net-alert');
 
       if (reply) {
          const error = reply['error'];
@@ -524,7 +515,7 @@ const App = {
          }
 
          if (k === "recent_log_events") {
-            const alert = App.find(".log-alert");
+            const alert = document.querySelector('.log-alert');
 
             if (alert) {
                v > 0 ? alert.show() : alert.hide();
@@ -565,7 +556,7 @@ const App = {
                   break;
                case "cdm_auto_catchup":
                   {
-                     const headlines = App.byId("headlines-frame");
+                     const headlines = document.getElementById("headlines-frame");
 
                   // we could be in preferences
                      if (headlines)
@@ -876,7 +867,7 @@ const App = {
          .then((reply) => {
             console.log('update reply', reply);
 
-            const icon = App.byId("updates-available");
+            const icon = document.getElementById("updates-available");
 
             if (reply.changeset.id || reply.plugins.length > 0) {
                icon.show();
@@ -936,7 +927,7 @@ const App = {
 		this._widescreen_mode = wide;
 
       const article_id = Article.getActive();
-      const headlines_frame = App.byId("headlines-frame");
+      const headlines_frame = document.getElementById("headlines-frame");
       const content_insert = dijit.byId("content-insert");
 
       // TODO: setStyle stuff should probably be handled by CSS
@@ -1238,15 +1229,11 @@ const App = {
          this.hotkey_actions["goto_prefs"] = () => {
             App.openPreferences();
          };
-         this.hotkey_actions["select_article_cursor"] = () => {
-            const id = Article.getUnderPointer();
-            if (id) {
-               const row = App.byId(`RROW-${id}`);
-
-               if (row)
-                  row.toggleClassName("Selected");
-            }
-         };
+			this.hotkey_actions['select_article_cursor'] = () => {
+				const id = Article.getUnderPointer();
+				if (id)
+					document.getElementById(`RROW-${id}`)?.classList.toggle('Selected');
+			};
          this.hotkey_actions["create_label"] = () => {
             CommonDialogs.addLabel();
          };
diff --git a/js/Article.js b/js/Article.js
index 67de59aea..b132bb4be 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -36,7 +36,7 @@ const Article = {
 
 			if (!isNaN(parseInt(score))) {
 				ids.forEach((id) => {
-					const row = App.byId(`RROW-${id}`);
+					const row = document.getElementById(`RROW-${id}`);
 
 					if (row) {
 						row.setAttribute("data-score", score);
@@ -46,13 +46,8 @@ const Article = {
 						pic.innerHTML = Article.getScorePic(score);
 						pic.setAttribute("title", score);
 
-						["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
-							.forEach(function(scl) {
-								if (row.hasClassName(scl))
-									row.removeClassName(scl);
-							});
-
-						row.addClassName(Article.getScoreClass(score));
+						row.classList.remove('score-low', 'score-high', 'score-half-low', 'score-half-high', 'score-neutral');
+						row.classList.add(Article.getScoreClass(score));
 					}
 				});
 			}
@@ -76,13 +71,8 @@ const Article = {
 				pic.innerHTML = Article.getScorePic(score);
 				pic.setAttribute("title", score);
 
-				["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
-					.forEach(function(scl) {
-						if (row.hasClassName(scl))
-							row.removeClassName(scl);
-					});
-
-				row.addClassName(Article.getScoreClass(score));
+				row.classList.remove('score-low', 'score-high', 'score-half-low', 'score-half-high', 'score-neutral');
+				row.classList.add(Article.getScoreClass(score));
 			}
 		}
 	},
@@ -93,20 +83,20 @@ const Article = {
 		w.location = url;
 	},
 	cdmToggleGridSpan: function(id) {
-		const row = App.byId(`RROW-${id}`);
+		const row = document.getElementById(`RROW-${id}`);
 
 		if (row) {
-			row.toggleClassName('grid-span-row');
+			row.classList.toggle('grid-span-row');
 
 			this.setActive(id);
 			this.cdmMoveToId(id);
 		}
 	},
 	cdmUnsetActive: function (event) {
-		const row = App.byId(`RROW-${Article.getActive()}`);
+		const row = document.getElementById(`RROW-${Article.getActive()}`);
 
 		if (row) {
-			row.removeClassName("active");
+			row.classList.remove('active');
 
 			if (event)
 				event.stopPropagation();
@@ -263,7 +253,7 @@ const Article = {
 				container.innerHTML += " ";
 
 			// in expandable mode, save content for later, so that we can pack unfocused rows back
-			if (App.isCombinedMode() && App.byId("main").hasClassName("expandable"))
+			if (App.isCombinedMode() && document.getElementById('main').classList.contains('expandable'))
 				row.setAttribute("data-content-original", row.getAttribute("data-content"));
 
 			row.setAttribute("data-is-packed", "0");
@@ -330,7 +320,7 @@ const Article = {
 		return false;
 	},
 	autocompleteInject: function(elem, targetId) {
-		const target = App.byId(targetId);
+		const target = document.getElementById(targetId);
 
 		if (!target)
 			return;
@@ -393,15 +383,15 @@ const Article = {
 
 			xhr.json("backend.php", {op: "Article", method: "printArticleTags", id: id}, (reply) => {
 
-				dijit.getEnclosingWidget(App.byId("tags_str"))
+				dijit.getEnclosingWidget(document.getElementById("tags_str"))
 					.attr('value', reply.tags.join(", "))
 					.attr('disabled', false);
 
-				App.byId('tags_str').onkeyup = (e) => {
+				document.getElementById('tags_str').onkeyup = (e) => {
 					const last_tag = e.target.value.split(',').pop().trim();
 
 					xhr.json("backend.php", {op: 'Article', method: 'completeTags', search: last_tag}, (data) => {
-						App.byId("tags_choices").innerHTML = `${data.map((tag) =>
+						document.getElementById("tags_choices").innerHTML = `${data.map((tag) =>
 							`<a href="#" onclick="Article.autocompleteInject(this, 'tags_str')">${tag}</a>` )
 								.join(', ')}`
 					});
@@ -415,8 +405,8 @@ const Article = {
 	cdmMoveToId: function (id, params = {}) {
 		const force_to_top = params.force_to_top || false;
 
-		const ctr = App.byId("headlines-frame");
-		const row = App.byId(`RROW-${id}`);
+		const ctr = document.getElementById("headlines-frame");
+		const row = document.getElementById(`RROW-${id}`);
 
 		if (ctr && row) {
 			const grid_gap = parseInt(window.getComputedStyle(ctr).gridGap) || 0;
@@ -430,20 +420,20 @@ const Article = {
 		if (id !== Article.getActive()) {
 			console.log("setActive", id, "was", Article.getActive());
 
-			App.findAll("div[id*=RROW][class*=active]").forEach((row) => {
-				row.removeClassName("active");
+			document.querySelectorAll('div[id*=RROW][class*=active]').forEach((row) => {
+				row.classList.remove('active');
 
 				if (App.isCombinedMode() && !App.getInitParam("cdm_expanded"))
 					Article.pack(row);
 			});
 
-			const row = App.byId(`RROW-${id}`);
+			const row = document.getElementById(`RROW-${id}`);
 
 			if (row) {
 				Article.unpack(row);
 
-				row.removeClassName("Unread");
-				row.addClassName("active");
+				row.classList.remove('Unread');
+				row.classList.add('active');
 
 				PluginHost.run(PluginHost.HOOK_ARTICLE_SET_ACTIVE, parseInt(row.getAttribute('data-article-id')));
 			}
@@ -454,10 +444,10 @@ const Article = {
 		return row ? parseInt(row.getAttribute('data-article-id')) : 0;
 	},
 	scrollByPages: function (page_offset) {
-		App.Scrollable.scrollByPages(App.byId("content-insert"), page_offset);
+		App.Scrollable.scrollByPages(document.getElementById("content-insert"), page_offset);
 	},
 	scroll: function (offset) {
-		App.Scrollable.scroll(App.byId("content-insert"), offset);
+		App.Scrollable.scroll(document.getElementById("content-insert"), offset);
 	},
 	mouseIn: function (id) {
 		this.post_under_pointer = id;
diff --git a/js/CommonDialogs.js b/js/CommonDialogs.js
index 16c1f5f46..bf70902b7 100644
--- a/js/CommonDialogs.js
+++ b/js/CommonDialogs.js
@@ -116,7 +116,7 @@ const	CommonDialogs = {
 								</form>
 							`,
 							show_error: function (msg, additional_info) {
-								const elem = App.byId("fadd_error_message");
+								const elem = document.getElementById("fadd_error_message");
 
 								elem.innerHTML = `${msg}${additional_info ? `<br><br><h4>${__('Additional information')}</h4>${additional_info}` : ''}`;
 
diff --git a/js/CommonFilters.js b/js/CommonFilters.js
index 54df70266..a7f84ab09 100644
--- a/js/CommonFilters.js
+++ b/js/CommonFilters.js
@@ -109,7 +109,7 @@ const	Filters = {
 				xhr.post("backend.php", {op: "Pref_Filters", method: "printrulename", rule: rule}, (reply) => {
 					try {
 						const li = document.createElement('li');
-						li.addClassName("rule");
+						li.classList.add('rule');
 
 						li.innerHTML = `${App.FormFields.checkbox_tag("", false, "", {onclick: 'Lists.onRowChecked(this)'})}
 								<span class="name" onclick='App.dialogOf(this).onRuleClicked(this)'>${reply}</span>
@@ -141,7 +141,7 @@ const	Filters = {
 				xhr.post("backend.php", { op: "Pref_Filters", method: "printactionname", action: action }, (reply) => {
 					try {
 						const li = document.createElement('li');
-						li.addClassName("action");
+						li.classList.add('action');
 
 						li.innerHTML = `${App.FormFields.checkbox_tag("", false, "", {onclick: 'Lists.onRowChecked(this)'})}
 								<span class="name" onclick='App.dialogOf(this).onActionClicked(this)'>${reply}</span>
@@ -166,7 +166,7 @@ const	Filters = {
 					title: ruleStr ? __("Edit rule") : __("Add rule"),
 					execute: function () {
 						if (this.validate()) {
-							dialog.insertRule(App.byId("filterDlg_Matches"), replaceNode);
+							dialog.insertRule(document.getElementById("filterDlg_Matches"), replaceNode);
 							this.hide();
 						}
 					},
@@ -262,7 +262,7 @@ const	Filters = {
 					},
 					execute: function () {
 						if (this.validate()) {
-							dialog.insertAction(App.byId("filterDlg_Actions"), replaceNode);
+							dialog.insertAction(document.getElementById("filterDlg_Actions"), replaceNode);
 							this.hide();
 						}
 					},
@@ -374,14 +374,10 @@ const	Filters = {
 				this.editRule();
 			},
 			deleteAction: function () {
-				App.findAll("#filterDlg_Actions li[class*=Selected]").forEach(function (e) {
-					e.parentNode.removeChild(e)
-				});
+				document.querySelectorAll('#filterDlg_Actions li[class*=Selected]').forEach(e => e.parentNode.removeChild(e));
 			},
 			deleteRule: function () {
-				App.findAll("#filterDlg_Matches li[class*=Selected]").forEach(function (e) {
-					e.parentNode.removeChild(e)
-				});
+				document.querySelectorAll('#filterDlg_Matches li[class*=Selected]').forEach(e => e.parentNode.removeChild(e));
 			},
 			execute: function () {
 				if (this.validate()) {
diff --git a/js/FeedTree.js b/js/FeedTree.js
index 01755e7b4..06ebceff2 100755
--- a/js/FeedTree.js
+++ b/js/FeedTree.js
@@ -309,7 +309,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 
 				// focus headlines to route key events there
 				setTimeout(() => {
-					App.byId("headlines-frame").focus();
+					document.getElementById("headlines-frame").focus();
 
 					if (treeNode) {
 						const node = treeNode.rowNode;
@@ -318,7 +318,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 						if (node && tree) {
 							// scroll tree to selection if needed
 							if (node.offsetTop < tree.scrollTop || node.offsetTop > tree.scrollTop + tree.clientHeight) {
-								App.byId("feedTree").scrollTop = node.offsetTop;
+								document.getElementById("feedTree").scrollTop = node.offsetTop;
 							}
 						}
 					}
@@ -360,11 +360,11 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 				treeNode = treeNode[0];
 
 				if (show) {
-					treeNode.loadingNode.addClassName("visible");
+					treeNode.loadingNode.classList.add('visible');
 					treeNode.loadingNode.setAttribute("src",
 						is_cat ? App.getInitParam("icon_three_dots") : App.getInitParam("icon_oval"));
 				} else {
-					treeNode.loadingNode.removeClassName("visible");
+					treeNode.loadingNode.classList.remove('visible');
 					treeNode.loadingNode.setAttribute("src", App.getInitParam("icon_blank"))
 				}
 
diff --git a/js/Feeds.js b/js/Feeds.js
index 790b64dd4..af7a6cc54 100644
--- a/js/Feeds.js
+++ b/js/Feeds.js
@@ -143,8 +143,8 @@ const	Feeds = {
 	},
    onViewModeChanged: function() {
 		// TODO: is this still needed?
-      App.find("body").setAttribute("view-mode",
-			dijit.byId("toolbar-main").getValues().view_mode);
+      document.body.setAttribute('view-mode',
+			dijit.byId('toolbar-main').getValues().view_mode);
 
       return Feeds.reloadCurrent('');
    },
@@ -227,7 +227,7 @@ const	Feeds = {
 				dojo.disconnect(tmph);
 			});
 
-			App.byId("feeds-holder").appendChild(tree.domNode);
+			document.getElementById("feeds-holder").appendChild(tree.domNode);
 
 			const tmph2 = dojo.connect(tree, 'onLoad', function () {
 				dojo.disconnect(tmph2);
@@ -247,13 +247,13 @@ const	Feeds = {
 		}
 	},
 	onHide: function() {
-		App.byId("feeds-holder_splitter").hide();
+		document.getElementById("feeds-holder_splitter").hide();
 
 		dijit.byId("main").resize();
 		Headlines.updateCurrentUnread();
 	},
 	onShow: function() {
-		App.byId("feeds-holder_splitter").show();
+		document.getElementById("feeds-holder_splitter").show();
 
 		dijit.byId("main").resize();
 		Headlines.updateCurrentUnread();
@@ -261,7 +261,7 @@ const	Feeds = {
 	init: function() {
 		console.log("in feedlist init");
 
-		this._feeds_holder_observer.observe(App.byId("feeds-holder"));
+		this._feeds_holder_observer.observe(document.getElementById("feeds-holder"));
 
 		App.setLoadingProgress(50);
 
@@ -350,7 +350,7 @@ const	Feeds = {
 		this._active_feed_id = id;
 		this._active_feed_is_cat = is_cat;
 
-		const container = App.byId("headlines-frame");
+		const container = document.getElementById("headlines-frame");
 
 		// TODO @deprecated: these two should be removed (replaced with data- attributes below)
 		container.setAttribute("feed-id", id);
@@ -383,8 +383,8 @@ const	Feeds = {
 		if (tree)
 			return tree.hideRead(hide, App.getInitParam("hide_read_shows_special"));*/
 
-		App.findAll("body")[0].setAttribute("hide-read-feeds", !!hide);
-		App.findAll("body")[0].setAttribute("hide-read-shows-special", !!App.getInitParam("hide_read_shows_special"));
+		document.body.setAttribute('hide-read-feeds', !!hide);
+		document.body.setAttribute('hide-read-shows-special', !!App.getInitParam('hide_read_shows_special'));
 	},
 	open: function(params) {
 		const feed = params.feed;
@@ -531,12 +531,8 @@ const	Feeds = {
 		const str = __("Mark all articles in %s as read?").replace("%s", title);
 
 		if (App.getInitParam("confirm_feed_catchup") !== 1 || confirm(str)) {
-
-			const rows = App.findAll("#headlines-frame > div[id*=RROW][class*=Unread][data-orig-feed-id='" + id + "']");
-
-			rows.forEach((row) => {
-				row.removeClassName("Unread");
-			})
+			document.querySelectorAll("#headlines-frame > div[id*=RROW][class*=Unread][data-orig-feed-id='" + id + "']")
+				.forEach(row => row.classList.remove('Unread'));
 		}
 	},
 	getUnread: function(feed, is_cat) {
diff --git a/js/Headlines.js b/js/Headlines.js
index 7ce1e63ba..b46ccaa5d 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -67,15 +67,15 @@ const Headlines = {
 					if (hl) {
 						const hl_old = {...{}, ...hl};
 
-						hl.unread = row.hasClassName("Unread");
-						hl.marked = row.hasClassName("marked");
-						hl.published = row.hasClassName("published");
+						hl.unread = row.classList.contains('Unread');
+						hl.marked = row.classList.contains('marked');
+						hl.published = row.classList.contains('published');
 
 						// not sent by backend
-						hl.selected = row.hasClassName("Selected");
-						hl.active = row.hasClassName("active");
+						hl.selected = row.classList.contains('Selected');
+						hl.active = row.classList.contains('active');
 
-						hl.score = row.getAttribute("data-score");
+						hl.score = row.getAttribute('data-score');
 
 						modified.push({id: hl.id, new: hl, old: hl_old, row: row});
 					}
@@ -138,7 +138,7 @@ const Headlines = {
 		ops.deselect.forEach((row) => {
 			const cb = dijit.getEnclosingWidget(row.querySelector(".rchk"));
 
-			if (cb && !row.hasClassName("active"))
+			if (cb && !row.classList.contains('active'))
 				cb.attr('checked', false);
 		});
 
@@ -152,7 +152,7 @@ const Headlines = {
 		ops.deactivate.forEach((row) => {
 			const cb = dijit.getEnclosingWidget(row.querySelector(".rchk"));
 
-			if (cb && !row.hasClassName("Selected"))
+			if (cb && !row.classList.contains('Selected'))
 				cb.attr('checked', false);
 		});
 
@@ -239,7 +239,7 @@ const Headlines = {
 
 					Headlines.select('none');
 
-					const scroll_position_A = App.byId(`RROW-${id}`).offsetTop - App.byId("headlines-frame").scrollTop;
+					const scroll_position_A = document.getElementById(`RROW-${id}`).offsetTop - document.getElementById("headlines-frame").scrollTop;
 
 					Article.setActive(id);
 
@@ -250,10 +250,10 @@ const Headlines = {
 
 						Headlines.toggleUnread(id, 0);
 					} else {
-						const scroll_position_B = App.byId(`RROW-${id}`).offsetTop - App.byId("headlines-frame").scrollTop;
+						const scroll_position_B = document.getElementById(`RROW-${id}`).offsetTop - document.getElementById("headlines-frame").scrollTop;
 
 						// this would only work if there's enough space
-						App.byId("headlines-frame").scrollTop -= scroll_position_A-scroll_position_B;
+						document.getElementById("headlines-frame").scrollTop -= scroll_position_A-scroll_position_B;
 
 						if (this.default_move_on_expand)
 							Article.cdmMoveToId(id);
@@ -280,7 +280,7 @@ const Headlines = {
 		return false;
 	},
 	initScrollHandler: function () {
-		App.byId("headlines-frame").onscroll = (event) => {
+		document.getElementById("headlines-frame").onscroll = (event) => {
 			clearTimeout(this._headlines_scroll_timeout);
 			this._headlines_scroll_timeout = window.setTimeout(function () {
 				//console.log('done scrolling', event);
@@ -290,8 +290,8 @@ const Headlines = {
 	},
 	loadMore: function () {
 		const view_mode = dijit.byId("toolbar-main").getValues().view_mode;
-		const unread_in_buffer = App.findAll("#headlines-frame > div[id*=RROW][class*=Unread]").length;
-		const num_all = App.findAll("#headlines-frame > div[id*=RROW]").length;
+		const unread_in_buffer = document.querySelectorAll('#headlines-frame > div[id*=RROW][class*=Unread]').length;
+		const num_all = document.querySelectorAll('#headlines-frame > div[id*=RROW]').length;
 		const num_unread = Feeds.getUnread(Feeds.getActive(), Feeds.activeIsCat());
 
 		// TODO implement marked & published
@@ -317,10 +317,10 @@ const Headlines = {
 		Feeds.open({feed: Feeds.getActive(), is_cat: Feeds.activeIsCat(), offset: offset, append: true});
 	},
 	isChildVisible: function (elem) {
-		return App.Scrollable.isChildVisible(elem, App.byId("headlines-frame"));
+		return App.Scrollable.isChildVisible(elem, document.getElementById("headlines-frame"));
 	},
 	firstVisible: function () {
-		const rows = App.findAll("#headlines-frame > div[id*=RROW]");
+		const rows = document.querySelectorAll('#headlines-frame > div[id*=RROW]');
 
 		for (let i = 0; i < rows.length; i++) {
 			const row = rows[i];
@@ -331,7 +331,7 @@ const Headlines = {
 		}
 	},
 	unpackVisible: function(container) {
-		const rows = App.findAll("#headlines-frame > div[id*=RROW][data-content].cdm");
+		const rows = document.querySelectorAll('#headlines-frame > div[id*=RROW][data-content].cdm');
 
 		for (let i = 0; i < rows.length; i++) {
 			if (App.Scrollable.isChildVisible(rows[i], container)) {
@@ -343,8 +343,8 @@ const Headlines = {
 	scrollHandler: function (/*event*/) {
 		try {
 			if (!Feeds.infscroll_disabled && !Feeds.infscroll_in_progress) {
-				const hsp = App.byId("headlines-spacer");
-				const container = App.byId("headlines-frame");
+				const hsp = document.getElementById("headlines-spacer");
+				const container = document.getElementById("headlines-frame");
 
 				if (hsp && hsp.previousSibling) {
 					const last_row = hsp.previousSibling;
@@ -361,7 +361,7 @@ const Headlines = {
 			}
 
 			if (App.isCombinedMode() && App.getInitParam("cdm_expanded")) {
-				const container = App.byId("headlines-frame")
+				const container = document.getElementById("headlines-frame")
 
 				/* don't do anything until there was some scrolling */
 				if (container.scrollTop > 0)
@@ -370,13 +370,13 @@ const Headlines = {
 
 			if (App.getInitParam("cdm_auto_catchup")) {
 
-				const rows = App.findAll("#headlines-frame > div[id*=RROW][class*=Unread]");
+				const rows = document.querySelectorAll('#headlines-frame > div[id*=RROW][class*=Unread]');
 
 				for (let i = 0; i < rows.length; i++) {
 					const row = rows[i];
 
-					if (App.byId("headlines-frame").scrollTop > (row.offsetTop + row.offsetHeight / 2)) {
-						row.removeClassName("Unread");
+					if (document.getElementById("headlines-frame").scrollTop > (row.offsetTop + row.offsetHeight / 2)) {
+						row.classList.remove('Unread');
 					} else {
 						break;
 					}
@@ -393,29 +393,27 @@ const Headlines = {
 		return this.headlines[id];
 	},
 	setCommonClasses: function (headlines_count) {
-		const container = App.byId("headlines-frame");
+		const container = document.getElementById("headlines-frame");
 
-		container.removeClassName("cdm");
-		container.removeClassName("normal");
+		container.classList.remove('cdm', 'normal');
 
-		container.addClassName(App.isCombinedMode() ? "cdm" : "normal");
+		container.classList.add(App.isCombinedMode() ? 'cdm' : 'normal');
 		container.setAttribute("data-enable-grid", App.getInitParam("cdm_enable_grid") ? "true" : "false");
 		container.setAttribute("data-headlines-count", parseInt(headlines_count));
 		container.setAttribute("data-is-cdm", App.isCombinedMode() ? "true" : "false");
 		container.setAttribute("data-is-cdm-expanded", App.getInitParam("cdm_expanded"));
 
 		// for floating title because it's placed outside of headlines-frame
-		App.byId("main").removeClassName("expandable");
-		App.byId("main").removeClassName("expanded");
+		document.getElementById('main').classList.remove('expandable', 'expanded');
 
 		if (App.isCombinedMode())
-			App.byId("main").addClassName(App.getInitParam("cdm_expanded") ? "expanded" : "expandable");
+			document.getElementById('main').classList.add(App.getInitParam('cdm_expanded') ? 'expanded' : 'expandable');
 	},
 	renderAgain: function () {
 		// TODO: wrap headline elements into a knockoutjs model to prevent all this stuff
 		Headlines.setCommonClasses(this.headlines.filter((h) => h.id).length);
 
-		App.findAll("#headlines-frame > div[id*=RROW]").forEach((row) => {
+		document.querySelectorAll('#headlines-frame > div[id*=RROW]').forEach((row) => {
 			const id = parseInt(row.getAttribute('data-article-id'));
 			const hl = this.headlines[id];
 
@@ -425,7 +423,7 @@ const Headlines = {
 				row.parentNode.replaceChild(new_row, row);
 
 				if (hl.active) {
-					new_row.addClassName("active");
+					new_row.classList.add('active');
 					Article.unpack(new_row);
 
 					if (App.isCombinedMode())
@@ -438,16 +436,16 @@ const Headlines = {
 			}
 		});
 
-		App.findAll(".cdm .header-sticky-guard").forEach((e) => {
+		document.querySelectorAll('.cdm .header-sticky-guard').forEach((e) => {
 			this.sticky_header_observer.observe(e)
 		});
 
-		App.findAll(".cdm .content").forEach((e) => {
+		document.querySelectorAll('.cdm .content').forEach((e) => {
 			this.sticky_content_observer.observe(e)
 		});
 
 		if (App.getInitParam("cdm_expanded"))
-			App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => {
+			document.querySelectorAll('#headlines-frame > div[id*=RROW].cdm').forEach((e) => {
 				this.unpack_observer.observe(e)
 			});
 
@@ -478,7 +476,7 @@ const Headlines = {
 			const tmp = document.createElement("div");
 			tmp.innerHTML = vgrhdr;
 
-			App.byId("headlines-frame").appendChild(tmp.firstChild);
+			document.getElementById("headlines-frame").appendChild(tmp.firstChild);
 
 			this.vgroup_last_feed = hl.feed_id;
 		}
@@ -611,11 +609,11 @@ const Headlines = {
 		return tmp.firstChild;
 	},
 	updateCurrentUnread: function () {
-		if (App.byId("feed_current_unread")) {
+		if (document.getElementById("feed_current_unread")) {
 			const feed_unread = Feeds.getUnread(Feeds.getActive(), Feeds.activeIsCat());
 
 			if (feed_unread > 0 && !Element.visible("feeds-holder")) {
-				App.byId("feed_current_unread").innerText = feed_unread;
+				document.getElementById("feed_current_unread").innerText = feed_unread;
 				Element.show("feed_current_unread");
 			} else {
 				Element.hide("feed_current_unread");
@@ -764,18 +762,19 @@ const Headlines = {
 				Headlines.setCommonClasses(headlines_count);
 
 				/** TODO: remove @deprecated */
-				App.byId("headlines-frame").setAttribute("is-vfeed",
+				document.getElementById("headlines-frame").setAttribute("is-vfeed",
 					reply['headlines']['is_vfeed'] ? 1 : 0);
 
-				App.byId("headlines-frame").setAttribute("data-is-vfeed",
+				document.getElementById("headlines-frame").setAttribute("data-is-vfeed",
 					reply['headlines']['is_vfeed'] ? "true" : "false");
 
 				Article.setActive(0);
 
 				try {
-					App.byId("headlines-frame").removeClassName("smooth-scroll");
-					App.byId("headlines-frame").scrollTop = 0;
-					App.byId("headlines-frame").addClassName("smooth-scroll");
+					const headlines_frame = document.getElementById('headlines-frame');
+					headlines_frame.classList.remove('smooth-scroll');
+					headlines_frame.scrollTop = 0;
+					headlines_frame.classList.add('smooth-scroll');
 				} catch (e) {
 					console.warn(e);
 				}
@@ -783,27 +782,27 @@ const Headlines = {
 				this.headlines = [];
 				this.vgroup_last_feed = undefined;
 
-				/*dojo.html.set(App.byId("toolbar-headlines"),
+				/*dojo.html.set(document.getElementById("toolbar-headlines"),
 					reply['headlines']['toolbar'],
 					{parseContent: true});*/
 
 				Headlines.renderToolbar(reply['headlines']);
 
 				if (typeof reply['headlines']['content'] === 'string') {
-					App.byId("headlines-frame").innerHTML = reply['headlines']['content'];
+					document.getElementById("headlines-frame").innerHTML = reply['headlines']['content'];
 				} else {
-					App.byId("headlines-frame").innerHTML = '';
+					document.getElementById("headlines-frame").innerHTML = '';
 
 					for (let i = 0; i < reply['headlines']['content'].length; i++) {
 						const hl = reply['headlines']['content'][i];
 
-						App.byId("headlines-frame").appendChild(this.render(reply['headlines'], hl));
+						document.getElementById("headlines-frame").appendChild(this.render(reply['headlines'], hl));
 
 						this.headlines[parseInt(hl.id)] = hl;
 					}
 				}
 
-				let hsp = App.byId("headlines-spacer");
+				let hsp = document.getElementById("headlines-spacer");
 
 				if (!hsp) {
 					hsp = document.createElement("div");
@@ -823,7 +822,7 @@ const Headlines = {
 
 				/*
 				if (Feeds._search_query) {
-					App.byId("feed_title").innerHTML += "<span id='cancel_search'>" +
+					document.getElementById("feed_title").innerHTML += "<span id='cancel_search'>" +
 						" (<a href='#' onclick='Feeds.cancelSearch()'>" + __("Cancel search") + "</a>)" +
 						"</span>";
 				} */
@@ -833,7 +832,7 @@ const Headlines = {
 			} else if (headlines_count > 0 && feed_id === Feeds.getActive() && is_cat === Feeds.activeIsCat()) {
 				const c = dijit.byId("headlines-frame");
 
-				let hsp = App.byId("headlines-spacer");
+				let hsp = document.getElementById("headlines-spacer");
 
 				if (hsp)
 					c.domNode.removeChild(hsp);
@@ -841,13 +840,13 @@ const Headlines = {
 				let headlines_appended = 0;
 
 				if (typeof reply['headlines']['content'] === 'string') {
-					App.byId("headlines-frame").innerHTML = reply['headlines']['content'];
+					document.getElementById("headlines-frame").innerHTML = reply['headlines']['content'];
 				} else {
 					for (let i = 0; i < reply['headlines']['content'].length; i++) {
 						const hl = reply['headlines']['content'][i];
 
 						if (!this.headlines[parseInt(hl.id)]) {
-							App.byId("headlines-frame").appendChild(this.render(reply['headlines'], hl));
+							document.getElementById("headlines-frame").appendChild(this.render(reply['headlines'], hl));
 
 							this.headlines[parseInt(hl.id)] = hl;
 							++headlines_appended;
@@ -882,7 +881,7 @@ const Headlines = {
 
 				console.log("no headlines received, infscroll_disabled=", Feeds.infscroll_disabled, 'first_id_changed=', first_id_changed);
 
-				const hsp = App.byId("headlines-spacer");
+				const hsp = document.getElementById("headlines-spacer");
 
 				if (hsp) {
 					if (first_id_changed) {
@@ -895,16 +894,16 @@ const Headlines = {
 				}
 			}
 
-			App.findAll(".cdm .header-sticky-guard").forEach((e) => {
+			document.querySelectorAll('.cdm .header-sticky-guard').forEach((e) => {
 				this.sticky_header_observer.observe(e)
 			});
 
-			App.findAll(".cdm .content").forEach((e) => {
+			document.querySelectorAll('.cdm .content').forEach((e) => {
 				this.sticky_content_observer.observe(e)
 			});
 
-			if (App.getInitParam("cdm_expanded"))
-				App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => {
+			if (App.getInitParam('cdm_expanded'))
+				document.querySelectorAll('#headlines-frame > div[id*=RROW].cdm').forEach((e) => {
 					this.unpack_observer.observe(e)
 				});
 
@@ -950,18 +949,18 @@ const Headlines = {
 		}
 
 		ids.forEach((id) => {
-			const row = App.byId(`RROW-${id}`);
+			const row = document.getElementById(`RROW-${id}`);
 
 			if (row) {
 				switch (cmode) {
 					case 0:
-						row.removeClassName("Unread");
+						row.classList.remove('Unread');
 						break;
 					case 1:
-						row.addClassName("Unread");
+						row.classList.add('Unread');
 						break;
 					case 2:
-						row.toggleClassName("Unread");
+						row.classList.toggle('Unread');
 				}
 			}
 		});
@@ -982,26 +981,18 @@ const Headlines = {
 		ids = ids || Headlines.getSelected();
 
 		if (ids.length === 0) {
-			alert(__("No articles selected."));
+			alert(__('No articles selected.'));
 			return;
 		}
 
-		ids.forEach((id) => {
-			this.togglePub(id);
-		});
+		ids.forEach(id => this.togglePub(id));
 	},
 	toggleMark: function (id) {
-		const row = App.byId(`RROW-${id}`);
-
-		if (row)
-			row.toggleClassName("marked");
+		document.getElementById(`RROW-${id}`)?.classList.toggle('marked');
 
 	},
 	togglePub: function (id) {
-		const row = App.byId(`RROW-${id}`);
-
-		if (row)
-			row.toggleClassName("published");
+		document.getElementById(`RROW-${id}`)?.classList.toggle('published');
 	},
 	move: function (mode, params = {}) {
 		const no_expand = params.no_expand || false;
@@ -1012,7 +1003,7 @@ const Headlines = {
 		let next_id = false;
 		let current_id = Article.getActive();
 
-		if (!Headlines.isChildVisible(App.byId(`RROW-${current_id}`))) {
+		if (!Headlines.isChildVisible(document.getElementById(`RROW-${current_id}`))) {
 			console.log('active article is obscured, resetting to first visible...');
 			current_id = Headlines.firstVisible();
 			prev_id = current_id;
@@ -1051,15 +1042,15 @@ const Headlines = {
 				}
 			} else if (App.isCombinedMode()) {
 				// try to show hsp if no next article exists, in case there's useful information like first_id_changed etc
-				const row = App.byId(`RROW-${current_id}`);
-				const ctr = App.byId("headlines-frame");
+				const row = document.getElementById(`RROW-${current_id}`);
+				const ctr = document.getElementById("headlines-frame");
 
 				if (row) {
 					const next = row.nextSibling;
 
 					// hsp has half-screen height in auto catchup mode therefore we use its first child (normally A element)
 					if (next && Element.visible(next) && next.id === "headlines-spacer" && next.firstChild) {
-						const offset = App.byId("headlines-spacer").offsetTop - App.byId("headlines-frame").offsetHeight + next.firstChild.offsetHeight;
+						const offset = document.getElementById("headlines-spacer").offsetTop - document.getElementById("headlines-frame").offsetHeight + next.firstChild.offsetHeight;
 
 						// don't jump back either
 						if (ctr.scrollTop < offset)
@@ -1071,8 +1062,8 @@ const Headlines = {
 			if (prev_id || current_id) {
 				if (App.isCombinedMode()) {
 					window.requestAnimationFrame(() => {
-						const row = App.byId(`RROW-${current_id}`);
-						const ctr = App.byId("headlines-frame");
+						const row = document.getElementById(`RROW-${current_id}`);
+						const ctr = document.getElementById("headlines-frame");
 						const delta_px = Math.round(row.offsetTop) - Math.round(ctr.scrollTop);
 
 						console.log('moving back, delta_px', delta_px);
@@ -1093,7 +1084,7 @@ const Headlines = {
 	},
 	updateSelectedPrompt: function () {
 		const count = Headlines.getSelected().length;
-		const elem = App.byId("selected_prompt");
+		const elem = document.getElementById("selected_prompt");
 
 		if (elem) {
 			elem.innerHTML = ngettext("%d article selected",
@@ -1103,20 +1094,20 @@ const Headlines = {
 		}
 	},
 	toggleUnread: function (id, cmode) {
-		const row = App.byId(`RROW-${id}`);
+		const row = document.getElementById(`RROW-${id}`);
 
 		if (row) {
 			if (typeof cmode === "undefined") cmode = 2;
 
 			switch (cmode) {
 				case 0:
-					row.removeClassName("Unread");
+					row.classList.remove('Unread');
 					break;
 				case 1:
-					row.addClassName("Unread");
+					row.classList.add('Unread');
 					break;
 				case 2:
-					row.toggleClassName("Unread");
+					row.classList.toggle('Unread');
 					break;
 			}
 		}
@@ -1186,23 +1177,21 @@ const Headlines = {
 		});
 	},
 	getSelected: function () {
-		const rv = [];
+		const selected = Array.from(document.querySelectorAll('#headlines-frame > div[id*=RROW][class*=Selected]'),
+			child => parseInt(child.getAttribute('data-article-id')));
 
-		App.findAll("#headlines-frame > div[id*=RROW][class*=Selected]").forEach(
-			function (child) {
-				rv.push(parseInt(child.getAttribute('data-article-id')));
-			});
+		const active = Article.getActive();
 
 		// consider active article a honorary member of selected articles
-		if (Article.getActive())
-			rv.push(Article.getActive());
+		if (active)
+			selected.push(active);
 
-		return rv.uniq();
+		return [...new Set(selected)];
 	},
 	getLoaded: function () {
 		const rv = [];
 
-		const children = App.findAll("#headlines-frame > div[id*=RROW-]");
+		const children = document.querySelectorAll('#headlines-frame > div[id*=RROW-]');
 
 		children.forEach(function (child) {
 			if (Element.visible(child)) {
@@ -1216,22 +1205,22 @@ const Headlines = {
 		const row = elem.domNode.closest("div[id*=RROW]");
 
 		// do not allow unchecking active article checkbox
-		if (row.hasClassName("active")) {
+		if (row.classList.contains('active')) {
 			elem.attr("checked", 1);
 			return;
 		}
 
-		if (elem.attr("checked")) {
-			row.addClassName("Selected");
+		if (elem.attr('checked')) {
+			row.classList.add('Selected');
 		} else {
-			row.removeClassName("Selected");
+			row.classList.remove('Selected');
 		}
 	},
 	getRange: function (start, stop) {
 		if (start === stop)
 			return [start];
 
-		const rows = App.findAll("#headlines-frame > div[id*=RROW]");
+		const rows = document.querySelectorAll('#headlines-frame > div[id*=RROW]');
 		const results = [];
 		let collecting = false;
 
@@ -1278,17 +1267,17 @@ const Headlines = {
 				console.warn("select: unknown mode", mode);
 		}
 
-		App.findAll(query).forEach((row) => {
+		document.querySelectorAll(query).forEach((row) => {
 
 			switch (mode) {
-				case "none":
-					row.removeClassName("Selected");
+				case 'none':
+					row.classList.remove('Selected');
 					break;
-				case "invert":
-					row.toggleClassName("Selected");
+				case 'invert':
+					row.classList.toggle('Selected');
 					break;
 				default:
-					row.addClassName("Selected");
+					row.classList.add('Selected');
 			}
 		});
 	},
@@ -1329,9 +1318,9 @@ const Headlines = {
 		if (!below) {
 			for (let i = 0; i < visible_ids.length; i++) {
 				if (visible_ids[i] !== id) {
-					const e = App.byId(`RROW-${visible_ids[i]}`);
+					const e = document.getElementById(`RROW-${visible_ids[i]}`);
 
-					if (e && e.hasClassName("Unread")) {
+					if (e && e.classList.contains('Unread')) {
 						ids_to_mark.push(visible_ids[i]);
 					}
 				} else {
@@ -1341,9 +1330,9 @@ const Headlines = {
 		} else {
 			for (let i = visible_ids.length - 1; i >= 0; i--) {
 				if (visible_ids[i] !== id) {
-					const e = App.byId(`RROW-${visible_ids[i]}`);
+					const e = document.getElementById(`RROW-${visible_ids[i]}`);
 
-					if (e && e.hasClassName("Unread")) {
+					if (e && e.classList.contains('Unread')) {
 						ids_to_mark.push(visible_ids[i]);
 					}
 				} else {
@@ -1360,8 +1349,8 @@ const Headlines = {
 			if (App.getInitParam("confirm_feed_catchup") !== 1 || confirm(msg)) {
 
 				for (let i = 0; i < ids_to_mark.length; i++) {
-					const e = App.byId(`RROW-${ids_to_mark[i]}`);
-					e.removeClassName("Unread");
+					const e = document.getElementById(`RROW-${ids_to_mark[i]}`);
+					e.classList.remove('Unread');
 				}
 			}
 		}
@@ -1372,7 +1361,7 @@ const Headlines = {
 				this.headlines[data.id].tags = data.tags;
 			}
 
-			App.findAll(`span[data-tags-for="${data.id}"`).forEach((ctr) => {
+			document.querySelectorAll(`span[data-tags-for="${data.id}"`).forEach((ctr) => {
 				ctr.innerHTML = Article.renderTags(data.id, data.tags);
 			});
 		}
@@ -1385,15 +1374,15 @@ const Headlines = {
 					this.headlines[row.id].labels = row.labels;
 				}
 
-				App.findAll(`span[data-labels-for="${row.id}"]`).forEach((ctr) => {
+				document.querySelectorAll(`span[data-labels-for="${row.id}"]`).forEach((ctr) => {
 					ctr.innerHTML = Article.renderLabels(row.id, row.labels);
 				});
 			});
 		}
 	},
 	scrollToArticleId: function (id) {
-		const container = App.byId("headlines-frame");
-		const row = App.byId(`RROW-${id}`);
+		const container = document.getElementById("headlines-frame");
+		const row = document.getElementById(`RROW-${id}`);
 
 		if (!container || !row) return;
 
@@ -1538,10 +1527,10 @@ const Headlines = {
 		}
 	},
 	scrollByPages: function (page_offset) {
-		App.Scrollable.scrollByPages(App.byId("headlines-frame"), page_offset);
+		App.Scrollable.scrollByPages(document.getElementById("headlines-frame"), page_offset);
 	},
 	scroll: function (offset) {
-		App.Scrollable.scroll(App.byId("headlines-frame"), offset);
+		App.Scrollable.scroll(document.getElementById("headlines-frame"), offset);
 	},
 	initHeadlinesMenu: function () {
 		if (!dijit.byId("headlinesMenu")) {
diff --git a/js/PrefFeedTree.js b/js/PrefFeedTree.js
index 4e9cb58a5..6c0329c61 100644
--- a/js/PrefFeedTree.js
+++ b/js/PrefFeedTree.js
@@ -144,7 +144,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 			return (!item || this.model.store.getValue(item, 'type') === 'category') ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "feed-icon";
 		},
 		reload: function() {
-			const searchElem = App.byId("feed_search");
+			const searchElem = document.getElementById("feed_search");
 			const search = (searchElem) ? searchElem.value : "";
 
 			xhr.post("backend.php", { op: "Pref_Feeds", search: search }, (reply) => {
@@ -337,13 +337,9 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 							target.attr('disabled', !checkbox.attr('checked'));
 							console.log(target, target.attr('type'));
 
-							if (target.attr('type') === "checkbox") {
-								const label = checkbox.domNode.closest("label");
-
-								if (checkbox.attr('checked'))
-									label.removeClassName('text-muted');
-								else
-									label.addClassName('text-muted');
+							if (target.attr('type') === 'checkbox') {
+								const label = checkbox.domNode.closest('label');
+								label.classList.toggle('text-muted', !checkbox.attr('checked'));
 							}
 						},
 						execute: function () {
diff --git a/js/PrefFilterTree.js b/js/PrefFilterTree.js
index 4b077259a..cf5d975f4 100644
--- a/js/PrefFilterTree.js
+++ b/js/PrefFilterTree.js
@@ -1,4 +1,4 @@
-/* global __, define, lib, xhr, App, Notify, Filters */
+/* global __, define, lib, xhr, Notify, Filters */
 
 define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], function (declare, domConstruct) {
 
@@ -101,7 +101,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			return rv;
 		},
 		reload: function() {
-			const user_search = App.byId("filter_search");
+			const user_search = document.getElementById("filter_search");
 			let search = "";
 			if (user_search) { search = user_search.value; }
 
@@ -111,7 +111,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			});
 		},
 		hideOrShowFilterRules(hide) {
-			App.findAll("body")[0].setAttribute("hide-filter-rules", !!hide);
+			document.body.setAttribute('hide-filter-rules', !!hide);
 		},
 		toggleRules: function() {
 			const hide = !parseInt(localStorage.getItem("ttrss:hide-filter-rules"));
diff --git a/js/PrefHelpers.js b/js/PrefHelpers.js
index cf3f03bf2..0d8702bae 100644
--- a/js/PrefHelpers.js
+++ b/js/PrefHelpers.js
@@ -8,7 +8,7 @@ const	Helpers = {
 			return Tables.getSelected("app-password-list");
 		},
 		updateContent: function(data) {
-			App.byId("app_passwords_holder").innerHTML = data;
+			document.getElementById("app_passwords_holder").innerHTML = data;
 			dojo.parser.parse("app_passwords_holder");
 		},
 		removeSelected: function() {
@@ -264,7 +264,7 @@ const	Helpers = {
 				apply: function() {
 					xhr.post("backend.php", this.attr('value'), () => {
 						Element.show("css_edit_apply_msg");
-						App.byId("user_css_style").innerText = this.attr('value');
+						document.getElementById("user_css_style").innerText = this.attr('value');
 					});
 				},
 				execute: function () {
@@ -728,7 +728,7 @@ const	Helpers = {
 										dialog.plugins_to_update.push(p.plugin);
 
 										const update_button = dijit.getEnclosingWidget(
-											App.find(`*[data-update-btn-for-plugin="${p.plugin}"]`));
+											document.querySelector(`*[data-update-btn-for-plugin="${p.plugin}"]`));
 
 										if (update_button)
 											update_button.domNode.show();
@@ -784,7 +784,7 @@ const	Helpers = {
 	},
 	OPML: {
 		import: function() {
-			const opml_file = App.byId("opml_file");
+			const opml_file = document.getElementById("opml_file");
 
 			if (opml_file.value.length === 0) {
 				alert(__("Please choose an OPML file first."));
@@ -826,7 +826,7 @@ const	Helpers = {
 					dialog.show();
 				};
 
-				xhr.send(new FormData(App.byId("opml_import_form")));
+				xhr.send(new FormData(document.getElementById("opml_import_form")));
 
 				return false;
 			}
diff --git a/js/PrefLabelTree.js b/js/PrefLabelTree.js
index a4540deec..f5d71020f 100644
--- a/js/PrefLabelTree.js
+++ b/js/PrefLabelTree.js
@@ -82,7 +82,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 							color = bg;
 						}
 
-						const e = App.byId(`icon-label-${id}`);
+						const e = document.getElementById(`icon-label-${id}`);
 
 						if (e) {
 							if (bg) e.style.color = bg;
diff --git a/js/PrefUsers.js b/js/PrefUsers.js
index 73e48b52f..aa6907ded 100644
--- a/js/PrefUsers.js
+++ b/js/PrefUsers.js
@@ -5,7 +5,7 @@
 const	Users = {
 	reload: function(sort) {
 		return new Promise((resolve, reject) => {
-			const user_search = App.byId("user_search");
+			const user_search = document.getElementById("user_search");
 			const search = user_search ? user_search.value : "";
 
 			xhr.post("backend.php", { op: "Pref_Users", sort: sort, search: search }, (reply) => {
diff --git a/js/common.js b/js/common.js
index 48a42b95a..0d70332aa 100755
--- a/js/common.js
+++ b/js/common.js
@@ -16,18 +16,6 @@ function ngettext(msg1, msg2, n) {
 	return __((parseInt(n) > 1) ? msg2 : msg1);
 }
 
-/* exported $ */
-function $(id) {
-	console.warn("FIXME: please use App.byId() or document.getElementById() instead of $():", id);
-	return document.getElementById(id);
-}
-
-/* exported $$ */
-function $$(query) {
-	console.warn("FIXME: please use App.findAll() or document.querySelectorAll() instead of $$():", query);
-	return document.querySelectorAll(query);
-}
-
 // polyfill for safari https://raw.githubusercontent.com/pladaria/requestidlecallback-polyfill/master/index.js
 window.requestIdleCallback =
 	window.requestIdleCallback ||
@@ -48,45 +36,20 @@ window.cancelIdleCallback =
 			clearTimeout(id);
 		};
 
-Element.prototype.hasClassName = function(className) {
-	return this.classList.contains(className);
-};
-
-Element.prototype.addClassName = function(className) {
-	return this.classList.add(className);
-};
-
-Element.prototype.removeClassName = function(className) {
-	return this.classList.remove(className);
-};
-
-Element.prototype.toggleClassName = function(className) {
-	if (this.hasClassName(className))
-		return this.removeClassName(className);
-	else
-		return this.addClassName(className);
-};
-
-
 Element.prototype.setStyle = function(args) {
-	Object.keys(args).forEach((k) => {
-		this.style[k] = args[k];
-	});
+  Object.assign(this.style, args);
 };
 
 Element.prototype.show = function() {
-	this.style.display = "";
+	this.style.display = '';
 };
 
 Element.prototype.hide = function() {
-	this.style.display = "none";
+	this.style.display = 'none';
 };
 
 Element.prototype.toggle = function() {
-	if (this.visible())
-		this.hide();
-	else
-		this.show();
+	this.visible() ? this.hide() : this.show();
 };
 
 // https://gist.github.com/alirezas/c4f9f43e9fe1abba9a4824dd6fc60a55
@@ -149,23 +112,6 @@ Element.toggle = function(elem) {
 	return elem.toggle();
 }
 
-Element.hasClassName = function (elem, className) {
-	if (typeof elem === "string")
-		elem = document.getElementById(elem);
-
-	return elem.hasClassName(className);
-}
-
-Array.prototype.remove = function(s) {
-	for (let i=0; i < this.length; i++) {
-		if (s === this[i]) this.splice(i, 1);
-	}
-};
-
-Array.prototype.uniq = function() {
-	return this.filter((v, i, a) => a.indexOf(v) === i);
-};
-
 /* exported xhr */
 const xhr = {
 	_ts: 0,
@@ -269,14 +215,10 @@ function xhrJson(url, params = {}, complete = undefined) {
 /* exported Lists */
 const Lists = {
 	onRowChecked: function(elem) {
-		const checked = elem.domNode ? elem.attr("checked") : elem.checked;
 		// account for dojo checkboxes
+		const checked = elem.domNode ? elem.attr('checked') : elem.checked;
 		elem = elem.domNode || elem;
-
-		const row = elem.closest("li");
-
-		if (row)
-			checked ? row.addClassName("Selected") : row.removeClassName("Selected");
+		elem.closest('li')?.classList.toggle('Selected', checked);
 	},
 	select: function(elem, selected) {
 		if (typeof elem === "string")
@@ -304,7 +246,7 @@ const Lists = {
 			elem = document.getElementById(elem);
 
 		elem.querySelectorAll("li").forEach((row) => {
-			if (row.hasClassName("Selected")) {
+			if (row.classList.contains('Selected')) {
 				const rowVal = row.getAttribute("data-row-value");
 
 				if (rowVal) {
@@ -327,14 +269,9 @@ const Lists = {
 const Tables = {
 	onRowChecked: function(elem) {
 		// account for dojo checkboxes
-		const checked = elem.domNode ? elem.attr("checked") : elem.checked;
+		const checked = elem.domNode ? elem.attr('checked') : elem.checked;
 		elem = elem.domNode || elem;
-
-		const row = elem.closest("tr");
-
-		if (row)
-			checked ? row.addClassName("Selected") : row.removeClassName("Selected");
-
+		elem.closest('tr')?.classList.toggle('Selected', checked);
 	},
 	select: function(elem, selected) {
 		if (typeof elem === "string")
@@ -362,7 +299,7 @@ const Tables = {
 			elem = document.getElementById(elem);
 
 		elem.querySelectorAll("tr").forEach((row) => {
-			if (row.hasClassName("Selected")) {
+			if (row.classList.contains('Selected')) {
 				const rowVal = row.getAttribute("data-row-value");
 
 				if (rowVal) {
@@ -421,12 +358,12 @@ const Notify = {
 		kind = kind || this.KIND_GENERIC;
 		keep = keep || false;
 
-		const notify = App.byId("notify");
+		const notify = document.getElementById("notify");
 
 		window.clearTimeout(this.timeout);
 
 		if (!msg) {
-			notify.removeClassName("visible");
+			notify.classList.remove('visible');
 			return;
 		}
 
@@ -439,19 +376,19 @@ const Notify = {
 
 		switch (kind) {
 			case this.KIND_INFO:
-				notify.addClassName("notify_info")
-				icon = "notifications";
+				notify.classList.add('notify_info')
+				icon = 'notifications';
 				break;
 			case this.KIND_ERROR:
-				notify.addClassName("notify_error");
-				icon = "error";
+				notify.classList.add('notify_error');
+				icon = 'error';
 				break;
 			case this.KIND_PROGRESS:
-				notify.addClassName("notify_progress");
-				icon = App.getInitParam("icon_oval")
+				notify.classList.add('notify_progress');
+				icon = App.getInitParam('icon_oval');
 				break;
 			default:
-				icon = "notifications";
+				icon = 'notifications';
 		}
 
 		if (icon)
@@ -464,11 +401,11 @@ const Notify = {
 			__("Click to close") + "\" onclick=\"Notify.close()\">close</i>";
 
 		notify.innerHTML = msgfmt;
-		notify.addClassName("visible");
+		notify.classList.add('visible');
 
 		if (!keep)
 			this.timeout = window.setTimeout(() => {
-				notify.removeClassName("visible");
+				notify.classList.remove('visible');
 			}, this.default_timeout);
 
 	},
diff --git a/js/utility.js b/js/utility.js
index 0a9b59454..0fb08435c 100644
--- a/js/utility.js
+++ b/js/utility.js
@@ -26,9 +26,9 @@ window.addEventListener("load", function() {
             link.id = "theme_auto_css";
 
             link.onload = function() {
-                document.querySelector("body").removeClassName("css_loading");
+                document.body.classList.remove('css_loading');
 
-                if (typeof UtilityApp !== "undefined")
+                if (typeof UtilityApp !== 'undefined')
                     UtilityApp.init();
             };
 
diff --git a/plugins/note/note.js b/plugins/note/note.js
index 00deb0543..98b639358 100644
--- a/plugins/note/note.js
+++ b/plugins/note/note.js
@@ -5,7 +5,7 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 
 		Plugins.Note = {
 			set_click_handler: function() {
-				App.findAll(".article-note[data-note-for]").forEach((note) => {
+				document.querySelectorAll('.article-note[data-note-for]').forEach((note) => {
 					note.onclick = function() {
 						Plugins.Note.edit(this.getAttribute('data-note-for'));
 					}
@@ -23,13 +23,9 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 								dialog.hide();
 
 								if (reply) {
-									App.findAll(`div[data-note-for="${reply.id}"]`).forEach((elem) => {
-										elem.querySelector(".body").innerHTML = reply.note;
-
-										if (reply.note)
-											elem.show();
-										else
-											elem.hide();
+									document.querySelectorAll(`div[data-note-for="${reply.id}"]`).forEach((elem) => {
+										elem.querySelector('.body').innerHTML = reply.note;
+										reply.note ? elem.show() : elem.hide();
 									});
 								}
 							});
diff --git a/plugins/share/share.js b/plugins/share/share.js
index f27e06678..0ae4b2031 100644
--- a/plugins/share/share.js
+++ b/plugins/share/share.js
@@ -23,10 +23,7 @@ Plugins.Share = {
 								target.href = target.href.replace(/&key=.*$/,
 									"&key=" + new_link);
 
-								const icon = document.querySelector(".share-icon-" + id);
-
-								if (icon)
-									icon.addClassName("is-shared");
+								document.querySelector('.share-icon-' + id)?.classList.add('is-shared');
 
 								Notify.close();
 
@@ -42,12 +39,7 @@ Plugins.Share = {
 				if (confirm(__("Remove sharing for this article?"))) {
 					xhr.post("backend.php", App.getPhArgs("share", "unshare", {id: id}), (reply) => {
 						Notify.info(reply);
-
-						const icon = document.querySelector(".share-icon-" + id);
-
-						if (icon)
-							icon.removeClassName("is-shared");
-
+						document.querySelector('.share-icon-' + id)?.classList.remove('is-shared');
 						dialog.hide();
 					});
 				}
@@ -61,11 +53,7 @@ Plugins.Share = {
 
 			xhr.post("backend.php", App.getPhArgs("share", "shareDialog", {id: id}), (reply) => {
 				dialog.attr('content', reply)
-
-				const icon = document.querySelector(".share-icon-" + id);
-
-				if (icon)
-					icon.addClassName("is-shared");
+				document.querySelector('.share-icon-' + id)?.classList.add('is-shared');
 			});
 		});
 
diff --git a/plugins/shorten_expanded/init.js b/plugins/shorten_expanded/init.js
index a89fe8e92..b541b750e 100644
--- a/plugins/shorten_expanded/init.js
+++ b/plugins/shorten_expanded/init.js
@@ -52,13 +52,12 @@ Plugins.Shorten_Expanded = {
 		this.observer.observe(row);
 	},
 	expand: function(id) {
-		const row = App.byId(id);
+		const row = document.getElementById(id);
 
 		if (row) {
-			const content = row.querySelector(".content-shrink-wrap");
-			const link = row.querySelector(".expand-prompt");
+			const link = row.querySelector('.expand-prompt');
 
-			if (content) content.removeClassName("content-shrink-wrap");
+			row.querySelector('.content-shrink-wrap')?.classList.remove('content-shrink-wrap');
 			if (link) Element.hide(link);
 		}