From 82afa8ccf017e1205e56ce1d991b31590968691f Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Tue, 4 May 2021 14:29:05 +0200 Subject: [PATCH 1/2] [web/debugger.js] Convert the `Stepper` to a standard class Also, removes a couple of unnecessary local variables in the `Stepper.breakIt` method. Finally, this patch also disables the ESLint `no-var` rule, in preparation for the next patch, for a couple of data-structures that need to remain globally available. --- web/debugger.js | 81 +++++++++++++++++++++++++++---------------------- 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/web/debugger.js b/web/debugger.js index b6f7d1638..437d708ca 100644 --- a/web/debugger.js +++ b/web/debugger.js @@ -16,6 +16,7 @@ "use strict"; +// eslint-disable-next-line no-var var FontInspector = (function FontInspectorClosure() { var fonts; var active = false; @@ -158,6 +159,8 @@ var FontInspector = (function FontInspectorClosure() { var opMap; // Manages all the page steppers. +// +// eslint-disable-next-line no-var var StepperManager = (function StepperManagerClosure() { var steppers = []; var stepperDiv = null; @@ -239,8 +242,8 @@ var StepperManager = (function StepperManagerClosure() { }; })(); -// The stepper for each page's IRQueue. -var Stepper = (function StepperClosure() { +// The stepper for each page's operatorList. +const Stepper = (function StepperClosure() { // Shorter way to create element and optionally set textContent. function c(tag, textContent) { var d = document.createElement(tag); @@ -282,17 +285,18 @@ var Stepper = (function StepperClosure() { } // eslint-disable-next-line no-shadow - function Stepper(panel, pageIndex, initialBreakPoints) { - this.panel = panel; - this.breakPoint = 0; - this.nextBreakPoint = null; - this.pageIndex = pageIndex; - this.breakPoints = initialBreakPoints; - this.currentIdx = -1; - this.operatorListIdx = 0; - } - Stepper.prototype = { - init: function init(operatorList) { + class Stepper { + constructor(panel, pageIndex, initialBreakPoints) { + this.panel = panel; + this.breakPoint = 0; + this.nextBreakPoint = null; + this.pageIndex = pageIndex; + this.breakPoints = initialBreakPoints; + this.currentIdx = -1; + this.operatorListIdx = 0; + } + + init(operatorList) { var panel = this.panel; var content = c("div", "c=continue, s=step"); var table = c("table"); @@ -307,8 +311,9 @@ var Stepper = (function StepperClosure() { panel.appendChild(content); this.table = table; this.updateOperatorList(operatorList); - }, - updateOperatorList: function updateOperatorList(operatorList) { + } + + updateOperatorList(operatorList) { var self = this; function cboxOnClick() { @@ -383,8 +388,9 @@ var Stepper = (function StepperClosure() { } this.operatorListIdx = operatorList.fnArray.length; this.table.appendChild(chunk); - }, - getNextBreakPoint: function getNextBreakPoint() { + } + + getNextBreakPoint() { this.breakPoints.sort(function (a, b) { return a - b; }); @@ -394,33 +400,33 @@ var Stepper = (function StepperClosure() { } } return null; - }, - breakIt: function breakIt(idx, callback) { + } + + breakIt(idx, callback) { StepperManager.selectStepper(this.pageIndex, true); - var self = this; - var dom = document; - self.currentIdx = idx; - var listener = function (e) { - switch (e.keyCode) { + this.currentIdx = idx; + + const listener = evt => { + switch (evt.keyCode) { case 83: // step - dom.removeEventListener("keydown", listener); - self.nextBreakPoint = self.currentIdx + 1; - self.goTo(-1); + document.removeEventListener("keydown", listener); + this.nextBreakPoint = this.currentIdx + 1; + this.goTo(-1); callback(); break; case 67: // continue - dom.removeEventListener("keydown", listener); - var breakPoint = self.getNextBreakPoint(); - self.nextBreakPoint = breakPoint; - self.goTo(-1); + document.removeEventListener("keydown", listener); + this.nextBreakPoint = this.getNextBreakPoint(); + this.goTo(-1); callback(); break; } }; - dom.addEventListener("keydown", listener); - self.goTo(idx); - }, - goTo: function goTo(idx) { + document.addEventListener("keydown", listener); + this.goTo(idx); + } + + goTo(idx) { var allRows = this.panel.getElementsByClassName("line"); for (var x = 0, xx = allRows.length; x < xx; ++x) { var row = allRows[x]; @@ -431,11 +437,12 @@ var Stepper = (function StepperClosure() { row.style.backgroundColor = null; } } - }, - }; + } + } return Stepper; })(); +// eslint-disable-next-line no-var var Stats = (function Stats() { var stats = []; function clear(node) { From d99bc5091c13bb82ef72219de1c91c10e0b1ad34 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Tue, 4 May 2021 14:37:16 +0200 Subject: [PATCH 2/2] [web/debugger.js] Enable the ESLint `no-var` rule These changes were made *mostly* automatically, using `gulp lint --fix`, with the following manual changes: ```diff diff --git a/web/debugger.js b/web/debugger.js index 1cda4066e..6f8b4a9f0 100644 --- a/web/debugger.js +++ b/web/debugger.js @@ -264,10 +264,9 @@ const Stepper = (function StepperClosure() { } if ("length" in args) { // array - let simpleArgs = [], - i, - ii; - const MAX_ITEMS = 10; + const MAX_ITEMS = 10, + simpleArgs = []; + let i, ii; for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) { simpleArgs.push(simplifyArgs(args[i])); } @@ -511,11 +510,8 @@ window.PDFBug = (function PDFBugClosure() { return { tools: [FontInspector, StepperManager, Stats], enable(ids) { - let all = false, - tools = this.tools; - if (ids.length === 1 && ids[0] === "all") { - all = true; - } + const all = ids.length === 1 && ids[0] === "all"; + const tools = this.tools; for (let i = 0; i < tools.length; ++i) { const tool = tools[i]; if (all || ids.includes(tool.id)) { ``` --- web/debugger.js | 201 +++++++++++++++++++++++------------------------- 1 file changed, 98 insertions(+), 103 deletions(-) diff --git a/web/debugger.js b/web/debugger.js index 437d708ca..6f8b4a9f0 100644 --- a/web/debugger.js +++ b/web/debugger.js @@ -12,15 +12,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* eslint-disable no-var */ "use strict"; // eslint-disable-next-line no-var var FontInspector = (function FontInspectorClosure() { - var fonts; - var active = false; - var fontAttribute = "data-font-name"; + let fonts; + let active = false; + const fontAttribute = "data-font-name"; function removeSelection() { const divs = document.querySelectorAll(`span[${fontAttribute}]`); for (const div of divs) { @@ -48,10 +47,10 @@ var FontInspector = (function FontInspectorClosure() { ) { return; } - var fontName = e.target.dataset.fontName; - var selects = document.getElementsByTagName("input"); - for (var i = 0; i < selects.length; ++i) { - var select = selects[i]; + const fontName = e.target.dataset.fontName; + const selects = document.getElementsByTagName("input"); + for (let i = 0; i < selects.length; ++i) { + const select = selects[i]; if (select.dataset.fontName !== fontName) { continue; } @@ -67,8 +66,8 @@ var FontInspector = (function FontInspectorClosure() { panel: null, manager: null, init: function init(pdfjsLib) { - var panel = this.panel; - var tmp = document.createElement("button"); + const panel = this.panel; + const tmp = document.createElement("button"); tmp.addEventListener("click", resetSelection); tmp.textContent = "Refresh"; panel.appendChild(tmp); @@ -96,25 +95,25 @@ var FontInspector = (function FontInspectorClosure() { // FontInspector specific functions. fontAdded: function fontAdded(fontObj, url) { function properties(obj, list) { - var moreInfo = document.createElement("table"); - for (var i = 0; i < list.length; i++) { - var tr = document.createElement("tr"); - var td1 = document.createElement("td"); + const moreInfo = document.createElement("table"); + for (let i = 0; i < list.length; i++) { + const tr = document.createElement("tr"); + const td1 = document.createElement("td"); td1.textContent = list[i]; tr.appendChild(td1); - var td2 = document.createElement("td"); + const td2 = document.createElement("td"); td2.textContent = obj[list[i]].toString(); tr.appendChild(td2); moreInfo.appendChild(tr); } return moreInfo; } - var moreInfo = properties(fontObj, ["name", "type"]); + const moreInfo = properties(fontObj, ["name", "type"]); const fontName = fontObj.loadedName; - var font = document.createElement("div"); - var name = document.createElement("span"); + const font = document.createElement("div"); + const name = document.createElement("span"); name.textContent = fontName; - var download = document.createElement("a"); + const download = document.createElement("a"); if (url) { url = /url\(['"]?([^)"']+)/.exec(url); download.href = url[1]; @@ -124,7 +123,7 @@ var FontInspector = (function FontInspectorClosure() { ); } download.textContent = "Download"; - var logIt = document.createElement("a"); + const logIt = document.createElement("a"); logIt.href = ""; logIt.textContent = "Log"; logIt.addEventListener("click", function (event) { @@ -156,17 +155,17 @@ var FontInspector = (function FontInspectorClosure() { }; })(); -var opMap; +let opMap; // Manages all the page steppers. // // eslint-disable-next-line no-var var StepperManager = (function StepperManagerClosure() { - var steppers = []; - var stepperDiv = null; - var stepperControls = null; - var stepperChooser = null; - var breakPoints = Object.create(null); + let steppers = []; + let stepperDiv = null; + let stepperControls = null; + let stepperChooser = null; + let breakPoints = Object.create(null); return { // Properties/functions needed by PDFBug. id: "Stepper", @@ -174,7 +173,7 @@ var StepperManager = (function StepperManagerClosure() { panel: null, manager: null, init: function init(pdfjsLib) { - var self = this; + const self = this; stepperControls = document.createElement("div"); stepperChooser = document.createElement("select"); stepperChooser.addEventListener("change", function (event) { @@ -189,7 +188,7 @@ var StepperManager = (function StepperManagerClosure() { } opMap = Object.create(null); - for (var key in pdfjsLib.OPS) { + for (const key in pdfjsLib.OPS) { opMap[pdfjsLib.OPS[key]] = key; } }, @@ -202,17 +201,17 @@ var StepperManager = (function StepperManagerClosure() { active: false, // Stepper specific functions. create: function create(pageIndex) { - var debug = document.createElement("div"); + const debug = document.createElement("div"); debug.id = "stepper" + pageIndex; debug.hidden = true; debug.className = "stepper"; stepperDiv.appendChild(debug); - var b = document.createElement("option"); + const b = document.createElement("option"); b.textContent = "Page " + (pageIndex + 1); b.value = pageIndex; stepperChooser.appendChild(b); - var initBreakPoints = breakPoints[pageIndex] || []; - var stepper = new Stepper(debug, pageIndex, initBreakPoints); + const initBreakPoints = breakPoints[pageIndex] || []; + const stepper = new Stepper(debug, pageIndex, initBreakPoints); steppers.push(stepper); if (steppers.length === 1) { this.selectStepper(pageIndex, false); @@ -220,18 +219,18 @@ var StepperManager = (function StepperManagerClosure() { return stepper; }, selectStepper: function selectStepper(pageIndex, selectPanel) { - var i; + let i; pageIndex = pageIndex | 0; if (selectPanel) { this.manager.selectPanel(this); } for (i = 0; i < steppers.length; ++i) { - var stepper = steppers[i]; + const stepper = steppers[i]; stepper.panel.hidden = stepper.pageIndex !== pageIndex; } - var options = stepperChooser.options; + const options = stepperChooser.options; for (i = 0; i < options.length; ++i) { - var option = options[i]; + const option = options[i]; option.selected = (option.value | 0) === pageIndex; } }, @@ -246,7 +245,7 @@ var StepperManager = (function StepperManagerClosure() { const Stepper = (function StepperClosure() { // Shorter way to create element and optionally set textContent. function c(tag, textContent) { - var d = document.createElement(tag); + const d = document.createElement(tag); if (textContent) { d.textContent = textContent; } @@ -255,7 +254,7 @@ const Stepper = (function StepperClosure() { function simplifyArgs(args) { if (typeof args === "string") { - var MAX_STRING_LENGTH = 75; + const MAX_STRING_LENGTH = 75; return args.length <= MAX_STRING_LENGTH ? args : args.substring(0, MAX_STRING_LENGTH) + "..."; @@ -265,10 +264,9 @@ const Stepper = (function StepperClosure() { } if ("length" in args) { // array - var simpleArgs = [], - i, - ii; - var MAX_ITEMS = 10; + const MAX_ITEMS = 10, + simpleArgs = []; + let i, ii; for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) { simpleArgs.push(simplifyArgs(args[i])); } @@ -277,8 +275,8 @@ const Stepper = (function StepperClosure() { } return simpleArgs; } - var simpleObj = {}; - for (var key in args) { + const simpleObj = {}; + for (const key in args) { simpleObj[key] = simplifyArgs(args[key]); } return simpleObj; @@ -297,12 +295,12 @@ const Stepper = (function StepperClosure() { } init(operatorList) { - var panel = this.panel; - var content = c("div", "c=continue, s=step"); - var table = c("table"); + const panel = this.panel; + const content = c("div", "c=continue, s=step"); + const table = c("table"); content.appendChild(table); table.cellSpacing = 0; - var headerRow = c("tr"); + const headerRow = c("tr"); table.appendChild(headerRow); headerRow.appendChild(c("th", "Break")); headerRow.appendChild(c("th", "Idx")); @@ -314,10 +312,10 @@ const Stepper = (function StepperClosure() { } updateOperatorList(operatorList) { - var self = this; + const self = this; function cboxOnClick() { - var x = +this.dataset.idx; + const x = +this.dataset.idx; if (this.checked) { self.breakPoints.push(x); } else { @@ -326,26 +324,26 @@ const Stepper = (function StepperClosure() { StepperManager.saveBreakPoints(self.pageIndex, self.breakPoints); } - var MAX_OPERATORS_COUNT = 15000; + const MAX_OPERATORS_COUNT = 15000; if (this.operatorListIdx > MAX_OPERATORS_COUNT) { return; } - var chunk = document.createDocumentFragment(); - var operatorsToDisplay = Math.min( + const chunk = document.createDocumentFragment(); + const operatorsToDisplay = Math.min( MAX_OPERATORS_COUNT, operatorList.fnArray.length ); - for (var i = this.operatorListIdx; i < operatorsToDisplay; i++) { - var line = c("tr"); + for (let i = this.operatorListIdx; i < operatorsToDisplay; i++) { + const line = c("tr"); line.className = "line"; line.dataset.idx = i; chunk.appendChild(line); - var checked = this.breakPoints.includes(i); - var args = operatorList.argsArray[i] || []; + const checked = this.breakPoints.includes(i); + const args = operatorList.argsArray[i] || []; - var breakCell = c("td"); - var cbox = c("input"); + const breakCell = c("td"); + const cbox = c("input"); cbox.type = "checkbox"; cbox.className = "points"; cbox.checked = checked; @@ -355,14 +353,14 @@ const Stepper = (function StepperClosure() { breakCell.appendChild(cbox); line.appendChild(breakCell); line.appendChild(c("td", i.toString())); - var fn = opMap[operatorList.fnArray[i]]; - var decArgs = args; + const fn = opMap[operatorList.fnArray[i]]; + let decArgs = args; if (fn === "showText") { - var glyphs = args[0]; - var newArgs = []; - var str = []; - for (var j = 0; j < glyphs.length; j++) { - var glyph = glyphs[j]; + const glyphs = args[0]; + const newArgs = []; + let str = []; + for (let j = 0; j < glyphs.length; j++) { + const glyph = glyphs[j]; if (typeof glyph === "object" && glyph !== null) { str.push(glyph.fontChar); } else { @@ -382,7 +380,7 @@ const Stepper = (function StepperClosure() { line.appendChild(c("td", JSON.stringify(simplifyArgs(decArgs)))); } if (operatorsToDisplay < operatorList.fnArray.length) { - var lastCell = c("td", "..."); + const lastCell = c("td", "..."); lastCell.colspan = 4; chunk.appendChild(lastCell); } @@ -394,7 +392,7 @@ const Stepper = (function StepperClosure() { this.breakPoints.sort(function (a, b) { return a - b; }); - for (var i = 0; i < this.breakPoints.length; i++) { + for (let i = 0; i < this.breakPoints.length; i++) { if (this.breakPoints[i] > this.currentIdx) { return this.breakPoints[i]; } @@ -427,9 +425,9 @@ const Stepper = (function StepperClosure() { } goTo(idx) { - var allRows = this.panel.getElementsByClassName("line"); - for (var x = 0, xx = allRows.length; x < xx; ++x) { - var row = allRows[x]; + const allRows = this.panel.getElementsByClassName("line"); + for (let x = 0, xx = allRows.length; x < xx; ++x) { + const row = allRows[x]; if ((row.dataset.idx | 0) === idx) { row.style.backgroundColor = "rgb(251,250,207)"; row.scrollIntoView(); @@ -444,14 +442,14 @@ const Stepper = (function StepperClosure() { // eslint-disable-next-line no-var var Stats = (function Stats() { - var stats = []; + let stats = []; function clear(node) { while (node.hasChildNodes()) { node.removeChild(node.lastChild); } } function getStatIndex(pageNumber) { - for (var i = 0, ii = stats.length; i < ii; ++i) { + for (let i = 0, ii = stats.length; i < ii; ++i) { if (stats[i].pageNumber === pageNumber) { return i; } @@ -472,18 +470,18 @@ var Stats = (function Stats() { if (!stat) { return; } - var statsIndex = getStatIndex(pageNumber); + const statsIndex = getStatIndex(pageNumber); if (statsIndex !== false) { const b = stats[statsIndex]; this.panel.removeChild(b.div); stats.splice(statsIndex, 1); } - var wrapper = document.createElement("div"); + const wrapper = document.createElement("div"); wrapper.className = "stats"; - var title = document.createElement("div"); + const title = document.createElement("div"); title.className = "title"; title.textContent = "Page: " + pageNumber; - var statsDiv = document.createElement("div"); + const statsDiv = document.createElement("div"); statsDiv.textContent = stat.toString(); wrapper.appendChild(title); wrapper.appendChild(statsDiv); @@ -492,7 +490,7 @@ var Stats = (function Stats() { return a.pageNumber - b.pageNumber; }); clear(this.panel); - for (var i = 0, ii = stats.length; i < ii; ++i) { + for (let i = 0, ii = stats.length; i < ii; ++i) { this.panel.appendChild(stats[i].div); } }, @@ -505,20 +503,17 @@ var Stats = (function Stats() { // Manages all the debugging tools. window.PDFBug = (function PDFBugClosure() { - var panelWidth = 300; - var buttons = []; - var activePanel = null; + const panelWidth = 300; + const buttons = []; + let activePanel = null; return { tools: [FontInspector, StepperManager, Stats], enable(ids) { - var all = false, - tools = this.tools; - if (ids.length === 1 && ids[0] === "all") { - all = true; - } - for (var i = 0; i < tools.length; ++i) { - var tool = tools[i]; + const all = ids.length === 1 && ids[0] === "all"; + const tools = this.tools; + for (let i = 0; i < tools.length; ++i) { + const tool = tools[i]; if (all || ids.includes(tool.id)) { tool.enabled = true; } @@ -526,9 +521,9 @@ window.PDFBug = (function PDFBugClosure() { if (!all) { // Sort the tools by the order they are enabled. tools.sort(function (a, b) { - var indexA = ids.indexOf(a.id); + let indexA = ids.indexOf(a.id); indexA = indexA < 0 ? tools.length : indexA; - var indexB = ids.indexOf(b.id); + let indexB = ids.indexOf(b.id); indexB = indexB < 0 ? tools.length : indexB; return indexA - indexB; }); @@ -544,14 +539,14 @@ window.PDFBug = (function PDFBugClosure() { * Panel * ... */ - var ui = document.createElement("div"); + const ui = document.createElement("div"); ui.id = "PDFBug"; - var controls = document.createElement("div"); + const controls = document.createElement("div"); controls.setAttribute("class", "controls"); ui.appendChild(controls); - var panels = document.createElement("div"); + const panels = document.createElement("div"); panels.setAttribute("class", "panels"); ui.appendChild(panels); @@ -559,12 +554,12 @@ window.PDFBug = (function PDFBugClosure() { container.style.right = panelWidth + "px"; // Initialize all the debugging tools. - var tools = this.tools; - var self = this; - for (var i = 0; i < tools.length; ++i) { - var tool = tools[i]; - var panel = document.createElement("div"); - var panelButton = document.createElement("button"); + const tools = this.tools; + const self = this; + for (let i = 0; i < tools.length; ++i) { + const tool = tools[i]; + const panel = document.createElement("div"); + const panelButton = document.createElement("button"); panelButton.textContent = tool.name; panelButton.addEventListener( "click", @@ -595,7 +590,7 @@ window.PDFBug = (function PDFBugClosure() { this.selectPanel(0); }, cleanup() { - for (var i = 0, ii = this.tools.length; i < ii; i++) { + for (let i = 0, ii = this.tools.length; i < ii; i++) { if (this.tools[i].enabled) { this.tools[i].cleanup(); } @@ -609,9 +604,9 @@ window.PDFBug = (function PDFBugClosure() { return; } activePanel = index; - var tools = this.tools; - for (var j = 0; j < tools.length; ++j) { - var isActive = j === index; + const tools = this.tools; + for (let j = 0; j < tools.length; ++j) { + const isActive = j === index; buttons[j].classList.toggle("active", isActive); tools[j].active = isActive; tools[j].panel.hidden = !isActive;