diff --git a/qutebrowser/javascript/.eslintrc.yaml b/qutebrowser/javascript/.eslintrc.yaml index d75ef11d8..d82c516d5 100644 --- a/qutebrowser/javascript/.eslintrc.yaml +++ b/qutebrowser/javascript/.eslintrc.yaml @@ -2,7 +2,7 @@ env: browser: true parserOptions: - ecmaVersion: 3 + ecmaVersion: 6 extends: "eslint:all" @@ -13,7 +13,6 @@ rules: padded-blocks: ["error", "never"] space-before-function-paren: ["error", "never"] no-underscore-dangle: "off" - no-var: "off" vars-on-top: "off" newline-after-var: "off" camelcase: "off" diff --git a/qutebrowser/javascript/history.js b/qutebrowser/javascript/history.js index edc51ae01..417441bd9 100644 --- a/qutebrowser/javascript/history.js +++ b/qutebrowser/javascript/history.js @@ -21,22 +21,22 @@ window.loadHistory = (function() { // Date of last seen item. - var lastItemDate = null; + let lastItemDate = null; // Each request for new items includes the time of the last item and an // offset. The offset is equal to the number of items from the previous // request that had time=nextTime, and causes the next request to skip // those items to avoid duplicates. - var nextTime = null; - var nextOffset = 0; + let nextTime = null; + let nextOffset = 0; // The URL to fetch data from. - var DATA_URL = "qute://history/data"; + const DATA_URL = "qute://history/data"; // Various fixed elements - var EOF_MESSAGE = document.getElementById("eof"); - var LOAD_LINK = document.getElementById("load"); - var HIST_CONTAINER = document.getElementById("hist-container"); + const EOF_MESSAGE = document.getElementById("eof"); + const LOAD_LINK = document.getElementById("load"); + const HIST_CONTAINER = document.getElementById("hist-container"); /** * Finds or creates the session table>tbody to which item with given date @@ -47,17 +47,17 @@ window.loadHistory = (function() { */ function getSessionNode(date) { // Find/create table - var tableId = ["hist", date.getDate(), date.getMonth(), + const tableId = ["hist", date.getDate(), date.getMonth(), date.getYear()].join("-"); - var table = document.getElementById(tableId); + let table = document.getElementById(tableId); if (table === null) { table = document.createElement("table"); table.id = tableId; // Caption contains human-readable date - var caption = document.createElement("caption"); + const caption = document.createElement("caption"); caption.className = "date"; - var options = { + const options = { "weekday": "long", "year": "numeric", "month": "long", @@ -71,7 +71,7 @@ window.loadHistory = (function() { } // Find/create tbody - var tbody = table.lastChild; + let tbody = table.lastChild; if (tbody.tagName !== "TBODY") { tbody = document.createElement("tbody"); table.appendChild(tbody); @@ -80,10 +80,10 @@ window.loadHistory = (function() { // Create session-separator and new tbody if necessary if (tbody.lastChild !== null && lastItemDate !== null && window.GAP_INTERVAL > 0) { - var interval = lastItemDate.getTime() - date.getTime(); + const interval = lastItemDate.getTime() - date.getTime(); if (interval > window.GAP_INTERVAL) { // Add session-separator - var sessionSeparator = document.createElement("td"); + const sessionSeparator = document.createElement("td"); sessionSeparator.className = "session-separator"; sessionSeparator.colSpan = 2; sessionSeparator.innerHTML = "§"; @@ -108,20 +108,20 @@ window.loadHistory = (function() { * @returns {Element} the completed tr. */ function makeHistoryRow(itemUrl, itemTitle, itemTime) { - var row = document.createElement("tr"); + const row = document.createElement("tr"); - var title = document.createElement("td"); + const title = document.createElement("td"); title.className = "title"; - var link = document.createElement("a"); + const link = document.createElement("a"); link.href = itemUrl; link.innerHTML = itemTitle; - var host = document.createElement("span"); + const host = document.createElement("span"); host.className = "hostname"; host.innerHTML = link.hostname; title.appendChild(link); title.appendChild(host); - var time = document.createElement("td"); + const time = document.createElement("td"); time.className = "time"; time.innerHTML = itemTime; @@ -139,11 +139,11 @@ window.loadHistory = (function() { * @returns {void} */ function getJSON(url, callback) { - var xhr = new XMLHttpRequest(); + const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "json"; - xhr.onload = function() { - var status = xhr.status; + xhr.onload = () => { + const status = xhr.status; callback(status, xhr.response); }; xhr.send(); @@ -172,10 +172,10 @@ window.loadHistory = (function() { nextTime = history[history.length - 1].time; nextOffset = 0; - for (var i = 0, len = history.length; i < len; i++) { - var item = history[i]; + for (let i = 0, len = history.length; i < len; i++) { + const item = history[i]; // python's time.time returns seconds, but js Date expects ms - var currentItemDate = new Date(item.time * 1000); + const currentItemDate = new Date(item.time * 1000); getSessionNode(currentItemDate).appendChild(makeHistoryRow( item.url, item.title, currentItemDate.toLocaleTimeString() )); @@ -191,7 +191,7 @@ window.loadHistory = (function() { * @return {void} */ function loadHistory() { - var url = DATA_URL.concat("?offset=", nextOffset.toString()); + let url = DATA_URL.concat("?offset=", nextOffset.toString()); if (nextTime === null) { getJSON(url, receiveHistory); } else { diff --git a/qutebrowser/javascript/position_caret.js b/qutebrowser/javascript/position_caret.js index c2df1cf1d..0ead360fb 100644 --- a/qutebrowser/javascript/position_caret.js +++ b/qutebrowser/javascript/position_caret.js @@ -27,16 +27,15 @@ */ "use strict"; - (function() { // FIXME:qtwebengine integrate this with other window._qutebrowser code? function isElementInViewport(node) { // eslint-disable-line complexity - var i; - var boundingRect = (node.getClientRects()[0] || + let i; + let boundingRect = (node.getClientRects()[0] || node.getBoundingClientRect()); if (boundingRect.width <= 1 && boundingRect.height <= 1) { - var rects = node.getClientRects(); + const rects = node.getClientRects(); for (i = 0; i < rects.length; i++) { if (rects[i].width > rects[0].height && rects[i].height > rects[0].height) { @@ -51,8 +50,8 @@ return null; } if (boundingRect.width <= 1 || boundingRect.height <= 1) { - var children = node.children; - var visibleChildNode = false; + const children = node.children; + let visibleChildNode = false; for (i = 0; i < children.length; ++i) { boundingRect = (children[i].getClientRects()[0] || children[i].getBoundingClientRect()); @@ -69,7 +68,7 @@ boundingRect.left + boundingRect.width < -10) { return null; } - var computedStyle = window.getComputedStyle(node, null); + const computedStyle = window.getComputedStyle(node, null); if (computedStyle.visibility !== "visible" || computedStyle.display === "none" || node.hasAttribute("disabled") || @@ -81,27 +80,27 @@ } function positionCaret() { - var walker = document.createTreeWalker(document.body, 4, null); - var node; - var textNodes = []; - var el; + const walker = document.createTreeWalker(document.body, 4, null); + let node; + const textNodes = []; + let el; while ((node = walker.nextNode())) { if (node.nodeType === 3 && node.data.trim() !== "") { textNodes.push(node); } } - for (var i = 0; i < textNodes.length; i++) { - var element = textNodes[i].parentElement; + for (let i = 0; i < textNodes.length; i++) { + const element = textNodes[i].parentElement; if (isElementInViewport(element.parentElement)) { el = element; break; } } if (el !== undefined) { - var range = document.createRange(); + const range = document.createRange(); range.setStart(el, 0); range.setEnd(el, 0); - var sel = window.getSelection(); + const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } diff --git a/qutebrowser/javascript/scroll.js b/qutebrowser/javascript/scroll.js index 188320f11..7205cb151 100644 --- a/qutebrowser/javascript/scroll.js +++ b/qutebrowser/javascript/scroll.js @@ -20,19 +20,19 @@ "use strict"; window._qutebrowser.scroll = (function() { - var funcs = {}; + const funcs = {}; - funcs.to_perc = function(x, y) { - var x_px = window.scrollX; - var y_px = window.scrollY; + funcs.to_perc = (x, y) => { + let x_px = window.scrollX; + let y_px = window.scrollY; - var width = Math.max( + const width = Math.max( document.body.scrollWidth, document.body.offsetWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth ); - var height = Math.max( + const height = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, @@ -65,9 +65,9 @@ window._qutebrowser.scroll = (function() { window.scroll(x_px, y_px); }; - funcs.delta_page = function(x, y) { - var dx = window.innerWidth * x; - var dy = window.innerHeight * y; + funcs.delta_page = (x, y) => { + const dx = window.innerWidth * x; + const dy = window.innerHeight * y; window.scrollBy(dx, dy); }; diff --git a/qutebrowser/javascript/webelem.js b/qutebrowser/javascript/webelem.js index cbd1b16d8..f0ec63bc0 100644 --- a/qutebrowser/javascript/webelem.js +++ b/qutebrowser/javascript/webelem.js @@ -37,19 +37,19 @@ "use strict"; window._qutebrowser.webelem = (function() { - var funcs = {}; - var elements = []; + const funcs = {}; + const elements = []; function serialize_elem(elem) { if (!elem) { return null; } - var id = elements.length; + const id = elements.length; elements[id] = elem; // InvalidStateError will be thrown if elem doesn't have selectionStart - var caret_position = 0; + let caret_position = 0; try { caret_position = elem.selectionStart; } catch (err) { @@ -62,7 +62,7 @@ window._qutebrowser.webelem = (function() { } } - var out = { + const out = { "id": id, "value": elem.value, "outer_xml": elem.outerHTML, @@ -92,16 +92,16 @@ window._qutebrowser.webelem = (function() { out.text = elem.text; } // else: don't add the text at all - var attributes = {}; - for (var i = 0; i < elem.attributes.length; ++i) { - var attr = elem.attributes[i]; + const attributes = {}; + for (let i = 0; i < elem.attributes.length; ++i) { + const attr = elem.attributes[i]; attributes[attr.name] = attr.value; } out.attributes = attributes; - var client_rects = elem.getClientRects(); - for (var k = 0; k < client_rects.length; ++k) { - var rect = client_rects[k]; + const client_rects = elem.getClientRects(); + for (let k = 0; k < client_rects.length; ++k) { + const rect = client_rects[k]; out.rects.push({ "top": rect.top, "right": rect.right, @@ -126,8 +126,8 @@ window._qutebrowser.webelem = (function() { // the cVim implementation here? // https://github.com/1995eaton/chromium-vim/blob/1.2.85/content_scripts/dom.js#L74-L134 - var win = elem.ownerDocument.defaultView; - var rect = elem.getBoundingClientRect(); + const win = elem.ownerDocument.defaultView; + let rect = elem.getBoundingClientRect(); if (!rect || rect.top > window.innerHeight || @@ -142,7 +142,7 @@ window._qutebrowser.webelem = (function() { return false; } - var style = win.getComputedStyle(elem, null); + const style = win.getComputedStyle(elem, null); if (style.getPropertyValue("visibility") !== "visible" || style.getPropertyValue("display") === "none" || style.getPropertyValue("opacity") === "0") { @@ -159,11 +159,11 @@ window._qutebrowser.webelem = (function() { return true; } - funcs.find_css = function(selector, only_visible) { - var elems = document.querySelectorAll(selector); - var out = []; + funcs.find_css = (selector, only_visible) => { + const elems = document.querySelectorAll(selector); + const out = []; - for (var i = 0; i < elems.length; ++i) { + for (let i = 0; i < elems.length; ++i) { if (!only_visible || is_visible(elems[i])) { out.push(serialize_elem(elems[i])); } @@ -172,13 +172,13 @@ window._qutebrowser.webelem = (function() { return out; }; - funcs.find_id = function(id) { - var elem = document.getElementById(id); + funcs.find_id = (id) => { + const elem = document.getElementById(id); return serialize_elem(elem); }; - funcs.find_focused = function() { - var elem = document.activeElement; + funcs.find_focused = () => { + const elem = document.activeElement; if (!elem || elem === document.body) { // "When there is no selection, the active element is the page's @@ -189,43 +189,43 @@ window._qutebrowser.webelem = (function() { return serialize_elem(elem); }; - funcs.find_at_pos = function(x, y) { + funcs.find_at_pos = (x, y) => { // FIXME:qtwebengine // If the element at the specified point belongs to another document // (for example, an iframe's subdocument), the subdocument's parent // element is returned (the iframe itself). - var elem = document.elementFromPoint(x, y); + const elem = document.elementFromPoint(x, y); return serialize_elem(elem); }; // Function for returning a selection to python (so we can click it) - funcs.find_selected_link = function() { - var elem = window.getSelection().anchorNode; + funcs.find_selected_link = () => { + const elem = window.getSelection().anchorNode; if (!elem) { return null; } return serialize_elem(elem.parentNode); }; - funcs.set_value = function(id, value) { + funcs.set_value = (id, value) => { elements[id].value = value; }; - funcs.insert_text = function(id, text) { - var elem = elements[id]; + funcs.insert_text = (id, text) => { + const elem = elements[id]; elem.focus(); document.execCommand("insertText", false, text); }; - funcs.set_attribute = function(id, name, value) { + funcs.set_attribute = (id, name, value) => { elements[id].setAttribute(name, value); }; - funcs.remove_blank_target = function(id) { - var elem = elements[id]; + funcs.remove_blank_target = (id) => { + let elem = elements[id]; while (elem !== null) { - var tag = elem.tagName.toLowerCase(); + const tag = elem.tagName.toLowerCase(); if (tag === "a" || tag === "area") { if (elem.getAttribute("target") === "_blank") { elem.setAttribute("target", "_top"); @@ -236,18 +236,18 @@ window._qutebrowser.webelem = (function() { } }; - funcs.click = function(id) { - var elem = elements[id]; + funcs.click = (id) => { + const elem = elements[id]; elem.click(); }; - funcs.focus = function(id) { - var elem = elements[id]; + funcs.focus = (id) => { + const elem = elements[id]; elem.focus(); }; - funcs.move_cursor_to_end = function(id) { - var elem = elements[id]; + funcs.move_cursor_to_end = (id) => { + const elem = elements[id]; elem.selectionStart = elem.value.length; elem.selectionEnd = elem.value.length; };