Skip to content

Commit 0fd88e8

Browse files
igorlogiusigorlogius
committed
fix(#18): viewport jumping/rendering issue on large values
moves editor into new window to prevent datalose on focus switch Value cell inline editor replaced with dialog bases input (#18) some commands have been removed since those cant work with the new window bases approch (todo)
1 parent e2e51d2 commit 0fd88e8

File tree

5 files changed

+113
-52
lines changed

5 files changed

+113
-52
lines changed

‎sources/localstorage-editor/background.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ browser.runtime.onMessage.addListener((data, sender) => {
1616

1717
browser.browserAction.disable();
1818

19-
browser.commands.onCommand.addListener(async (cmd, data) => {
20-
await browser.browserAction.openPopup();
21-
try {
22-
await browser.runtime.sendMessage({ cmd });
23-
} catch (e) {
24-
// noop popup not open
25-
browser.browserAction.openPopup();
26-
}
19+
browser.browserAction.onClicked.addListener((tab) => {
20+
browser.windows.create({
21+
height: 460,
22+
width: 640,
23+
titlePreface: new URL(tab.url).hostname,
24+
type: "popup",
25+
url: "popup.html?tabId=" + tab.id,
26+
});
2727
});

‎sources/localstorage-editor/manifest.json‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,10 @@
55
"scripts": ["background.js"]
66
},
77
"browser_action": {
8-
"default_area": "navbar",
9-
"default_popup": "popup.html"
8+
"default_area": "navbar"
109
},
1110
"commands": {
12-
"_execute_browser_action": {
13-
"description": "Open Toolbar Panel"
14-
},
15-
"addbtn": {
16-
"description": "Add Storage Entry"
17-
},
18-
"delbtn": {
19-
"description": "Delete Selected"
20-
},
21-
"savbtn": {
22-
"description": "Save Changes"
23-
},
24-
"disbtn": {
25-
"description": "Discard Changes"
26-
},
27-
"impbtn": {
28-
"description": "Clipboard Import"
29-
},
30-
"cpybtn": {
31-
"description": "Copy Selected"
32-
},
33-
"expbtn": {
34-
"description": "Download Selected"
35-
}
11+
"_execute_browser_action": {}
3612
},
3713
"content_scripts": [
3814
{

‎sources/localstorage-editor/popup.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
body {
22
background: lightgray;
3-
width: 700px;
3+
/*width: 700px;*/
44
padding: 3px;
55
}
66

‎sources/localstorage-editor/popup.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,42 @@
55
<link href="popup.css" rel="stylesheet" />
66
</head>
77
<body>
8+
<dialog id="editDialog" style="width: 99%; height: 99%">
9+
<form>
10+
<div style="float: right">
11+
<button value="cancel" formmethod="dialog">Discard</button>
12+
<button id="confirmBtn" value="default">Save</button>
13+
</div>
14+
15+
<p>
16+
<label>
17+
Storage:
18+
<select disabled>
19+
<option value="Local">Local</option>
20+
<option value="Session">Session</option>
21+
</select>
22+
</label>
23+
</p>
24+
25+
<p>
26+
<label>
27+
Key:
28+
<input style="width: 100%" value="" disabled />
29+
</label>
30+
</p>
31+
32+
<p>
33+
<label>
34+
Value:
35+
<textarea
36+
style="width: 100%; min-height: 20em"
37+
spellcheck="false"
38+
></textarea>
39+
</label>
40+
</p>
41+
</form>
42+
</dialog>
43+
844
<fieldset>
945
<button id="addbtn" title="add new value">&#10039;Add</button>
1046
<button id="delbtn" title="delete selected">&#10005;Delete</button>

‎sources/localstorage-editor/popup.js‎

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@ async function getFromStorage(type, id, fallback) {
88
let table = null;
99
let tableData = null;
1010

11+
const TABID = parseInt(
12+
new URLSearchParams(window.location.search).get("tabId"),
13+
);
14+
15+
const editDialog = document.getElementById("editDialog");
16+
const confirmBtn = editDialog.querySelector("#confirmBtn");
17+
const selectEl = editDialog.querySelector("select"); // store
18+
const inputEl = editDialog.querySelector("input"); // key
19+
const textareaEl = editDialog.querySelector("textarea"); // value
20+
21+
let editorTempCell = null;
22+
1123
// button refs
1224
const impbtn = document.getElementById("impbtn");
1325
const savbtn = document.getElementById("savbtn");
@@ -20,14 +32,14 @@ const log = document.getElementById("log");
2032
const tip = document.getElementById("tip");
2133

2234
const tips = [
23-
"Holding shift and click dragging over the row selector column to invert the selection state",
2435
"Use Copy & Import to quickly duplicate items",
2536
"Filtering doenst not change the item selection",
2637
"Copy & Download actions only take selected items into account",
2738
"Imported items get autoselected",
2839
"Cell validation erros get shown, when hovering over a cell",
29-
"Use the row handle to reorder rows for copy or downloading",
30-
"Use shift+enter in a value cell to submit",
40+
"Use the row handle to reorder rows to copy or download them",
41+
"Discard will drop all all not submitted changes and reload values from storage",
42+
"Dont close the related tab or the editor wont work anymore.",
3143
];
3244

3345
let validateAndHighlightTimer;
@@ -95,7 +107,7 @@ function getTimeStampStr() {
95107
async function getTblData() {
96108
let data = [];
97109
try {
98-
data = await browser.tabs.executeScript({
110+
data = await browser.tabs.executeScript(TABID, {
99111
file: "getStorage.js",
100112
});
101113
} catch (e) {
@@ -160,11 +172,12 @@ savbtn.addEventListener("click", async () => {
160172
return;
161173
}
162174
const data = table.getData();
163-
const tabs = await browser.tabs.query({
175+
/*const tabs = await browser.tabs.query({
164176
currentWindow: true,
165177
active: true,
166-
});
167-
browser.tabs.sendMessage(tabs[0].id, data);
178+
});*/
179+
//browser.tabs.sendMessage(tabs[0].id, data);
180+
browser.tabs.sendMessage(TABID, data);
168181
//unhighlightChange();
169182
table.alert("Syncing Storage ... ", "msg");
170183
setTimeout(function () {
@@ -187,11 +200,8 @@ expbtn.addEventListener("click", async () => {
187200
});
188201

189202
if (expData.length > 0) {
190-
const tabs = await browser.tabs.query({
191-
currentWindow: true,
192-
active: true,
193-
});
194-
const url = new URL(tabs[0].url);
203+
const tab = await browser.tabs.get(TABID);
204+
const url = new URL(tab.url);
195205

196206
const content = JSON.stringify(expData, null, 4);
197207
let dl = document.createElement("a");
@@ -306,7 +316,13 @@ async function onDOMContentLoaded() {
306316

307317
table = new Tabulator("#mainTable", {
308318
autoColumns: true,
309-
height: "460px",
319+
/*height: "460px",*/
320+
//virtualDomBuffer:99999, //set virtual DOM buffer to 300px
321+
//renderVertical:"basic", //disable virtual DOM rendering
322+
//virtualDom:false, // also disable virtual DOM rending ??? wtf
323+
height: "100%",
324+
maxHeight: "100%",
325+
virtualDom: false,
310326
placeholder: "No items found",
311327
layout: "fitDataStretch",
312328
pagination: false,
@@ -409,14 +425,14 @@ async function onDOMContentLoaded() {
409425
field: "value",
410426
headerFilter: "input",
411427
headerFilterPlaceholder: "Filter",
412-
editor: "textarea",
428+
/*editor: "textarea",
413429
editorParams: {
414430
elementAttributes: {
415431
spellcheck: "false",
416432
},
417433
verticalNavigation: "editor",
418434
shiftEnterSubmit: true,
419-
},
435+
},*/
420436
formatter: "plaintext",
421437
},
422438
],
@@ -463,6 +479,39 @@ async function onDOMContentLoaded() {
463479
}
464480
*/
465481
});
482+
483+
table.on("cellClick", function (e, cell) {
484+
//e - the click event object
485+
//cell - cell component
486+
//e - the click event object
487+
//row - row component
488+
const field = cell.getField();
489+
490+
if (field === "value") {
491+
editorTempCell = cell;
492+
const rowData = cell.getRow().getData();
493+
textareaEl.value = rowData.value;
494+
selectEl.value = rowData.store;
495+
inputEl.value = rowData.key;
496+
editDialog.showModal();
497+
textareaEl.focus();
498+
}
499+
});
500+
501+
// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
502+
/*
503+
editDialog.addEventListener("close", (e) => {
504+
//if(editDialog.returnValue !== "default")
505+
//console.debug(editDialog.returnValue);
506+
});
507+
*/
508+
509+
// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
510+
confirmBtn.addEventListener("click", (event) => {
511+
event.preventDefault(); // We don't want to submit this fake form
512+
editorTempCell.setValue(textareaEl.value, true);
513+
editDialog.close(); // Have to send the select box value here.
514+
});
466515
}
467516

468517
function onChange(evt) {
@@ -518,10 +567,10 @@ function onChange(evt) {
518567
let el = document.getElementById(id);
519568
el.addEventListener("input", onChange);
520569

521-
browser.runtime.onMessage.addListener((data, sender) => {
570+
/*browser.runtime.onMessage.addListener((data, sender) => {
522571
console.debug(data, sender);
523572
document.getElementById(data.cmd).click();
524-
});
573+
});*/
525574
});
526575

527576
// init

0 commit comments

Comments
 (0)