initial for RIP prototype/scriptaculous

15 files changed, 308 insertions, 222 deletions

diff --git a/js/App.js b/js/App.js
index 75cf73288..0a66987ed 100644
--- a/js/App.js
+++ b/js/App.js
@@ -109,6 +109,15 @@ 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
@@ -140,21 +149,20 @@ const App = {
 		}
 	},
 	setupNightModeDetection: function(callback) {
-		if (!$("theme_css")) {
+		if (!App.byId("theme_css")) {
 			const mql = window.matchMedia('(prefers-color-scheme: dark)');
 
 			try {
 				mql.addEventListener("change", () => {
-					this.nightModeChanged(mql.matches, $("theme_auto_css"));
+					this.nightModeChanged(mql.matches, App.byId("theme_auto_css"));
 				});
 			} catch (e) {
 				console.warn("exception while trying to set MQL event listener");
 			}
 
-			const link = new Element("link", {
-				rel: "stylesheet",
-				id: "theme_auto_css"
-			});
+			const link = document.createElement("link");
+         link.rel = "stylesheet";
+         link.id = "theme_auto_css";
 
 			if (callback) {
 						link.onload = function() {
@@ -176,7 +184,7 @@ const App = {
 			if (callback) callback();
 		}
 	},
-	enableCsrfSupport: function() {
+	/*enableCsrfSupport: function() {
 		const _this = this;
 
 		Ajax.Base.prototype.initialize = Ajax.Base.prototype.initialize.wrap(
@@ -196,7 +204,7 @@ const App = {
 				return callOriginal(options);
 			}
 		);
-   },
+   }, */
    postCurrentWindow: function(target, params) {
       const form = document.createElement("form");
 
@@ -245,8 +253,13 @@ const App = {
 		}
 
    },
-	urlParam: function(param) {
-		return String(window.location.href).parseQuery()[param];
+	urlParam: function(name) {
+		try {
+         const results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
+         return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
+      } catch (e) {
+         return 0;
+      }
 	},
 	next_seq: function() {
 		this._rpc_seq += 1;
@@ -262,7 +275,7 @@ const App = {
 			dijit.byId("loading_bar").update({progress: this._loading_progress});
 
 		if (this._loading_progress >= 90) {
-			$("overlay").hide();
+			App.byId("overlay").hide();
 		}
 
 	},
@@ -293,7 +306,7 @@ const App = {
 		if (!this.hotkey_prefix && hotkeys_map[0].indexOf(keychar) != -1) {
 
 			this.hotkey_prefix = keychar;
-			$("cmdline").innerHTML = keychar;
+			App.byId("cmdline").innerHTML = keychar;
 			Element.show("cmdline");
 
 			window.clearTimeout(this.hotkey_prefix_timeout);
@@ -342,11 +355,11 @@ const App = {
 	cleanupMemory: function(root) {
 		const dijits = dojo.query("[widgetid]", dijit.byId(root).domNode).map(dijit.byNode);
 
-		dijits.each(function (d) {
+		dijits.forEach(function (d) {
 			dojo.destroy(d.domNode);
 		});
 
-		$$("#" + root + " *").each(function (i) {
+		App.findAll("#" + root + " *").forEach(function (i) {
 			i.parentNode ? i.parentNode.removeChild(i) : true;
 		});
    },
@@ -364,9 +377,9 @@ const App = {
    },
    displayIfChecked: function(checkbox, elemId) {
       if (checkbox.checked) {
-         Effect.Appear(elemId, {duration : 0.5});
+         Element.show(elemId);
       } else {
-         Effect.Fade(elemId, {duration : 0.5});
+         Element.hide(elemId);
       }
    },
    hotkeyHelp: function() {
@@ -381,7 +394,7 @@ const App = {
    },
 	handleRpcJson: function(transport) {
 
-		const netalert = $$("#toolbar .net-alert")[0];
+		const netalert = App.findAll("#toolbar .net-alert")[0];
 
 		try {
 			const reply = JSON.parse(transport.responseText);
@@ -459,7 +472,7 @@ const App = {
 				}
 
 				if (k == "recent_log_events") {
-					const alert = $$(".log-alert")[0];
+					const alert = App.findAll(".log-alert")[0];
 
 					if (alert) {
 						v > 0 ? alert.show() : alert.hide();
@@ -516,7 +529,7 @@ const App = {
 							break;
 						case "cdm_auto_catchup":
 							if (params[k] == 1) {
-								const hl = $("headlines-frame");
+								const hl = App.byId("headlines-frame");
 								if (hl) hl.addClassName("auto_catchup");
 							}
 							break;
@@ -562,7 +575,7 @@ const App = {
 			}
 
 			return this.report(error,
-				Object.extend({title: __("Fatal error")}, params));
+				{...{title: __("Fatal error")}, ...params});
 		},
 		report: function(error, params = {}) {
 			if (!error) return;
@@ -650,7 +663,7 @@ const App = {
 
          this.setLoadingProgress(30);
          this.initHotkeyActions();
-         this.enableCsrfSupport();
+         //this.enableCsrfSupport();
 
          const params = {
             op: "rpc",
@@ -671,7 +684,7 @@ const App = {
    checkBrowserFeatures: function() {
       let errorMsg = "";
 
-      ['MutationObserver'].each(function(wf) {
+      ['MutationObserver'].forEach(function(wf) {
          if (!(wf in window)) {
             errorMsg = `Browser feature check failed: <code>window.${wf}</code> not found.`;
             throw new Error(errorMsg);
@@ -794,9 +807,9 @@ const App = {
             console.log('update reply', reply);
 
             if (reply.id) {
-               $("updates-available").show();
+               App.byId("updates-available").show();
             } else {
-               $("updates-available").hide();
+               App.byId("updates-available").hide();
             }
          });
    },
@@ -812,7 +825,7 @@ const App = {
    onViewModeChanged: function() {
       const view_mode = document.forms["toolbar-main"].view_mode.value;
 
-      $$("body")[0].setAttribute("view-mode", view_mode);
+      App.findAll("body")[0].setAttribute("view-mode", view_mode);
 
       return Feeds.reloadCurrent('');
    },
@@ -851,8 +864,8 @@ const App = {
                {width: Cookie.get("ttrss_ci_width") + "px" });
          }
 
-         $("headlines-frame").setStyle({ borderBottomWidth: '0px' });
-         $("headlines-frame").addClassName("wide");
+         App.byId("headlines-frame").setStyle({ borderBottomWidth: '0px' });
+         App.byId("headlines-frame").addClassName("wide");
 
       } else {
 
@@ -867,8 +880,8 @@ const App = {
                {height: Cookie.get("ttrss_ci_height") + "px" });
          }
 
-         $("headlines-frame").setStyle({ borderBottomWidth: '1px' });
-         $("headlines-frame").removeClassName("wide");
+         App.byId("headlines-frame").setStyle({ borderBottomWidth: '1px' });
+         App.byId("headlines-frame").removeClassName("wide");
 
       }
 
@@ -1107,7 +1120,7 @@ const App = {
          this.hotkey_actions["select_article_cursor"] = () => {
             const id = Article.getUnderPointer();
             if (id) {
-               const row = $("RROW-" + id);
+               const row = App.byId("RROW-" + id);
 
                if (row)
                   row.toggleClassName("Selected");
@@ -1234,7 +1247,7 @@ const App = {
             }
             break;
          case "qmcHKhelp":
-            this.hotkeyHelp();
+            this.helpDialog("main");
             break;
          default:
             console.log("quickMenuGo: unknown action: " + opid);
diff --git a/js/Article.js b/js/Article.js
index 81917fd47..e7498f0b3 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -36,19 +36,19 @@ const Article = {
 			const score = prompt(__("Please enter new score for selected articles:"));
 
 			if (!isNaN(parseInt(score))) {
-				ids.each((id) => {
-					const row = $("RROW-" + id);
+				ids.forEach((id) => {
+					const row = App.byId("RROW-" + id);
 
 					if (row) {
 						row.setAttribute("data-score", score);
 
-						const pic = row.select(".icon-score")[0];
+						const pic = row.querySelector(".icon-score");
 
 						pic.innerHTML = Article.getScorePic(score);
 						pic.setAttribute("title", score);
 
 						["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
-							.each(function(scl) {
+							.forEach(function(scl) {
 								if (row.hasClassName(scl))
 									row.removeClassName(scl);
 							});
@@ -72,13 +72,13 @@ const Article = {
 			if (!isNaN(parseInt(score))) {
 				row.setAttribute("data-score", score);
 
-				const pic = row.select(".icon-score")[0];
+				const pic = row.querySelector(".icon-score");
 
 				pic.innerHTML = Article.getScorePic(score);
 				pic.setAttribute("title", score);
 
 				["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
-					.each(function(scl) {
+					.forEach(function(scl) {
 						if (row.hasClassName(scl))
 							row.removeClassName(scl);
 					});
@@ -104,7 +104,7 @@ const Article = {
 		}
 	}, */
 	cdmUnsetActive: function (event) {
-		const row = $("RROW-" + Article.getActive());
+		const row = App.byId("RROW-" + Article.getActive());
 
 		if (row) {
 			row.removeClassName("active");
@@ -249,7 +249,7 @@ const Article = {
 				container.innerHTML += "&nbsp;";
 
 			// in expandable mode, save content for later, so that we can pack unfocused rows back
-			if (App.isCombinedMode() && $("main").hasClassName("expandable"))
+			if (App.isCombinedMode() && App.byId("main").hasClassName("expandable"))
 				row.setAttribute("data-content-original", row.getAttribute("data-content"));
 
 			row.removeAttribute("data-content");
@@ -351,7 +351,7 @@ const Article = {
 							if (data) {
 								const id = data.id;
 
-								const tags = $("ATSTR-" + id);
+								const tags = App.byId("ATSTR-" + id);
 								const tooltip = dijit.byId("ATSTRTIP-" + id);
 
 								if (tags) tags.innerHTML = data.content;
@@ -370,13 +370,13 @@ const Article = {
 
 			xhrJson("backend.php", {op: "article", method: "printArticleTags", id: id}, (reply) => {
 
-				dijit.getEnclosingWidget($("tags_str"))
+				dijit.getEnclosingWidget(App.byId("tags_str"))
 					.attr('value', reply.tags.join(", "))
 					.attr('disabled', false);
 
-				new Ajax.Autocompleter("tags_str", "tags_choices",
+				/* new Ajax.Autocompleter("tags_str", "tags_choices",
 					"backend.php?op=article&method=completeTags",
-					{tokens: ',', paramName: "search"});
+					{tokens: ',', paramName: "search"}); */
 			});
 		});
 
@@ -386,8 +386,8 @@ const Article = {
 	cdmMoveToId: function (id, params = {}) {
 		const force_to_top = params.force_to_top || false;
 
-		const ctr = $("headlines-frame");
-		const row = $("RROW-" + id);
+		const ctr = App.byId("headlines-frame");
+		const row = App.byId("RROW-" + id);
 
 		if (!row || !ctr) return;
 
@@ -399,12 +399,12 @@ const Article = {
 		if (id != Article.getActive()) {
 			console.log("setActive", id, "was", Article.getActive());
 
-			$$("div[id*=RROW][class*=active]").each((row) => {
+			App.findAll("div[id*=RROW][class*=active]").forEach((row) => {
 				row.removeClassName("active");
 				Article.pack(row);
 			});
 
-			const row = $("RROW-" + id);
+			const row = App.byId("RROW-" + id);
 
 			if (row) {
 				Article.unpack(row);
@@ -425,10 +425,10 @@ const Article = {
 			return 0;
 	},
 	scrollByPages: function (page_offset) {
-		App.Scrollable.scrollByPages($("content-insert"), page_offset);
+		App.Scrollable.scrollByPages(App.byId("content-insert"), page_offset);
 	},
 	scroll: function (offset) {
-		App.Scrollable.scroll($("content-insert"), offset);
+		App.Scrollable.scroll(App.byId("content-insert"), offset);
 	},
 	mouseIn: function (id) {
 		this.post_under_pointer = id;
diff --git a/js/CommonDialogs.js b/js/CommonDialogs.js
index dd0d56194..40313d34f 100644
--- a/js/CommonDialogs.js
+++ b/js/CommonDialogs.js
@@ -25,7 +25,7 @@ const	CommonDialogs = {
 					else
 						Feeds.reload();
 
-					const icon = $$(".feed-editor-icon")[0];
+					const icon = App.findAll(".feed-editor-icon")[0];
 
 					if (icon)
 						icon.src = icon.src.replace(/\?[0-9]+$/, "?" + new Date().getTime());
@@ -36,7 +36,7 @@ const	CommonDialogs = {
 			return false;
 		},
 		uploadFeedIcon: function() {
-			const file = $("icon_file");
+			const file = App.byId("icon_file");
 
 			if (file.value.length == 0) {
 				alert(__("Please select an image file to upload."));
@@ -57,7 +57,7 @@ const	CommonDialogs = {
 								else
 									Feeds.reload();
 
-								const icon = $$(".feed-editor-icon")[0];
+								const icon = App.findAll(".feed-editor-icon")[0];
 
 								if (icon)
 									icon.src = icon.src.replace(/\?[0-9]+$/, "?" + new Date().getTime());
@@ -72,7 +72,7 @@ const	CommonDialogs = {
 							break;
 					}
 				};
-				xhr.send(new FormData($("feed_icon_upload_form")));
+				xhr.send(new FormData(App.byId("feed_icon_upload_form")));
 			}
 
 			return false;
@@ -165,13 +165,11 @@ const	CommonDialogs = {
 								</form>
 							`,
 							show_error: function (msg) {
-								const elem = $("fadd_error_message");
+								const elem = App.byId("fadd_error_message");
 
 								elem.innerHTML = msg;
 
-								if (!Element.visible(elem))
-									new Effect.Appear(elem);
-
+								Element.show(elem);
 							},
 							execute: function () {
 								if (this.validate()) {
@@ -239,7 +237,7 @@ const	CommonDialogs = {
 															}
 														}
 
-														Effect.Appear('feedDlg_feedsContainer', {duration: 0.5});
+														Element.show('feedDlg_feedsContainer');
 													}
 													break;
 												case 5:
@@ -463,8 +461,6 @@ const	CommonDialogs = {
 											target.href = new_link;
 											target.innerHTML = new_link;
 
-											new Effect.Highlight(target);
-
 											Notify.close();
 
 										} else {
@@ -528,8 +524,6 @@ const	CommonDialogs = {
 										target.href = target.href.replace(/&key=.*$/,
 											"&key=" + new_link);
 
-										new Effect.Highlight(target);
-
 										Notify.close();
 
 									} else {
diff --git a/js/CommonFilters.js b/js/CommonFilters.js
index e3629157b..d5b751f91 100644
--- a/js/CommonFilters.js
+++ b/js/CommonFilters.js
@@ -9,7 +9,7 @@ const	Filters = {
 	filterDlgCheckAction: function(sender) {
 		const action = sender.value;
 
-		const action_param = $("filterDlg_paramBox");
+		const action_param = App.byId("filterDlg_paramBox");
 
 		if (!action_param) {
 			console.log("filterDlgCheckAction: can't find action param box!");
@@ -18,7 +18,7 @@ const	Filters = {
 
 		// if selected action supports parameters, enable params field
 		if (action == 4 || action == 6 || action == 7 || action == 9) {
-			new Effect.Appear(action_param, {duration: 0.5});
+			Element.show(action_param);
 
 			Element.hide(dijit.byId("filterDlg_actionParam").domNode);
 			Element.hide(dijit.byId("filterDlg_actionParamLabel").domNode);
@@ -97,7 +97,7 @@ const	Filters = {
 			title: ruleStr ? __("Edit rule") : __("Add rule"),
 			execute: function () {
 				if (this.validate()) {
-					Filters.createNewRuleElement($("filterDlg_Matches"), replaceNode);
+					Filters.createNewRuleElement(App.byId("filterDlg_Matches"), replaceNode);
 					this.hide();
 				}
 			},
@@ -119,7 +119,7 @@ const	Filters = {
 			title: actionStr ? __("Edit action") : __("Add action"),
 			execute: function () {
 				if (this.validate()) {
-					Filters.createNewActionElement($("filterDlg_Actions"), replaceNode);
+					Filters.createNewActionElement(App.byId("filterDlg_Actions"), replaceNode);
 					this.hide();
 				}
 			}
@@ -158,7 +158,7 @@ const	Filters = {
 
 							console.log("got results:" + result.length);
 
-							$("prefFilterProgressMsg").innerHTML = __("Looking for articles (%d processed, %f found)...")
+							App.byId("prefFilterProgressMsg").innerHTML = __("Looking for articles (%d processed, %f found)...")
 								.replace("%f", dialog.results)
 								.replace("%d", offset);
 
@@ -167,7 +167,7 @@ const	Filters = {
 							for (let i = 0; i < result.length; i++) {
 								const tmp = dojo.create("table", { innerHTML: result[i]});
 
-								$("prefFilterTestResultList").innerHTML += tmp.innerHTML;
+								App.byId("prefFilterTestResultList").innerHTML += tmp.innerHTML;
 							}
 
 							if (dialog.results < 30 && offset < dialog.max_offset) {
@@ -183,11 +183,11 @@ const	Filters = {
 								Element.hide("prefFilterLoadingIndicator");
 
 								if (dialog.results == 0) {
-									$("prefFilterTestResultList").innerHTML = `<tr><td align='center'>
+									App.byId("prefFilterTestResultList").innerHTML = `<tr><td align='center'>
 										${__('No recent articles matching this filter have been found.')}</td></tr>`;
-									$("prefFilterProgressMsg").innerHTML = "Articles matching this filter:";
+									App.byId("prefFilterProgressMsg").innerHTML = "Articles matching this filter:";
 								} else {
-									$("prefFilterProgressMsg").innerHTML = __("Found %d articles matching this filter:")
+									App.byId("prefFilterProgressMsg").innerHTML = __("Found %d articles matching this filter:")
 										.replace("%d", dialog.results);
 								}
 
@@ -289,12 +289,12 @@ const	Filters = {
 						Filters.addFilterRule();
 					},
 					deleteAction: function () {
-						$$("#filterDlg_Actions li[class*=Selected]").each(function (e) {
+						App.findAll("#filterDlg_Actions li[class*=Selected]").forEach(function (e) {
 							e.parentNode.removeChild(e)
 						});
 					},
 					deleteRule: function () {
-						$$("#filterDlg_Matches li[class*=Selected]").each(function (e) {
+						App.findAll("#filterDlg_Matches li[class*=Selected]").forEach(function (e) {
 							e.parentNode.removeChild(e)
 						});
 					},
diff --git a/js/FeedTree.js b/js/FeedTree.js
index 694cf8332..17cd3deea 100755
--- a/js/FeedTree.js
+++ b/js/FeedTree.js
@@ -286,7 +286,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 
 				// focus headlines to route key events there
 				setTimeout(() => {
-					$("headlines-frame").focus();
+					App.byId("headlines-frame").focus();
 
 					if (treeNode) {
 						const node = treeNode.rowNode;
@@ -295,7 +295,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) {
-								$("feedTree").scrollTop = node.offsetTop;
+								App.byId("feedTree").scrollTop = node.offsetTop;
 							}
 						}
 					}
diff --git a/js/Feeds.js b/js/Feeds.js
index 0567cf8c5..7f3a80f4e 100644
--- a/js/Feeds.js
+++ b/js/Feeds.js
@@ -117,7 +117,7 @@ const	Feeds = {
 	toggle: function() {
 		Element.toggle("feeds-holder");
 
-		const splitter = $("feeds-holder_splitter");
+		const splitter = App.byId("feeds-holder_splitter");
 
 		Element.visible("feeds-holder") ? splitter.show() : splitter.hide();
 
@@ -180,7 +180,7 @@ const	Feeds = {
 				dojo.disconnect(tmph);
 			});
 
-			$("feeds-holder").appendChild(tree.domNode);
+			App.byId("feeds-holder").appendChild(tree.domNode);
 
 			const tmph2 = dojo.connect(tree, 'onLoad', function () {
 				dojo.disconnect(tmph2);
@@ -284,8 +284,8 @@ const	Feeds = {
 		this._active_feed_id = id;
 		this._active_feed_is_cat = is_cat;
 
-		$("headlines-frame").setAttribute("feed-id", id);
-		$("headlines-frame").setAttribute("is-cat", is_cat ? 1 : 0);
+		App.byId("headlines-frame").setAttribute("feed-id", id);
+		App.byId("headlines-frame").setAttribute("is-cat", is_cat ? 1 : 0);
 
 		this.select(id, is_cat);
 
@@ -310,8 +310,8 @@ const	Feeds = {
 		if (tree)
 			return tree.hideRead(hide, App.getInitParam("hide_read_shows_special"));*/
 
-		$$("body")[0].setAttribute("hide-read-feeds", !!hide);
-		$$("body")[0].setAttribute("hide-read-shows-special", !!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"));
 	},
 	open: function(params) {
 		const feed = params.feed;
@@ -339,7 +339,7 @@ const	Feeds = {
 			}, 10 * 1000);
 		}
 
-		Form.enable("toolbar-main");
+		//Form.enable("toolbar-main");
 
 		let query = Object.assign({op: "feeds", method: "view", feed: feed},
 			dojo.formToObject("toolbar-main"));
@@ -362,7 +362,7 @@ const	Feeds = {
 			query.m = "ForceUpdate";
 		}
 
-		Form.enable("toolbar-main");
+		//Form.enable("toolbar-main");
 
 		if (!delayed)
 			if (!this.setExpando(feed, is_cat,
@@ -476,9 +476,9 @@ const	Feeds = {
 
 		if (App.getInitParam("confirm_feed_catchup") != 1 || confirm(str)) {
 
-			const rows = $$("#headlines-frame > div[id*=RROW][class*=Unread][data-orig-feed-id='" + id + "']");
+			const rows = App.findAll("#headlines-frame > div[id*=RROW][class*=Unread][data-orig-feed-id='" + id + "']");
 
-			rows.each((row) => {
+			rows.forEach((row) => {
 				row.removeClassName("Unread");
 			})
 		}
diff --git a/js/Headlines.js b/js/Headlines.js
index 128a7e571..143a42d0b 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -44,7 +44,7 @@ const Headlines = {
 	row_observer: new MutationObserver((mutations) => {
 		const modified = [];
 
-		mutations.each((m) => {
+		mutations.forEach((m) => {
 			if (m.type == 'attributes' && ['class', 'data-score'].indexOf(m.attributeName) != -1) {
 
 				const row = m.target;
@@ -54,7 +54,7 @@ const Headlines = {
 					const hl = Headlines.headlines[id];
 
 					if (hl) {
-						const hl_old = Object.extend({}, hl);
+						const hl_old = {...{}, ...hl};
 
 						hl.unread = row.hasClassName("Unread");
 						hl.marked = row.hasClassName("marked");
@@ -94,7 +94,7 @@ const Headlines = {
 			rescore: {},
 		};
 
-		modified.each(function (m) {
+		modified.forEach(function (m) {
 			if (m.old.marked != m.new.marked)
 				ops.tmark.push(m.id);
 
@@ -118,29 +118,29 @@ const Headlines = {
 			}
 		});
 
-		ops.select.each((row) => {
-			const cb = dijit.getEnclosingWidget(row.select(".rchk")[0]);
+		ops.select.forEach((row) => {
+			const cb = dijit.getEnclosingWidget(row.querySelector(".rchk"));
 
 			if (cb)
 				cb.attr('checked', true);
 		});
 
-		ops.deselect.each((row) => {
-			const cb = dijit.getEnclosingWidget(row.select(".rchk")[0]);
+		ops.deselect.forEach((row) => {
+			const cb = dijit.getEnclosingWidget(row.querySelector(".rchk"));
 
 			if (cb && !row.hasClassName("active"))
 				cb.attr('checked', false);
 		});
 
-		ops.activate.each((row) => {
-			const cb = dijit.getEnclosingWidget(row.select(".rchk")[0]);
+		ops.activate.forEach((row) => {
+			const cb = dijit.getEnclosingWidget(row.querySelector(".rchk"));
 
 			if (cb)
 				cb.attr('checked', true);
 		});
 
-		ops.deactivate.each((row) => {
-			const cb = dijit.getEnclosingWidget(row.select(".rchk")[0]);
+		ops.deactivate.forEach((row) => {
+			const cb = dijit.getEnclosingWidget(row.querySelector(".rchk"));
 
 			if (cb && !row.hasClassName("Selected"))
 				cb.attr('checked', false);
@@ -167,7 +167,7 @@ const Headlines = {
 		const scores = Object.keys(ops.rescore);
 
 		if (scores.length != 0) {
-			scores.each((score) => {
+			scores.forEach((score) => {
 				promises.push(xhrPost("backend.php",
 					{op: "article", method: "setScore", id: ops.rescore[score].toString(), score: score}));
 			});
@@ -211,7 +211,7 @@ const Headlines = {
 
 					Headlines.select('none');
 
-					const scroll_position_A = $("RROW-" + id).offsetTop - $("headlines-frame").scrollTop;
+					const scroll_position_A = App.byId("RROW-" + id).offsetTop - App.byId("headlines-frame").scrollTop;
 
 					Article.setActive(id);
 
@@ -222,10 +222,10 @@ const Headlines = {
 
 						Headlines.toggleUnread(id, 0);
 					} else {
-						const scroll_position_B = $("RROW-" + id).offsetTop - $("headlines-frame").scrollTop;
+						const scroll_position_B = App.byId("RROW-" + id).offsetTop - App.byId("headlines-frame").scrollTop;
 
 						// this would only work if there's enough space
-						$("headlines-frame").scrollTop -= scroll_position_A-scroll_position_B;
+						App.byId("headlines-frame").scrollTop -= scroll_position_A-scroll_position_B;
 
 						Article.cdmMoveToId(id);
 					}
@@ -252,7 +252,7 @@ const Headlines = {
 		return false;
 	},
 	initScrollHandler: function () {
-		$("headlines-frame").onscroll = (event) => {
+		App.byId("headlines-frame").onscroll = (event) => {
 			clearTimeout(this._headlines_scroll_timeout);
 			this._headlines_scroll_timeout = window.setTimeout(function () {
 				//console.log('done scrolling', event);
@@ -262,8 +262,8 @@ const Headlines = {
 	},
 	loadMore: function () {
 		const view_mode = document.forms["toolbar-main"].view_mode.value;
-		const unread_in_buffer = $$("#headlines-frame > div[id*=RROW][class*=Unread]").length;
-		const num_all = $$("#headlines-frame > div[id*=RROW]").length;
+		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 num_unread = Feeds.getUnread(Feeds.getActive(), Feeds.activeIsCat());
 
 		// TODO implement marked & published
@@ -289,10 +289,10 @@ const Headlines = {
 		Feeds.open({feed: Feeds.getActive(), is_cat: Feeds.activeIsCat(), offset: offset, append: true});
 	},
 	isChildVisible: function (elem) {
-		return App.Scrollable.isChildVisible(elem, $("headlines-frame"));
+		return App.Scrollable.isChildVisible(elem, App.byId("headlines-frame"));
 	},
 	firstVisible: function () {
-		const rows = $$("#headlines-frame > div[id*=RROW]");
+		const rows = App.findAll("#headlines-frame > div[id*=RROW]");
 
 		for (let i = 0; i < rows.length; i++) {
 			const row = rows[i];
@@ -303,7 +303,7 @@ const Headlines = {
 		}
 	},
 	unpackVisible: function(container) {
-		const rows = $$("#headlines-frame > div[id*=RROW][data-content].cdm");
+		const rows = App.findAll("#headlines-frame > div[id*=RROW][data-content].cdm");
 
 		for (let i = 0; i < rows.length; i++) {
 			if (App.Scrollable.isChildVisible(rows[i], container)) {
@@ -315,8 +315,8 @@ const Headlines = {
 	scrollHandler: function (/*event*/) {
 		try {
 			if (!Feeds.infscroll_disabled && !Feeds.infscroll_in_progress) {
-				const hsp = $("headlines-spacer");
-				const container = $("headlines-frame");
+				const hsp = App.byId("headlines-spacer");
+				const container = App.byId("headlines-frame");
 
 				if (hsp && hsp.previousSibling) {
 					const last_row = hsp.previousSibling;
@@ -333,7 +333,7 @@ const Headlines = {
 			}
 
 			if (App.isCombinedMode() && App.getInitParam("cdm_expanded")) {
-				const container = $("headlines-frame")
+				const container = App.byId("headlines-frame")
 
 				/* don't do anything until there was some scrolling */
 				if (container.scrollTop > 0)
@@ -342,12 +342,12 @@ const Headlines = {
 
 			if (App.getInitParam("cdm_auto_catchup")) {
 
-				const rows = $$("#headlines-frame > div[id*=RROW][class*=Unread]");
+				const rows = App.findAll("#headlines-frame > div[id*=RROW][class*=Unread]");
 
 				for (let i = 0; i < rows.length; i++) {
 					const row = rows[i];
 
-					if ($("headlines-frame").scrollTop > (row.offsetTop + row.offsetHeight / 2)) {
+					if (App.byId("headlines-frame").scrollTop > (row.offsetTop + row.offsetHeight / 2)) {
 						row.removeClassName("Unread");
 					} else {
 						break;
@@ -362,23 +362,23 @@ const Headlines = {
 		return this.headlines[id];
 	},
 	setCommonClasses: function () {
-		$("headlines-frame").removeClassName("cdm");
-		$("headlines-frame").removeClassName("normal");
+		App.byId("headlines-frame").removeClassName("cdm");
+		App.byId("headlines-frame").removeClassName("normal");
 
-		$("headlines-frame").addClassName(App.isCombinedMode() ? "cdm" : "normal");
+		App.byId("headlines-frame").addClassName(App.isCombinedMode() ? "cdm" : "normal");
 
 		// for floating title because it's placed outside of headlines-frame
-		$("main").removeClassName("expandable");
-		$("main").removeClassName("expanded");
+		App.byId("main").removeClassName("expandable");
+		App.byId("main").removeClassName("expanded");
 
 		if (App.isCombinedMode())
-			$("main").addClassName(App.getInitParam("cdm_expanded") ? " expanded" : " expandable");
+			App.byId("main").addClassName(App.getInitParam("cdm_expanded") ? " expanded" : " expandable");
 	},
 	renderAgain: function () {
 		// TODO: wrap headline elements into a knockoutjs model to prevent all this stuff
 		Headlines.setCommonClasses();
 
-		$$("#headlines-frame > div[id*=RROW]").each((row) => {
+		App.findAll("#headlines-frame > div[id*=RROW]").forEach((row) => {
 			const id = row.getAttribute("data-article-id");
 			const hl = this.headlines[id];
 
@@ -401,12 +401,12 @@ const Headlines = {
 			}
 		});
 
-		$$(".cdm .header-sticky-guard").each((e) => {
+		App.findAll(".cdm .header-sticky-guard").forEach((e) => {
 			this.sticky_header_observer.observe(e)
 		});
 
 		if (App.getInitParam("cdm_expanded"))
-			$$("#headlines-frame > div[id*=RROW].cdm").each((e) => {
+			App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => {
 				this.unpack_observer.observe(e)
 			});
 
@@ -431,7 +431,7 @@ const Headlines = {
 			const tmp = document.createElement("div");
 			tmp.innerHTML = vgrhdr;
 
-			$("headlines-frame").appendChild(tmp.firstChild);
+			App.byId("headlines-frame").appendChild(tmp.firstChild);
 
 			this.vgroup_last_feed = hl.feed_id;
 		}
@@ -555,11 +555,11 @@ const Headlines = {
 		return tmp.firstChild;
 	},
 	updateCurrentUnread: function () {
-		if ($("feed_current_unread")) {
+		if (App.byId("feed_current_unread")) {
 			const feed_unread = Feeds.getUnread(Feeds.getActive(), Feeds.activeIsCat());
 
 			if (feed_unread > 0 && !Element.visible("feeds-holder")) {
-				$("feed_current_unread").innerText = feed_unread;
+				App.byId("feed_current_unread").innerText = feed_unread;
 				Element.show("feed_current_unread");
 			} else {
 				Element.hide("feed_current_unread");
@@ -653,15 +653,15 @@ const Headlines = {
 				// also called in renderAgain() after view mode switch
 				Headlines.setCommonClasses();
 
-				$("headlines-frame").setAttribute("is-vfeed",
+				App.byId("headlines-frame").setAttribute("is-vfeed",
 					reply['headlines']['is_vfeed'] ? 1 : 0);
 
 				Article.setActive(0);
 
 				try {
-					$("headlines-frame").removeClassName("smooth-scroll");
-					$("headlines-frame").scrollTop = 0;
-					$("headlines-frame").addClassName("smooth-scroll");
+					App.byId("headlines-frame").removeClassName("smooth-scroll");
+					App.byId("headlines-frame").scrollTop = 0;
+					App.byId("headlines-frame").addClassName("smooth-scroll");
 				} catch (e) {
 					console.warn(e);
 				}
@@ -669,27 +669,27 @@ const Headlines = {
 				this.headlines = [];
 				this.vgroup_last_feed = undefined;
 
-				/*dojo.html.set($("toolbar-headlines"),
+				/*dojo.html.set(App.byId("toolbar-headlines"),
 					reply['headlines']['toolbar'],
 					{parseContent: true});*/
 
 				Headlines.renderToolbar(reply['headlines']);
 
 				if (typeof reply['headlines']['content'] == 'string') {
-					$("headlines-frame").innerHTML = reply['headlines']['content'];
+					App.byId("headlines-frame").innerHTML = reply['headlines']['content'];
 				} else {
-					$("headlines-frame").innerHTML = '';
+					App.byId("headlines-frame").innerHTML = '';
 
 					for (let i = 0; i < reply['headlines']['content'].length; i++) {
 						const hl = reply['headlines']['content'][i];
 
-						$("headlines-frame").appendChild(this.render(reply['headlines'], hl));
+						App.byId("headlines-frame").appendChild(this.render(reply['headlines'], hl));
 
 						this.headlines[parseInt(hl.id)] = hl;
 					}
 				}
 
-				let hsp = $("headlines-spacer");
+				let hsp = App.byId("headlines-spacer");
 
 				if (!hsp) {
 					hsp = document.createElement("div");
@@ -706,7 +706,7 @@ const Headlines = {
 
 				/*
 				if (Feeds._search_query) {
-					$("feed_title").innerHTML += "<span id='cancel_search'>" +
+					App.byId("feed_title").innerHTML += "<span id='cancel_search'>" +
 						" (<a href='#' onclick='Feeds.cancelSearch()'>" + __("Cancel search") + "</a>)" +
 						"</span>";
 				} */
@@ -716,7 +716,7 @@ const Headlines = {
 			} else if (headlines_count > 0 && feed_id == Feeds.getActive() && is_cat == Feeds.activeIsCat()) {
 				const c = dijit.byId("headlines-frame");
 
-				let hsp = $("headlines-spacer");
+				let hsp = App.byId("headlines-spacer");
 
 				if (hsp)
 					c.domNode.removeChild(hsp);
@@ -724,13 +724,13 @@ const Headlines = {
 				let headlines_appended = 0;
 
 				if (typeof reply['headlines']['content'] == 'string') {
-					$("headlines-frame").innerHTML = reply['headlines']['content'];
+					App.byId("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)]) {
-							$("headlines-frame").appendChild(this.render(reply['headlines'], hl));
+							App.byId("headlines-frame").appendChild(this.render(reply['headlines'], hl));
 
 							this.headlines[parseInt(hl.id)] = hl;
 							++headlines_appended;
@@ -762,7 +762,7 @@ const Headlines = {
 
 				console.log("no headlines received, infscroll_disabled=", Feeds.infscroll_disabled, 'first_id_changed=', first_id_changed);
 
-				const hsp = $("headlines-spacer");
+				const hsp = App.byId("headlines-spacer");
 
 				if (hsp) {
 					if (first_id_changed) {
@@ -775,12 +775,12 @@ const Headlines = {
 				}
 			}
 
-			$$(".cdm .header-sticky-guard").each((e) => {
+			App.findAll(".cdm .header-sticky-guard").forEach((e) => {
 				this.sticky_header_observer.observe(e)
 			});
 
 			if (App.getInitParam("cdm_expanded"))
-				$$("#headlines-frame > div[id*=RROW].cdm").each((e) => {
+				App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => {
 					this.unpack_observer.observe(e)
 				});
 
@@ -826,8 +826,8 @@ const Headlines = {
 			return;
 		}
 
-		ids.each((id) => {
-			const row = $("RROW-" + id);
+		ids.forEach((id) => {
+			const row = App.byId("RROW-" + id);
 
 			if (row) {
 				switch (cmode) {
@@ -851,7 +851,7 @@ const Headlines = {
 			return;
 		}
 
-		ids.each((id) => {
+		ids.forEach((id) => {
 			this.toggleMark(id);
 		});
 	},
@@ -863,19 +863,19 @@ const Headlines = {
 			return;
 		}
 
-		ids.each((id) => {
+		ids.forEach((id) => {
 			this.togglePub(id);
 		});
 	},
 	toggleMark: function (id) {
-		const row = $("RROW-" + id);
+		const row = App.byId("RROW-" + id);
 
 		if (row)
 			row.toggleClassName("marked");
 
 	},
 	togglePub: function (id) {
-		const row = $("RROW-" + id);
+		const row = App.byId("RROW-" + id);
 
 		if (row)
 			row.toggleClassName("published");
@@ -889,7 +889,7 @@ const Headlines = {
 		let next_id = false;
 		let current_id = Article.getActive();
 
-		if (!Headlines.isChildVisible($("RROW-" + current_id))) {
+		if (!Headlines.isChildVisible(App.byId("RROW-" + current_id))) {
 			console.log('active article is obscured, resetting to first visible...');
 			current_id = Headlines.firstVisible();
 			prev_id = current_id;
@@ -928,15 +928,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 = $("RROW-" + current_id);
-				const ctr = $("headlines-frame");
+				const row = App.byId("RROW-" + current_id);
+				const ctr = App.byId("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 = $("headlines-spacer").offsetTop - $("headlines-frame").offsetHeight + next.firstChild.offsetHeight;
+						const offset = App.byId("headlines-spacer").offsetTop - App.byId("headlines-frame").offsetHeight + next.firstChild.offsetHeight;
 
 						// don't jump back either
 						if (ctr.scrollTop < offset)
@@ -948,8 +948,8 @@ const Headlines = {
 			if (prev_id || current_id) {
 				if (App.isCombinedMode()) {
 					window.requestAnimationFrame(() => {
-						const row = $("RROW-" + current_id);
-						const ctr = $("headlines-frame");
+						const row = App.byId("RROW-" + current_id);
+						const ctr = App.byId("headlines-frame");
 						const delta_px = Math.round(row.offsetTop) - Math.round(ctr.scrollTop);
 
 						console.log('moving back, delta_px', delta_px);
@@ -970,7 +970,7 @@ const Headlines = {
 	},
 	updateSelectedPrompt: function () {
 		const count = Headlines.getSelected().length;
-		const elem = $("selected_prompt");
+		const elem = App.byId("selected_prompt");
 
 		if (elem) {
 			elem.innerHTML = ngettext("%d article selected",
@@ -980,7 +980,7 @@ const Headlines = {
 		}
 	},
 	toggleUnread: function (id, cmode) {
-		const row = $("RROW-" + id);
+		const row = App.byId("RROW-" + id);
 
 		if (row) {
 			if (typeof cmode == "undefined") cmode = 2;
@@ -1068,7 +1068,7 @@ const Headlines = {
 	getSelected: function () {
 		const rv = [];
 
-		$$("#headlines-frame > div[id*=RROW][class*=Selected]").each(
+		App.findAll("#headlines-frame > div[id*=RROW][class*=Selected]").forEach(
 			function (child) {
 				rv.push(child.getAttribute("data-article-id"));
 			});
@@ -1082,9 +1082,9 @@ const Headlines = {
 	getLoaded: function () {
 		const rv = [];
 
-		const children = $$("#headlines-frame > div[id*=RROW-]");
+		const children = App.findAll("#headlines-frame > div[id*=RROW-]");
 
-		children.each(function (child) {
+		children.forEach(function (child) {
 			if (Element.visible(child)) {
 				rv.push(child.getAttribute("data-article-id"));
 			}
@@ -1111,7 +1111,7 @@ const Headlines = {
 		if (start == stop)
 			return [start];
 
-		const rows = $$("#headlines-frame > div[id*=RROW]");
+		const rows = App.findAll("#headlines-frame > div[id*=RROW]");
 		const results = [];
 		let collecting = false;
 
@@ -1158,10 +1158,7 @@ const Headlines = {
 				console.warn("select: unknown mode", mode);
 		}
 
-		const rows = $$(query);
-
-		for (let i = 0; i < rows.length; i++) {
-			const row = rows[i];
+		App.findAll(query).forEach((row) => {
 
 			switch (mode) {
 				case "none":
@@ -1173,7 +1170,7 @@ const Headlines = {
 				default:
 					row.addClassName("Selected");
 			}
-		}
+		});
 	},
 	catchupSelection: function () {
 		const rows = Headlines.getSelected();
@@ -1212,7 +1209,7 @@ const Headlines = {
 		if (!below) {
 			for (let i = 0; i < visible_ids.length; i++) {
 				if (visible_ids[i] != id) {
-					const e = $("RROW-" + visible_ids[i]);
+					const e = App.byId("RROW-" + visible_ids[i]);
 
 					if (e && e.hasClassName("Unread")) {
 						ids_to_mark.push(visible_ids[i]);
@@ -1224,7 +1221,7 @@ const Headlines = {
 		} else {
 			for (let i = visible_ids.length - 1; i >= 0; i--) {
 				if (visible_ids[i] != id) {
-					const e = $("RROW-" + visible_ids[i]);
+					const e = App.byId("RROW-" + visible_ids[i]);
 
 					if (e && e.hasClassName("Unread")) {
 						ids_to_mark.push(visible_ids[i]);
@@ -1243,7 +1240,7 @@ const Headlines = {
 			if (App.getInitParam("confirm_feed_catchup") != 1 || confirm(msg)) {
 
 				for (let i = 0; i < ids_to_mark.length; i++) {
-					const e = $("RROW-" + ids_to_mark[i]);
+					const e = App.byId("RROW-" + ids_to_mark[i]);
 					e.removeClassName("Unread");
 				}
 			}
@@ -1253,16 +1250,16 @@ const Headlines = {
 		const data = JSON.parse(transport.responseText);
 
 		if (data) {
-			data['info-for-headlines'].each(function (elem) {
-				$$(".HLLCTR-" + elem.id).each(function (ctr) {
+			data['info-for-headlines'].forEach(function (elem) {
+				App.findAll(".HLLCTR-" + elem.id).forEach(function (ctr) {
 					ctr.innerHTML = elem.labels;
 				});
 			});
 		}
 	},
 	scrollToArticleId: function (id) {
-		const container = $("headlines-frame");
-		const row = $("RROW-" + id);
+		const container = App.byId("headlines-frame");
+		const row = App.byId("RROW-" + id);
 
 		if (!container || !row) return;
 
@@ -1361,7 +1358,7 @@ const Headlines = {
 			const labelAddMenu = new dijit.Menu({ownerMenu: menu});
 			const labelDelMenu = new dijit.Menu({ownerMenu: menu});
 
-			labels.each(function (label) {
+			labels.forEach(function (label) {
 				const bare_id = label.id;
 				const name = label.caption;
 
@@ -1409,10 +1406,10 @@ const Headlines = {
 		}
 	},
 	scrollByPages: function (page_offset) {
-		App.Scrollable.scrollByPages($("headlines-frame"), page_offset);
+		App.Scrollable.scrollByPages(App.byId("headlines-frame"), page_offset);
 	},
 	scroll: function (offset) {
-		App.Scrollable.scroll($("headlines-frame"), offset);
+		App.Scrollable.scroll(App.byId("headlines-frame"), offset);
 	},
 	initHeadlinesMenu: function () {
 		if (!dijit.byId("headlinesMenu")) {
diff --git a/js/PrefFeedTree.js b/js/PrefFeedTree.js
index e081e2e31..92194e037 100644
--- a/js/PrefFeedTree.js
+++ b/js/PrefFeedTree.js
@@ -126,7 +126,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 = $("feed_search");
+			const searchElem = App.byId("feed_search");
 			const search = (searchElem) ? searchElem.value : "";
 
 			xhrPost("backend.php", { op: "pref-feeds", search: search }, (transport) => {
@@ -228,7 +228,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 			const items = tree.model.getCheckedItems();
 			const rv = [];
 
-			items.each(function (item) {
+			items.forEach(function (item) {
 				if (item.id[0].match("CAT:"))
 					rv.push(tree.model.store.getValue(item, 'bare_id'));
 			});
@@ -262,7 +262,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 			const items = tree.model.getCheckedItems();
 			const rv = [];
 
-			items.each(function (item) {
+			items.forEach(function (item) {
 				if (item.id[0].match("FEED:"))
 					rv.push(tree.model.store.getValue(item, 'bare_id'));
 			});
@@ -304,7 +304,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 						title: __("Edit Multiple Feeds"),
 						getChildByName: function (name) {
 							let rv = null;
-							this.getChildren().each(
+							this.getChildren().forEach(
 								function (child) {
 									if (child.name == name) {
 										rv = child;
@@ -329,7 +329,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 
 								/* normalize unchecked checkboxes because [] is not serialized */
 
-								Object.keys(query).each((key) => {
+								Object.keys(query).forEach((key) => {
 									const val = query[key];
 
 									if (typeof val == "object" && val.length == 0)
diff --git a/js/PrefFilterTree.js b/js/PrefFilterTree.js
index e7d4efdc1..3d00c730c 100644
--- a/js/PrefFilterTree.js
+++ b/js/PrefFilterTree.js
@@ -80,14 +80,14 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			const items = tree.model.getCheckedItems();
 			const rv = [];
 
-			items.each(function (item) {
+			items.forEach(function (item) {
 				rv.push(tree.model.store.getValue(item, 'bare_id'));
 			});
 
 			return rv;
 		},
 		reload: function() {
-			const user_search = $("filter_search");
+			const user_search = App.byId("filter_search");
 			let search = "";
 			if (user_search) { search = user_search.value; }
 
diff --git a/js/PrefHelpers.js b/js/PrefHelpers.js
index 671431c39..f3c44e30d 100644
--- a/js/PrefHelpers.js
+++ b/js/PrefHelpers.js
@@ -9,7 +9,7 @@ const	Helpers = {
 			return Tables.getSelected("app-password-list");
 		},
 		updateContent: function(data) {
-			$("app_passwords_holder").innerHTML = data;
+			App.byId("app_passwords_holder").innerHTML = data;
 			dojo.parser.parse("app_passwords_holder");
 		},
 		removeSelected: function() {
@@ -218,8 +218,8 @@ const	Helpers = {
 					title: __("Customize stylesheet"),
 					apply: function() {
 						xhrPost("backend.php", this.attr('value'), () => {
-							new Effect.Appear("css_edit_apply_msg");
-							$("user_css_style").innerText = this.attr('value');
+							Element.show("css_edit_apply_msg");
+							App.byId("user_css_style").innerText = this.attr('value');
 						});
 					},
 					execute: function () {
@@ -291,7 +291,7 @@ const	Helpers = {
 	},
 	OPML: {
 		import: function() {
-			const opml_file = $("opml_file");
+			const opml_file = App.byId("opml_file");
 
 			if (opml_file.value.length == 0) {
 				alert(__("Please choose an OPML file first."));
@@ -333,7 +333,7 @@ const	Helpers = {
 					dialog.show();
 				};
 
-				xhr.send(new FormData($("opml_import_form")));
+				xhr.send(new FormData(App.byId("opml_import_form")));
 
 				return false;
 			}
diff --git a/js/PrefLabelTree.js b/js/PrefLabelTree.js
index f22423091..4392dfc44 100644
--- a/js/PrefLabelTree.js
+++ b/js/PrefLabelTree.js
@@ -48,7 +48,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 			const items = tree.model.getCheckedItems();
 			const rv = [];
 
-			items.each(function(item) {
+			items.forEach(function(item) {
 				rv.push(tree.model.store.getValue(item, 'bare_id'));
 			});
 
@@ -87,7 +87,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 							color = bg;
 						}
 
-						const e = $("icon-label-" + id);
+						const e = App.byId("icon-label-" + id);
 
 						if (e) {
 							if (bg) e.style.color = bg;
diff --git a/js/PrefUsers.js b/js/PrefUsers.js
index ebfe9231b..2e8c9c4a8 100644
--- a/js/PrefUsers.js
+++ b/js/PrefUsers.js
@@ -5,7 +5,7 @@
 
 const	Users = {
 	reload: function(sort) {
-		const user_search = $("user_search");
+		const user_search = App.byId("user_search");
 		const search = user_search ? user_search.value : "";
 
 		xhrPost("backend.php", { op: "pref-users", sort: sort, search: search }, (transport) => {
diff --git a/js/common.js b/js/common.js
index fb5cc6531..982bb94a7 100755
--- a/js/common.js
+++ b/js/common.js
@@ -3,35 +3,117 @@
 /* global dijit, __, App, Ajax */
 /* eslint-disable no-new */
 
-/* error reporting shim */
-// TODO: deprecated; remove
-/* function exception_error(e, e_compat, filename, lineno, colno) {
-	if (typeof e == "string")
-		e = e_compat;
+Element.prototype.hasClassName = function(className) {
+	dojo.hasClass(this, className);
+};
+
+Element.prototype.addClassName = function(className) {
+	dojo.addClass(this, className);
+};
+
+Element.prototype.removeClassName = function(className) {
+	dojo.removeClass(this, className);
+};
+
+Element.prototype.setStyle = function(args) {
+	Object.keys(args).forEach((k) => {
+		this.style[k] = args[k];
+	});
+};
+
+Element.prototype.show = function() {
+	this.style.display = "";
+};
+
+Element.prototype.hide = function() {
+	this.style.display = "none";
+};
+
+Element.prototype.toggle = function() {
+	if (this.visible())
+		this.show();
+	else
+		this.hide();
+};
+
+Element.prototype.visible = function() {
+	// TODO: should we actually check for offsetWidth/offsetHeight == 0?
+	return this.style.display != "none";
+}
+
+Element.visible = function(elem) {
+	if (typeof elem == "string")
+		elem = document.getElementById(elem);
+
+	return elem.visible();
+}
+
+Element.show = function(elem) {
+	if (typeof elem == "string")
+		elem = document.getElementById(elem);
+
+	return elem.show();
+}
+
+Element.hide = function(elem) {
+	if (typeof elem == "string")
+		elem = document.getElementById(elem);
+
+	return elem.hide();
+}
+
+Element.toggle = function(elem) {
+	if (typeof elem == "string")
+		elem = document.getElementById(elem);
+
+	return elem.toggle();
+}
 
-	App.Error.report(e, {filename: filename, lineno: lineno, colno: colno});
-} */
+Element.hasClassName = function (id, className) {
+	return document.getElementById(id).hasClassName(className);
+}
 
 /* xhr shorthand helpers */
 
 /* exported xhrPost */
-function xhrPost(url, params, complete) {
+function xhrPost(url, params = {}, complete = undefined) {
 	console.log("xhrPost:", params);
 
 	return new Promise((resolve, reject) => {
-		new Ajax.Request(url, {
-			parameters: params,
-			onComplete: function(reply) {
-				if (complete != undefined) complete(reply);
-
-				resolve(reply);
-			}
-		});
+		if (typeof __csrf_token != "undefined")
+			params = {...params, ...{csrf_token: __csrf_token}};
+
+		dojo.xhrPost({url: url,
+			postData: dojo.objectToQuery(params),
+			handleAs: "text",
+			error: function(error) {
+				reject(error);
+			},
+			load: function(data, ioargs) {
+				if (complete != undefined)
+					complete(ioargs.xhr);
+
+				resolve(ioargs.xhr)
+			}});
 	});
 }
 
+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);
+};
+
+String.prototype.stripTags = function() {
+	return this.replace(/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?(\/)?>|<\/\w+>/gi, '');
+}
+
 /* exported xhrJson */
-function xhrJson(url, params, complete) {
+function xhrJson(url, params = {}, complete = undefined) {
 	return new Promise((resolve, reject) =>
 		xhrPost(url, params).then((reply) => {
 			let obj = null;
@@ -48,13 +130,6 @@ function xhrJson(url, params, complete) {
 		}));
 }
 
-/* add method to remove element from array */
-Array.prototype.remove = function(s) {
-	for (let i=0; i < this.length; i++) {
-		if (s == this[i]) this.splice(i, 1);
-	}
-};
-
 /* common helpers not worthy of separate Dojo modules */
 
 /* exported Lists */
@@ -70,8 +145,8 @@ const Lists = {
 			checked ? row.addClassName("Selected") : row.removeClassName("Selected");
 	},
 	select: function(elemId, selected) {
-		$(elemId).select("li").each((row) => {
-			const checkNode = row.select(".dijitCheckBox,input[type=checkbox]")[0];
+		$(elemId).querySelectorAll("li").forEach((row) => {
+			const checkNode = row.querySelector(".dijitCheckBox,input[type=checkbox]");
 			if (checkNode) {
 				const widget = dijit.getEnclosingWidget(checkNode);
 
@@ -101,8 +176,8 @@ const Tables = {
 
 	},
 	select: function(elemId, selected) {
-		$(elemId).select("tr").each((row) => {
-			const checkNode = row.select(".dijitCheckBox,input[type=checkbox]")[0];
+		$(elemId).querySelector("tr").forEach((row) => {
+			const checkNode = row.querySelector(".dijitCheckBox,input[type=checkbox]");
 			if (checkNode) {
 				const widget = dijit.getEnclosingWidget(checkNode);
 
@@ -119,7 +194,7 @@ const Tables = {
 	getSelected: function(elemId) {
 		const rv = [];
 
-		$(elemId).select("tr").each((row) => {
+		$(elemId).querySelector("tr").forEach((row) => {
 			if (row.hasClassName("Selected")) {
 				// either older prefix-XXX notation or separate attribute
 				const rowId = row.getAttribute("data-row-id") || row.id.replace(/^[A-Z]*?-/, "");
@@ -173,7 +248,7 @@ const Notify = {
 		kind = kind || this.KIND_GENERIC;
 		keep = keep || false;
 
-		const notify = $("notify");
+		const notify = App.byId("notify");
 
 		window.clearTimeout(this.timeout);
 
diff --git a/js/tt-rss.js b/js/tt-rss.js
index 764667a0d..28b598c25 100644
--- a/js/tt-rss.js
+++ b/js/tt-rss.js
@@ -70,13 +70,20 @@ require(["dojo/_base/kernel",
 
 /* exported hash_get */
 function hash_get(key) {
-	const kv = window.location.hash.substring(1).toQueryParams();
-	return kv[key];
+	console.warn("FIXME: hash_get", key);
+
+	//const kv = window.location.hash.substring(1).toQueryParams();
+	//return kv[key];
+	console.warn("FIXME: hash_get", key);
 }
 
 /* exported hash_set */
 function hash_set(key, value) {
-	const kv = window.location.hash.substring(1).toQueryParams();
+	console.warn("FIXME: hash_set", key, value);
+
+	/*const kv = window.location.hash.substring(1).toQueryParams();
 	kv[key] = value;
-	window.location.hash = $H(kv).toQueryString();
+	window.location.hash = $H(kv).toQueryString();*/
+
+	console.warn("FIXME: hash_set", key);
 }
diff --git a/js/utility.js b/js/utility.js
index eef1c6b61..a7530a97f 100644
--- a/js/utility.js
+++ b/js/utility.js
@@ -2,7 +2,7 @@
 
 /* TODO: this should probably be something like night_mode.js since it does nothing specific to utility scripts */
 
-Event.observe(window, "load", function() {
+window.addEventListener("load", function() {
     const UtilityJS = {
         apply_night_mode: function (is_night, link) {
             console.log("night mode changed to", is_night);