From dc0e7f5fc8f2a5a5e15cb06f66b0fec1527f2d7b Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Mon, 28 Dec 2020 18:29:07 +0530
Subject: [PATCH 1/9] #seConfirmDialog confirm change to elix alertdialog

---
 src/editor/dialogs/index.js           |  1 +
 src/editor/dialogs/seConfirmDialog.js | 13 +++++++++++++
 src/editor/svgedit.js                 | 24 ++++++++++++------------
 3 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 src/editor/dialogs/seConfirmDialog.js

diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index 5e22a5af..793bde48 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -4,3 +4,4 @@ import './svgSourceDialog.js';
 import './cmenuDialog.js';
 import './cmenuLayersDialog.js';
 import './seSelectDialog.js';
+import './seConfirmDialog.js';
diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js
new file mode 100644
index 00000000..b2502ff1
--- /dev/null
+++ b/src/editor/dialogs/seConfirmDialog.js
@@ -0,0 +1,13 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+
+const dialog = new AlertDialog();
+const seConfirm = async (text, choices) => {
+  dialog.textContent = text;
+  dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
+  dialog.open();
+  const response = await dialog.whenClosed();
+  return response.choice;
+};
+
+window.seConfirm = seConfirm;
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index c8709ded..56cc07d0 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1289,7 +1289,7 @@ editor.init = () => {
 
   // fired when user wants to move elements to another layer
   let promptMoveLayerOnce = false;
-  $('#selLayerNames').change((evt) => {
+  $('#selLayerNames').change( async(evt) => {
     const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
     const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
     /**
@@ -1307,8 +1307,8 @@ editor.init = () => {
       if (promptMoveLayerOnce) {
         moveToLayer(true);
       } else {
-        const ok = confirm(confirmStr);
-        if (!ok) {
+        const ok = await seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]);
+        if (ok === uiStrings.common.cancel) {
           return;
         }
         moveToLayer(true);
@@ -1666,10 +1666,10 @@ editor.init = () => {
    * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
    * @returns {void}
    */
-  const clickClear = () => {
+  const clickClear = async() => {
     const [x, y] = editor.configObj.curConfig.dimensions;
-    const ok = confirm(uiStrings.notification.QwantToClear);
-    if (!ok) {
+    const cancel = await seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
+    if (cancel === uiStrings.common.cancel) {
       return;
     }
     editor.leftPanelHandlers.clickSelect();
@@ -1846,7 +1846,7 @@ editor.init = () => {
   * @param {Event} e
   * @returns {void} Resolves to `undefined`
   */
-  const saveSourceEditor = (e) => {
+  const saveSourceEditor = async (e) => {
     const $editorDialog = document.getElementById('se-svg-editor-dialog');
     if ($editorDialog.getAttribute('dialog') !== 'open') return;
     const saveChanges = () => {
@@ -1858,8 +1858,8 @@ editor.init = () => {
     };
 
     if (!svgCanvas.setSvgString(e.detail.value)) {
-      const ok = confirm(uiStrings.notification.QerrorsRevertToSource);
-      if (!ok) {
+      const resp = await seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]);
+      if (resp === uiStrings.common.cancel) {
         return;
       }
       saveChanges();
@@ -1955,7 +1955,7 @@ editor.init = () => {
   * @param {Event} e
   * @returns {void} Resolves to `undefined`
   */
-  const cancelOverlays = (e) => {
+  const cancelOverlays = async (e) => {
     $('#dialog_box').hide();
     const $editorDialog = document.getElementById('se-svg-editor-dialog');
     const editingsource = $editorDialog.getAttribute('dialog') === 'open';
@@ -1969,8 +1969,8 @@ editor.init = () => {
     if (editingsource) {
       const origSource = svgCanvas.getSvgString();
       if (origSource !== e.detail.value) {
-        const ok = confirm(uiStrings.notification.QignoreSourceChanges);
-        if (ok) {
+        const resp = await seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]);
+        if (resp === uiStrings.common.ok) {
           hideSourceEditor();
         }
       } else {

From 4104372a37901ab62859cd6838572dec416f8097 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Mon, 28 Dec 2020 20:10:06 +0530
Subject: [PATCH 2/9] #seConfirmDialog alert change to elix alert dialog

---
 src/editor/dialogs/index.js                   |  1 +
 src/editor/dialogs/seAlertDialog.js           | 59 +++++++++++++++++++
 src/editor/extensions/ext-imagelib/index.js   |  3 +-
 .../extensions/ext-imagelib/openclipart.js    |  3 +-
 .../extensions/ext-mathjax/ext-mathjax.js     |  4 +-
 .../ext-server_moinsave.js                    |  3 +-
 .../ext-webappfind/ext-webappfind.js          |  3 +-
 src/editor/panels/LayersPanel.js              |  6 +-
 src/editor/panels/TopPanelHandlers.js         |  3 +-
 src/editor/svgedit.js                         | 19 +++---
 10 files changed, 81 insertions(+), 23 deletions(-)
 create mode 100644 src/editor/dialogs/seAlertDialog.js

diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index 793bde48..e45048fd 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -5,3 +5,4 @@ import './cmenuDialog.js';
 import './cmenuLayersDialog.js';
 import './seSelectDialog.js';
 import './seConfirmDialog.js';
+import './seAlertDialog.js';
diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
new file mode 100644
index 00000000..bf07001a
--- /dev/null
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -0,0 +1,59 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+/**
+ * @class SeAlertDialog
+ */
+export class SeAlertDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this.dialog = new AlertDialog();
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['title'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    switch (name) {
+    case 'title':
+      this.dialog.textContent = newValue;
+      this.dialog.open();
+      break;
+    default:
+      super.attributeChangedCallback(name, oldValue, newValue);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
+}
+
+// Register
+customElements.define('se-alert-dialog', SeAlertDialog);
diff --git a/src/editor/extensions/ext-imagelib/index.js b/src/editor/extensions/ext-imagelib/index.js
index 6521469a..2e48c220 100644
--- a/src/editor/extensions/ext-imagelib/index.js
+++ b/src/editor/extensions/ext-imagelib/index.js
@@ -32,8 +32,7 @@ $('a').click(function () {
         data = canvas.toDataURL();
       } catch (err) {
         // This fails in Firefox with `file:///` URLs :(
-        // Todo: This could use a generic alert library instead
-        alert('Data URL conversion failed: ' + err); // eslint-disable-line no-alert
+        document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
         data = '';
       }
       post({href, data});
diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js
index 9563974b..d66b3e84 100644
--- a/src/editor/extensions/ext-imagelib/openclipart.js
+++ b/src/editor/extensions/ext-imagelib/openclipart.js
@@ -39,8 +39,7 @@ async function processResults (url) {
   // console.log('json', json);
 
   if (!json || json.msg !== 'success') {
-    // Todo: This could use a generic alert library instead
-    alert('There was a problem downloading the results'); // eslint-disable-line no-alert
+    document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
     return;
   }
   const {payload, info: {
diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js
index 133c2375..85687cbe 100644
--- a/src/editor/extensions/ext-mathjax/ext-mathjax.js
+++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js
@@ -202,8 +202,8 @@ export default {
               });
             } catch (e) {
               console.log('Failed loading MathJax.'); // eslint-disable-line no-console
-              // eslint-disable-next-line no-alert
-              alert('Failed loading MathJax. You will not be able to change the mathematics.');
+              // eslint-disable-next-line max-len
+              document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
             }
           }
         }
diff --git a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
index a0bf4b38..be51a83a 100644
--- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
+++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
@@ -64,8 +64,7 @@ export default {
           <input type="hidden" name="contenttype" value="application/x-svgdraw">
         `).appendTo('body')
           .submit().remove();
-        // eslint-disable-next-line no-alert
-        alert(strings.saved);
+        document.getElementById('se-alert-dialog').title = strings.saved;
         top.window.location = '/' + name;
       }
     });
diff --git a/src/editor/extensions/ext-webappfind/ext-webappfind.js b/src/editor/extensions/ext-webappfind/ext-webappfind.js
index 9a4cf89a..176b226a 100644
--- a/src/editor/extensions/ext-webappfind/ext-webappfind.js
+++ b/src/editor/extensions/ext-webappfind/ext-webappfind.js
@@ -63,8 +63,7 @@ export default {
           } */
           break;
         case 'save-end':
-          // eslint-disable-next-line no-alert
-          alert(`save complete for pathID ${pathID}!`);
+          document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
           break;
         default:
           throw new Error('Unexpected WebAppFind event type');
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 1b32e4de..400a3bd8 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -156,7 +156,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      alert(this.uiStrings.notification.dupeLayerName);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
       return;
     }
     this.svgCanvas.createLayer(newName);
@@ -190,7 +190,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      alert(this.uiStrings.notification.dupeLayerName);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
       return;
     }
     this.svgCanvas.cloneLayer(newName);
@@ -235,7 +235,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
     if (!newName) { return; }
     if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      alert(this.uiStrings.notification.layerHasThatName);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
       return;
     }
     this.svgCanvas.renameCurrentLayer(newName);
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 5134418f..2dac9259 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/src/editor/panels/TopPanelHandlers.js
@@ -403,8 +403,7 @@ class TopPanelHandlers {
 
     if (!valid) {
       e.target.value = this.selectedElement().getAttribute(attr);
-      // eslint-disable-next-line no-alert
-      alert(this.uiStrings.notification.invalidAttrValGiven);
+      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
       return false;
     }
 
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 56cc07d0..ce81af8f 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -222,6 +222,10 @@ editor.init = () => {
     const dialogBox = document.createElement('se-cmenu_canvas-dialog');
     dialogBox.setAttribute('id', 'se-cmenu_canvas');
     document.body.append(dialogBox);
+    // alertDialog added to DOM
+    const alertBox = document.createElement('se-alert-dialog');
+    alertBox.setAttribute('id', 'se-alert-dialog');
+    document.body.append(alertBox);
   } catch (err) {}
 
   editor.configObj.load();
@@ -436,7 +440,6 @@ editor.init = () => {
     // Alert will only appear the first time saved OR the
     //   first time the bug is encountered
     let done = editor.pref('save_notice_done');
-
     if (done !== 'all') {
       let note = uiStrings.notification.saveFromBrowser.replace('%s', 'SVG');
       // Check if FF and has <defs/>
@@ -453,7 +456,7 @@ editor.init = () => {
         editor.pref('save_notice_done', 'all');
       }
       if (done !== 'part') {
-        alert(note);
+        document.getElementById('se-alert-dialog').title = note;
       }
     }
   };
@@ -470,7 +473,7 @@ editor.init = () => {
     exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
 
     if (!exportWindow || exportWindow.closed) {
-      alert(uiStrings.notification.popupWindowBlocked);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked;
       return;
     }
 
@@ -1901,15 +1904,15 @@ editor.init = () => {
     svgCanvas.setDocumentTitle(title);
 
     if (w !== 'fit' && !isValidUnit('width', w)) {
-      alert(uiStrings.notification.invalidAttrValGiven);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
       return false;
     }
     if (h !== 'fit' && !isValidUnit('height', h)) {
-      alert(uiStrings.notification.invalidAttrValGiven);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
       return false;
     }
     if (!svgCanvas.setResolution(w, h)) {
-      alert(uiStrings.notification.noContentToFitTo);
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.noContentToFitTo;
       return false;
     }
     // Set image save option
@@ -2000,7 +2003,7 @@ editor.init = () => {
   });
 
   $('#url_notice').click(() => {
-    alert(this.title);
+    document.getElementById('se-alert-dialog').title = this.title;
   });
 
   $('#stroke_width').val(editor.configObj.curConfig.initStroke.width);
@@ -2702,7 +2705,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
             reject(new Error('URLLoadFail'));
             return;
           }
-          alert(uiStrings.notification.URLLoadFail + ': \n' + err);
+          document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
           resolve();
         },
         complete () {

From 0f9ec3e6abd7e8bc3e725a6acb193e965862d696 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Mon, 28 Dec 2020 20:22:06 +0530
Subject: [PATCH 3/9] #seConfirmDialog remove super.attributeChangedCallback

---
 src/editor/dialogs/seAlertDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
index bf07001a..6d417f22 100644
--- a/src/editor/dialogs/seAlertDialog.js
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -34,7 +34,7 @@ export class SeAlertDialog extends HTMLElement {
       this.dialog.open();
       break;
     default:
-      super.attributeChangedCallback(name, oldValue, newValue);
+      console.error('unkonw attr for:', name, 'newValue =', newValue);
       break;
     }
   }

From 36e3c8dd49a0981aa0bef239576667cde2175f99 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 29 Dec 2020 14:43:01 +0530
Subject: [PATCH 4/9] #process_cancel prompt changes to alertDialog and
 seConfirmDialog

---
 src/editor/dialogs/seAlertDialog.js           | 47 ++++++++++++++++++-
 .../extensions/ext-imagelib/ext-imagelib.js   |  4 +-
 src/editor/extensions/ext-imagelib/index.js   |  1 +
 .../extensions/ext-imagelib/openclipart.js    |  1 +
 .../extensions/ext-mathjax/ext-mathjax.js     |  1 +
 .../ext-server_moinsave.js                    |  1 +
 .../ext-server_opensave.js                    |  3 +-
 .../ext-webappfind/ext-webappfind.js          |  1 +
 src/editor/panels/LayersPanel.js              |  3 ++
 src/editor/panels/TopPanelHandlers.js         |  1 +
 src/editor/svgedit.js                         | 27 +++++++----
 11 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
index 6d417f22..3ae405e2 100644
--- a/src/editor/dialogs/seAlertDialog.js
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -18,7 +18,7 @@ export class SeAlertDialog extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title'];
+    return ['title', 'type', 'close'];
   }
   /**
    * @function attributeChangedCallback
@@ -30,9 +30,24 @@ export class SeAlertDialog extends HTMLElement {
   attributeChangedCallback (name, oldValue, newValue) {
     switch (name) {
     case 'title':
+      if (this.dialog.opened) {
+        this.dialog.close();
+      }
       this.dialog.textContent = newValue;
       this.dialog.open();
       break;
+    case 'type':
+      if (newValue === 'prompt_cancel') {
+        this.dialog.choices = ['Cancel'];
+      } else {
+        this.dialog.choices = ['Ok'];
+      }
+      break;
+    case 'close':
+      if (this.dialog.opened) {
+        this.dialog.close();
+      }
+      break;
     default:
       console.error('unkonw attr for:', name, 'newValue =', newValue);
       break;
@@ -53,6 +68,36 @@ export class SeAlertDialog extends HTMLElement {
   set title (value) {
     this.setAttribute('title', value);
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get type () {
+    return this.getAttribute('type');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set type (value) {
+    this.setAttribute('type', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get close () {
+    return this.getAttribute('close');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set close (value) {
+    this.setAttribute('close', value);
+  }
 }
 
 // Register
diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js
index e9931c16..88fd9887 100644
--- a/src/editor/extensions/ext-imagelib/ext-imagelib.js
+++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js
@@ -181,11 +181,9 @@ export default {
         const message = uiStrings.notification.retrieving.replace('%s', name);
 
         if (mode !== 'm') {
-          await $.process_cancel(message);
+          await seConfirm(message, [uiStrings.common.cancel]);
           transferStopped = true;
           // Should a message be sent back to the frame?
-
-          $('#dialog_box').hide();
         } else {
           entry = $('<div>').text(message).data('id', curMeta.id);
           preview.append(entry);
diff --git a/src/editor/extensions/ext-imagelib/index.js b/src/editor/extensions/ext-imagelib/index.js
index 2e48c220..84835d42 100644
--- a/src/editor/extensions/ext-imagelib/index.js
+++ b/src/editor/extensions/ext-imagelib/index.js
@@ -32,6 +32,7 @@ $('a').click(function () {
         data = canvas.toDataURL();
       } catch (err) {
         // This fails in Firefox with `file:///` URLs :(
+        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
         document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
         data = '';
       }
diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js
index d66b3e84..c1dbb0a5 100644
--- a/src/editor/extensions/ext-imagelib/openclipart.js
+++ b/src/editor/extensions/ext-imagelib/openclipart.js
@@ -39,6 +39,7 @@ async function processResults (url) {
   // console.log('json', json);
 
   if (!json || json.msg !== 'success') {
+    document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
     document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
     return;
   }
diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js
index 85687cbe..b9108506 100644
--- a/src/editor/extensions/ext-mathjax/ext-mathjax.js
+++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js
@@ -202,6 +202,7 @@ export default {
               });
             } catch (e) {
               console.log('Failed loading MathJax.'); // eslint-disable-line no-console
+              document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
               // eslint-disable-next-line max-len
               document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
             }
diff --git a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
index be51a83a..51efa601 100644
--- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
+++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
@@ -64,6 +64,7 @@ export default {
           <input type="hidden" name="contenttype" value="application/x-svgdraw">
         `).appendTo('body')
           .submit().remove();
+        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
         document.getElementById('se-alert-dialog').title = strings.saved;
         top.window.location = '/' + name;
       }
diff --git a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js
index 5310aca4..fdbe99f6 100644
--- a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js
+++ b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js
@@ -245,9 +245,8 @@ export default {
         form.submit();
 
         rebuildInput(form);
-        await $.process_cancel(strings.uploading);
+        await seConfirm(strings.uploading, ['Cancel']);
         cancelled = true;
-        $('#dialog_box').hide();
       }
 
       if (form[0] === openSvgForm[0]) {
diff --git a/src/editor/extensions/ext-webappfind/ext-webappfind.js b/src/editor/extensions/ext-webappfind/ext-webappfind.js
index 176b226a..70ed0610 100644
--- a/src/editor/extensions/ext-webappfind/ext-webappfind.js
+++ b/src/editor/extensions/ext-webappfind/ext-webappfind.js
@@ -63,6 +63,7 @@ export default {
           } */
           break;
         case 'save-end':
+          document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
           document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
           break;
         default:
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 400a3bd8..3c160a71 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -156,6 +156,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
       document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
       return;
     }
@@ -190,6 +191,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
       document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
       return;
     }
@@ -235,6 +237,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
     if (!newName) { return; }
     if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
       document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
       return;
     }
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 2dac9259..3fb4ee04 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/src/editor/panels/TopPanelHandlers.js
@@ -403,6 +403,7 @@ class TopPanelHandlers {
 
     if (!valid) {
       e.target.value = this.selectedElement().getAttribute(attr);
+      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
       document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
       return false;
     }
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index ce81af8f..3d140a11 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -456,6 +456,7 @@ editor.init = () => {
         editor.pref('save_notice_done', 'all');
       }
       if (done !== 'part') {
+        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
         document.getElementById('se-alert-dialog').title = note;
       }
     }
@@ -473,6 +474,7 @@ editor.init = () => {
     exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
 
     if (!exportWindow || exportWindow.closed) {
+      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
       document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked;
       return;
     }
@@ -789,7 +791,7 @@ editor.init = () => {
     }
 
     if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') {
-      $('#dialog_box').hide();
+      document.getElementById('se-alert-dialog').setAttribute('close', true);
     }
   };
 
@@ -1902,7 +1904,7 @@ editor.init = () => {
     const {title, w, h, save} = e.detail;
     // set document title
     svgCanvas.setDocumentTitle(title);
-
+    document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
     if (w !== 'fit' && !isValidUnit('width', w)) {
       document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
       return false;
@@ -1959,7 +1961,6 @@ editor.init = () => {
   * @returns {void} Resolves to `undefined`
   */
   const cancelOverlays = async (e) => {
-    $('#dialog_box').hide();
     const $editorDialog = document.getElementById('se-svg-editor-dialog');
     const editingsource = $editorDialog.getAttribute('dialog') === 'open';
     if (!editingsource && !docprops && !preferences) {
@@ -2003,6 +2004,7 @@ editor.init = () => {
   });
 
   $('#url_notice').click(() => {
+    document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
     document.getElementById('se-alert-dialog').title = this.title;
   });
 
@@ -2440,13 +2442,14 @@ editor.init = () => {
     * @returns {void}
     */
     const importImage = function (e) {
-      $.process_cancel(uiStrings.notification.loadingImage);
+      document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
+      document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
       e.stopPropagation();
       e.preventDefault();
       $('#main_menu').hide();
       const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
       if (!file) {
-        $('#dialog_box').hide();
+        document.getElementById('se-alert-dialog').setAttribute('close', true);
         return;
       }
 
@@ -2467,7 +2470,7 @@ editor.init = () => {
           svgCanvas.alignSelectedElements('c', 'page');
           // highlight imported element, otherwise we get strange empty selectbox
           svgCanvas.selectOnly([newElement]);
-          $('#dialog_box').hide();
+          document.getElementById('se-alert-dialog').setAttribute('close', true);
         };
         reader.readAsText(file);
       } else {
@@ -2497,7 +2500,7 @@ editor.init = () => {
             svgCanvas.alignSelectedElements('m', 'page');
             svgCanvas.alignSelectedElements('c', 'page');
             editor.topPanelHandlers.updateContextPanel();
-            $('#dialog_box').hide();
+            document.getElementById('se-alert-dialog').setAttribute('close', true);
           };
           // create dummy img so we know the default dimensions
           let imgWidth = 100;
@@ -2525,7 +2528,8 @@ editor.init = () => {
       if (!ok) { return; }
       svgCanvas.clear();
       if (this.files.length === 1) {
-        $.process_cancel(uiStrings.notification.loadingImage);
+        document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
+        document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
         const reader = new FileReader();
         reader.onloadend = async function ({target}) {
           await loadSvgString(target.result);
@@ -2691,7 +2695,8 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
         dataType: 'text',
         cache: Boolean(cache),
         beforeSend () {
-          $.process_cancel(uiStrings.notification.loadingImage);
+          document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
+          document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
         },
         success (str) {
           loadSvgString(str, {noAlert});
@@ -2705,11 +2710,13 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
             reject(new Error('URLLoadFail'));
             return;
           }
+          document.getElementById('se-alert-dialog').setAttribute('close', true);
+          document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
           document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
           resolve();
         },
         complete () {
-          $('#dialog_box').hide();
+          document.getElementById('se-alert-dialog').setAttribute('close', true);
         }
       });
     });

From c6f8f43d675837ef32bc9ee94e058bd2b2a39f4c Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Tue, 29 Dec 2020 14:39:08 +0100
Subject: [PATCH 5/9] make load faster

---
 src/editor/components/seDropdown.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js
index 91accd1f..447d4cc7 100644
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -2,9 +2,8 @@
 import ListComboBox from 'elix/define/ListComboBox.js';
 import NumberSpinBox from 'elix/define/NumberSpinBox.js';
 // import Input from 'elix/src/base/Input.js';
-import {defaultState} from 'elix/src/base/internal.js';
+import * as internal from 'elix/src/base/internal.js';
 import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
-import {internal} from 'elix';
 
 /**
  * @class Dropdown
@@ -14,8 +13,8 @@ class Dropdown extends ListComboBox {
     * @function get
     * @returns {PlainObject}
     */
-  get [defaultState] () {
-    return Object.assign(super[defaultState], {
+  get [internal.defaultState] () {
+    return Object.assign(super[internal.defaultState], {
       inputPartType: NumberSpinBox,
       src: './images/logo.svg',
       inputsize: '100%'

From f71a3fb6d9dca3524b4d23b8e8bab6e8f0f06248 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 29 Dec 2020 22:16:29 +0530
Subject: [PATCH 6/9] #storageDialog dialog separate moved dialog

---
 src/editor/dialogs/index.js                   |   1 +
 src/editor/dialogs/storageDialog.js           | 166 ++++++++++++++++++
 .../extensions/ext-storage/ext-storage.js     | 138 +--------------
 src/editor/svgedit.js                         | 137 +++++++++++++++
 4 files changed, 309 insertions(+), 133 deletions(-)
 create mode 100644 src/editor/dialogs/storageDialog.js

diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index e45048fd..821f09ca 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -6,3 +6,4 @@ import './cmenuLayersDialog.js';
 import './seSelectDialog.js';
 import './seConfirmDialog.js';
 import './seAlertDialog.js';
+import './storageDialog.js';
diff --git a/src/editor/dialogs/storageDialog.js b/src/editor/dialogs/storageDialog.js
new file mode 100644
index 00000000..32ee919e
--- /dev/null
+++ b/src/editor/dialogs/storageDialog.js
@@ -0,0 +1,166 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Dialog.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+ 
+  #dialog_content {
+    margin: 10px 10px 5px 10px;
+    background: #DDD;
+    overflow: auto;
+    text-align: left;
+    border: 1px solid #B0B0B0;
+  }
+
+  #dialog_content p, #dialog_content select, #dialog_content label {
+    margin: 10px;
+    line-height: 1.3em;
+  }
+  
+  #dialog_container {
+    font-family: Verdana;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    max-width: 400px;
+    z-index: 50001;
+    background: #CCC;
+    border: 1px outset #777;
+    font-family:Verdana,Helvetica,sans-serif;
+    font-size:0.8em;
+  }
+  
+  #dialog_container, #dialog_content {
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+  }
+  
+  #dialog_buttons input[type=text] {
+    width: 90%;
+    display: block;
+    margin: 0 0 5px 11px;
+  }
+  
+  #dialog_buttons input[type=button] {
+    margin: 0 1em;
+  }
+  </style>
+  <elix-dialog id="dialog_box" aria-label="SVG-Edit storage preferences" closed>
+    <div class="overlay"></div>
+    <div id="dialog_container">
+      <div id="dialog_content">
+        <p> 
+          By default and where supported, SVG-Edit can store your editor preferences and SVG content locally on your machine so you do not need to add these back each time you load SVG-Edit. If, for privacy reasons, you do not wish to store this information on your machine, you can change away from the default option below.
+        </p>
+        <select id="se-storage-pref">
+          <option value="prefsAndContent" id="js-storage" disabled>Store preferences and SVG content locally</option>
+          <option value="prefsOnly">Only store preferences locally</option>
+          <option value="noPrefsOrContent">Do not store my preferences or SVG content locally</option>
+        </select> 
+        <label title="If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.">
+          Remember this choice?<input type="checkbox" id="se-remember" value="" checked>
+        </label>     
+      </div>
+      <div id="dialog_buttons">
+        <button id="storage_ok">
+          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
+          Ok
+        </button>
+        <button id="storage_cancel">
+          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
+          Cancel
+        </button>
+      </div>
+    </div>
+  </elix-dialog>
+`;
+/**
+ * @class SeStorageDialog
+ */
+export class SeStorageDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$dialog = this._shadowRoot.querySelector('#dialog_box');
+    this.$storage = this._shadowRoot.querySelector('#js-storage');
+    this.$okBtn = this._shadowRoot.querySelector('#storage_ok');
+    this.$cancelBtn = this._shadowRoot.querySelector('#storage_cancel');
+    this.$storageInput = this._shadowRoot.querySelector('#se-storage-pref');
+    this.$rememberInput = this._shadowRoot.querySelector('#se-remember');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['dialog', 'storage'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    switch (name) {
+    case 'dialog':
+      if (newValue === 'open') {
+        this.$dialog.open();
+      } else {
+        this.$dialog.close();
+      }
+      break;
+    case 'storage':
+      if (newValue === 'true') {
+        this.$storageInput.options[0].disabled = false;
+      } else {
+        this.$storageInput.options[0].disabled = true;
+      }
+      break;
+    default:
+      // super.attributeChangedCallback(name, oldValue, newValue);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get dialog () {
+    return this.getAttribute('dialog');
+  }
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set dialog (value) {
+    this.setAttribute('dialog', value);
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    const onSubmitHandler = (e, action) => {
+      const triggerEvent = new CustomEvent('change', {detail: {
+        trigger: action,
+        select: this.$storageInput.value,
+        checkbox: this.$rememberInput.checked
+      }});
+      this.dispatchEvent(triggerEvent);
+    };
+    this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
+    this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
+  }
+}
+
+// Register
+customElements.define('se-storage-dialog', SeStorageDialog);
diff --git a/src/editor/extensions/ext-storage/ext-storage.js b/src/editor/extensions/ext-storage/ext-storage.js
index dddadd53..ba52e0b4 100644
--- a/src/editor/extensions/ext-storage/ext-storage.js
+++ b/src/editor/extensions/ext-storage/ext-storage.js
@@ -44,7 +44,6 @@ export default {
     // to change, set the "emptyStorageOnDecline" config setting to true
     // in svgedit-config-iife.js/svgedit-config-es.js.
     const {
-      emptyStorageOnDecline,
       // When the code in svg-editor.js prevents local storage on load per
       //  user request, we also prevent storing on unload here so as to
       //  avoid third-party sites making XSRF requests or providing links
@@ -57,30 +56,7 @@ export default {
       noStorageOnLoad,
       forceStorage
     } = svgEditor.curConfig;
-    const {storage, updateCanvas} = svgEditor;
-
-    /**
-     * Replace `storagePrompt` parameter within URL.
-     * @param {string} val
-     * @returns {void}
-     * @todo Replace the string manipulation with `searchParams.set`
-     */
-    function replaceStoragePrompt (val) {
-      val = val ? 'storagePrompt=' + val : '';
-      const loc = top.location; // Allow this to work with the embedded editor as well
-      if (loc.href.includes('storagePrompt=')) {
-        /*
-        loc.href = loc.href.replace(/(?<sep>[&?])storagePrompt=[^&]*(?<amp>&?)/, function (n0, sep, amp) {
-          return (val ? sep : '') + val + (!val && amp ? sep : (amp || ''));
-        });
-        */
-        loc.href = loc.href.replace(/([&?])storagePrompt=[^&]*(&?)/, function (n0, n1, amp) {
-          return (val ? n1 : '') + val + (!val && amp ? n1 : (amp || ''));
-        });
-      } else {
-        loc.href += (loc.href.includes('?') ? '&' : '?') + val;
-      }
-    }
+    const {storage} = svgEditor;
 
     /**
      * Sets SVG content as a string with "svgedit-" and the current
@@ -99,40 +75,6 @@ export default {
       }
     }
 
-    /**
-     * Set the cookie to expire.
-     * @param {string} cookie
-     * @returns {void}
-     */
-    function expireCookie (cookie) {
-      document.cookie = encodeURIComponent(cookie) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
-    }
-
-    /**
-     * Expire the storage cookie.
-     * @returns {void}
-     */
-    function removeStoragePrefCookie () {
-      expireCookie('svgeditstore');
-    }
-
-    /**
-     * Empties storage for each of the current preferences.
-     * @returns {void}
-     */
-    function emptyStorage () {
-      setSVGContentStorage('');
-      Object.keys(svgEditor.curPrefs).forEach((name) => {
-        name = 'svg-edit-' + name;
-        if (storage) {
-          storage.removeItem(name);
-        }
-        expireCookie(name);
-      });
-    }
-
-    // emptyStorage();
-
     /**
     * Listen for unloading: If and only if opted in by the user, set the content
     *   document and preferences into storage:
@@ -214,83 +156,13 @@ export default {
           )
           // ...then show the storage prompt.
         )) {
-          /*
-          const options = [];
-          if (storage) {
-            options.unshift(
-              {value: 'prefsAndContent', text: storagePrefsAndContent},
-              {value: 'prefsOnly', text: storagePrefsOnly},
-              {value: 'noPrefsOrContent', text: storageNoPrefsOrContent}
-            );
-          } else {
-            options.unshift(
-              {value: 'prefsOnly', text: storagePrefs},
-              {value: 'noPrefsOrContent', text: storageNoPrefs}
-            );
-          }
-          */
-          const options = storage ? ['prefsAndContent', 'prefsOnly', 'noPrefsOrContent'] : ['prefsOnly', 'noPrefsOrContent'];
-
+          const options = storage ? true : false;
           // Open select-with-checkbox dialog
           // From svg-editor.js
           svgEditor.storagePromptState = 'waiting';
-          /* JFH !!!!!
-          const {response: pref, checked} = await $.select(
-            message,
-            options,
-            null,
-            null,
-            {
-              label: rememberLabel,
-              checked: true,
-              tooltip: rememberTooltip
-            }
-          );
-          */
-          const pref = await seSelect(message, options);
-          if (pref && pref !== 'noPrefsOrContent') {
-            // Regardless of whether the user opted
-            // to remember the choice (and move to a URL which won't
-            // ask them again), we have to assume the user
-            // doesn't even want to remember their not wanting
-            // storage, so we don't set the cookie or continue on with
-            //  setting storage on beforeunload
-            document.cookie = 'svgeditstore=' + encodeURIComponent(pref) + '; expires=Fri, 31 Dec 9999 23:59:59 GMT'; // 'prefsAndContent' | 'prefsOnly'
-            // If the URL was configured to always insist on a prompt, if
-            //    the user does indicate a wish to store their info, we
-            //    don't want ask them again upon page refresh so move
-            //    them instead to a URL which does not always prompt
-            if (storagePrompt === 'true' /* && checked */) {
-              replaceStoragePrompt();
-              return;
-            }
-          } else { // The user does not wish storage (or cancelled, which we treat equivalently)
-            removeStoragePrefCookie();
-            if (pref && // If the user explicitly expresses wish for no storage
-              emptyStorageOnDecline
-            ) {
-              emptyStorage();
-            }
-            if (pref /* && checked */) {
-              // Open a URL which won't set storage and won't prompt user about storage
-              replaceStoragePrompt('false');
-              return;
-            }
-          }
-
-          // It should be enough to (conditionally) add to storage on
-          //   beforeunload, but if we wished to update immediately,
-          //   we might wish to try setting:
-          //       svgEditor.setConfig({noStorageOnLoad: true});
-          //   and then call:
-          //       svgEditor.loadContentAndPrefs();
-
-          // We don't check for noStorageOnLoad here because
-          //   the prompt gives the user the option to store data
-          setupBeforeUnloadListener();
-
-          svgEditor.storagePromptState = 'closed';
-          updateCanvas(true);
+          const $storageDialog = document.getElementById('se-storage-dialog');
+          $storageDialog.setAttribute('dialog', 'open');
+          $storageDialog.setAttribute('storage', options);
         } else if (!noStorageOnLoad || forceStorage) {
           setupBeforeUnloadListener();
         }
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index ce81af8f..167e12ee 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -226,6 +226,10 @@ editor.init = () => {
     const alertBox = document.createElement('se-alert-dialog');
     alertBox.setAttribute('id', 'se-alert-dialog');
     document.body.append(alertBox);
+    // storageDialog added to DOM
+    const storageBox = document.createElement('se-storage-dialog');
+    storageBox.setAttribute('id', 'se-storage-dialog');
+    document.body.append(storageBox);
   } catch (err) {}
 
   editor.configObj.load();
@@ -1982,6 +1986,105 @@ editor.init = () => {
     }
   };
 
+  /**
+   * Replace `storagePrompt` parameter within URL.
+   * @param {string} val
+   * @returns {void}
+   * @todo Replace the string manipulation with `searchParams.set`
+   */
+  function replaceStoragePrompt (val) {
+    val = val ? 'storagePrompt=' + val : '';
+    const loc = top.location; // Allow this to work with the embedded editor as well
+    if (loc.href.includes('storagePrompt=')) {
+      /*
+      loc.href = loc.href.replace(/(?<sep>[&?])storagePrompt=[^&]*(?<amp>&?)/, function (n0, sep, amp) {
+        return (val ? sep : '') + val + (!val && amp ? sep : (amp || ''));
+      });
+      */
+      loc.href = loc.href.replace(/([&?])storagePrompt=[^&]*(&?)/, function (n0, n1, amp) {
+        return (val ? n1 : '') + val + (!val && amp ? n1 : (amp || ''));
+      });
+    } else {
+      loc.href += (loc.href.includes('?') ? '&' : '?') + val;
+    }
+  }
+
+  /**
+   * Sets SVG content as a string with "svgedit-" and the current
+   *   canvas name as namespace.
+   * @param {string} val
+   * @returns {void}
+   */
+  function setSVGContentStorage (val) {
+    if (editor.storage) {
+      const name = 'svgedit-' + editor.curConfig.canvasName;
+      if (!val) {
+        editor.storage.removeItem(name);
+      } else {
+        editor.storage.setItem(name, val);
+      }
+    }
+  }
+
+  /**
+  * Listen for unloading: If and only if opted in by the user, set the content
+  *   document and preferences into storage:
+  * 1. Prevent save warnings (since we're automatically saving unsaved
+  *       content into storage)
+  * 2. Use localStorage to set SVG contents (potentially too large to allow in cookies)
+  * 3. Use localStorage (where available) or cookies to set preferences.
+  * @returns {void}
+  */
+  function setupBeforeUnloadListener () {
+    window.addEventListener('beforeunload', function (e) {
+      // Don't save anything unless the user opted in to storage
+      if (!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)) {
+        return;
+      }
+      if (document.cookie.match(/(?:^|;\s*)svgeditstore=prefsAndContent/)) {
+        setSVGContentStorage(svgCanvas.getSvgString());
+      }
+
+      editor.setConfig({no_save_warning: true}); // No need for explicit saving at all once storage is on
+      // svgEditor.showSaveWarning = false;
+
+      const {curPrefs} = editor;
+
+      Object.entries(curPrefs).forEach(([key, val]) => {
+        const store = (val !== undefined);
+        key = 'svg-edit-' + key;
+        if (!store) {
+          return;
+        }
+        if (editor.storage) {
+          editor.storage.setItem(key, val);
+        } else if (window.widget) {
+          window.widget.setPreferenceForKey(val, key);
+        } else {
+          val = encodeURIComponent(val);
+          document.cookie = encodeURIComponent(key) + '=' + val + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
+        }
+      });
+    });
+  }
+
+  /**
+   * Set the cookie to expire.
+   * @param {string} cookie
+   * @returns {void}
+   */
+  function expireCookie (cookie) {
+    document.cookie = encodeURIComponent(cookie) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+  }
+
+  /**
+   * Expire the storage cookie.
+   * @returns {void}
+   */
+  function removeStoragePrefCookie () {
+    expireCookie('svgeditstore');
+  }
+
   const winWh = {width: $(window).width(), height: $(window).height()};
 
   $(window).resize(function (evt) {
@@ -2153,6 +2256,40 @@ editor.init = () => {
         break;
       }
     });
+    $id('se-storage-dialog').addEventListener('change', function (e) {
+      document.getElementById('se-storage-dialog').setAttribute('dialog', 'close');
+      if (e?.detail?.trigger === 'ok') {
+        if (e?.detail?.select !== 'noPrefsOrContent') {
+          const storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
+          document.cookie = 'svgeditstore=' + encodeURIComponent(e.detail.select) + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
+          if (storagePrompt === 'true' && e?.detail?.checkbox ) {
+            replaceStoragePrompt();
+            return;
+          }
+        } else {
+          removeStoragePrefCookie();
+          if (editor.curConfig.emptyStorageOnDecline && e?.detail?.checkbox) {
+            setSVGContentStorage('');
+            Object.keys(editor.curPrefs).forEach((name) => {
+              name = 'svg-edit-' + name;
+              if (editor.storage) {
+                editor.storage.removeItem(name);
+              }
+              expireCookie(name);
+            });
+          }
+          if (e?.detail?.select && e?.detail?.checkbox) {
+            replaceStoragePrompt('false');
+            return;
+          }
+        }
+      } else if (e?.detail?.trigger === 'cancel') {
+        removeStoragePrefCookie();
+      }
+      setupBeforeUnloadListener();
+      editor.storagePromptState = 'closed';
+      updateCanvas(true);
+    });
 
     const toolButtons = [
       // Shortcuts not associated with buttons

From 816f9fbbb7575f8c1f5990be9e1d4f0cad526417 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 29 Dec 2020 23:21:47 +0530
Subject: [PATCH 7/9] #process_cancel alert and process_cancel changes

---
 src/editor/dialogs/index.js                   |   1 +
 src/editor/dialogs/seAlertDialog.js           | 107 ++----------------
 src/editor/dialogs/sePromptDialog.js          |  83 ++++++++++++++
 src/editor/extensions/ext-imagelib/index.js   |   5 +-
 .../extensions/ext-imagelib/openclipart.js    |   4 +-
 .../extensions/ext-mathjax/ext-mathjax.js     |   6 +-
 .../ext-server_moinsave.js                    |   4 +-
 .../ext-webappfind/ext-webappfind.js          |   4 +-
 src/editor/panels/LayersPanel.js              |  11 +-
 src/editor/panels/TopPanelHandlers.js         |   5 +-
 src/editor/svgedit.js                         |  49 ++++----
 11 files changed, 127 insertions(+), 152 deletions(-)
 create mode 100644 src/editor/dialogs/sePromptDialog.js

diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index e45048fd..1278f74d 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -5,4 +5,5 @@ import './cmenuDialog.js';
 import './cmenuLayersDialog.js';
 import './seSelectDialog.js';
 import './seConfirmDialog.js';
+import './sePromptDialog.js';
 import './seAlertDialog.js';
diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
index 3ae405e2..2d178ee8 100644
--- a/src/editor/dialogs/seAlertDialog.js
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -1,104 +1,11 @@
 // eslint-disable-next-line node/no-unpublished-import
 import AlertDialog from 'elix/define/AlertDialog.js';
-/**
- * @class SeAlertDialog
- */
-export class SeAlertDialog extends HTMLElement {
-  /**
-    * @function constructor
-    */
-  constructor () {
-    super();
-    // create the shadowDom and insert the template
-    this._shadowRoot = this.attachShadow({mode: 'open'});
-    this.dialog = new AlertDialog();
-  }
-  /**
-   * @function observedAttributes
-   * @returns {any} observed
-   */
-  static get observedAttributes () {
-    return ['title', 'type', 'close'];
-  }
-  /**
-   * @function attributeChangedCallback
-   * @param {string} name
-   * @param {string} oldValue
-   * @param {string} newValue
-   * @returns {void}
-   */
-  attributeChangedCallback (name, oldValue, newValue) {
-    switch (name) {
-    case 'title':
-      if (this.dialog.opened) {
-        this.dialog.close();
-      }
-      this.dialog.textContent = newValue;
-      this.dialog.open();
-      break;
-    case 'type':
-      if (newValue === 'prompt_cancel') {
-        this.dialog.choices = ['Cancel'];
-      } else {
-        this.dialog.choices = ['Ok'];
-      }
-      break;
-    case 'close':
-      if (this.dialog.opened) {
-        this.dialog.close();
-      }
-      break;
-    default:
-      console.error('unkonw attr for:', name, 'newValue =', newValue);
-      break;
-    }
-  }
-  /**
-   * @function get
-   * @returns {any}
-   */
-  get title () {
-    return this.getAttribute('title');
-  }
 
-  /**
-   * @function set
-   * @returns {void}
-   */
-  set title (value) {
-    this.setAttribute('title', value);
-  }
-  /**
-   * @function get
-   * @returns {any}
-   */
-  get type () {
-    return this.getAttribute('type');
-  }
+const dialog = new AlertDialog();
+const seAlert = (type, text) => {
+  dialog.textContent = text;
+  dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel'];
+  dialog.open();
+};
 
-  /**
-   * @function set
-   * @returns {void}
-   */
-  set type (value) {
-    this.setAttribute('type', value);
-  }
-  /**
-   * @function get
-   * @returns {any}
-   */
-  get close () {
-    return this.getAttribute('close');
-  }
-
-  /**
-   * @function set
-   * @returns {void}
-   */
-  set close (value) {
-    this.setAttribute('close', value);
-  }
-}
-
-// Register
-customElements.define('se-alert-dialog', SeAlertDialog);
+window.seAlert = seAlert;
diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js
new file mode 100644
index 00000000..10fdf802
--- /dev/null
+++ b/src/editor/dialogs/sePromptDialog.js
@@ -0,0 +1,83 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+/**
+ * @class SePromptDialog
+ */
+export class SePromptDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this.dialog = new AlertDialog();
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['title', 'close'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    switch (name) {
+    case 'title':
+      if (this.dialog.opened) {
+        this.dialog.close();
+      }
+      this.dialog.textContent = newValue;
+      this.dialog.choices = ['Cancel'];
+      this.dialog.open();
+      break;
+    case 'close':
+      if (this.dialog.opened) {
+        this.dialog.close();
+      }
+      break;
+    default:
+      console.error('unkonw attr for:', name, 'newValue =', newValue);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get close () {
+    return this.getAttribute('close');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set close (value) {
+    this.setAttribute('close', value);
+  }
+}
+
+// Register
+customElements.define('se-prompt-dialog', SePromptDialog);
diff --git a/src/editor/extensions/ext-imagelib/index.js b/src/editor/extensions/ext-imagelib/index.js
index 84835d42..3bbe9047 100644
--- a/src/editor/extensions/ext-imagelib/index.js
+++ b/src/editor/extensions/ext-imagelib/index.js
@@ -1,4 +1,4 @@
-/* globals jQuery */
+/* globals jQuery seAlert */
 const $ = jQuery;
 $('a').click(function () {
   const {href} = this;
@@ -32,8 +32,7 @@ $('a').click(function () {
         data = canvas.toDataURL();
       } catch (err) {
         // This fails in Firefox with `file:///` URLs :(
-        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-        document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
+        seAlert('alert', 'Data URL conversion failed: ' + err);
         data = '';
       }
       post({href, data});
diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js
index c1dbb0a5..d724528a 100644
--- a/src/editor/extensions/ext-imagelib/openclipart.js
+++ b/src/editor/extensions/ext-imagelib/openclipart.js
@@ -1,3 +1,4 @@
+/* globals seAlert */
 // eslint-disable-next-line node/no-unpublished-import
 import {jml, body, nbsp} from 'jamilih';
 // eslint-disable-next-line node/no-unpublished-import
@@ -39,8 +40,7 @@ async function processResults (url) {
   // console.log('json', json);
 
   if (!json || json.msg !== 'success') {
-    document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-    document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
+    seAlert('alert', 'There was a problem downloading the results');
     return;
   }
   const {payload, info: {
diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js
index b9108506..c7a304b5 100644
--- a/src/editor/extensions/ext-mathjax/ext-mathjax.js
+++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js
@@ -1,4 +1,4 @@
-/* globals MathJax */
+/* globals MathJax seAlert */
 /**
  * @file ext-mathjax.js
  *
@@ -202,9 +202,7 @@ export default {
               });
             } catch (e) {
               console.log('Failed loading MathJax.'); // eslint-disable-line no-console
-              document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-              // eslint-disable-next-line max-len
-              document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
+              seAlert('alert', 'Failed loading MathJax. You will not be able to change the mathematics.');
             }
           }
         }
diff --git a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
index 51efa601..9249ed84 100644
--- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
+++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
@@ -1,3 +1,4 @@
+/* globals seAlert */
 /**
  * @file ext-server_moinsave.js
  *
@@ -64,8 +65,7 @@ export default {
           <input type="hidden" name="contenttype" value="application/x-svgdraw">
         `).appendTo('body')
           .submit().remove();
-        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-        document.getElementById('se-alert-dialog').title = strings.saved;
+        seAlert('alert', strings.saved);
         top.window.location = '/' + name;
       }
     });
diff --git a/src/editor/extensions/ext-webappfind/ext-webappfind.js b/src/editor/extensions/ext-webappfind/ext-webappfind.js
index 70ed0610..d878130c 100644
--- a/src/editor/extensions/ext-webappfind/ext-webappfind.js
+++ b/src/editor/extensions/ext-webappfind/ext-webappfind.js
@@ -1,3 +1,4 @@
+/* globals seAlert */
 /**
 * Depends on Firefox add-on and executables from
 * {@link https://github.com/brettz9/webappfind}.
@@ -63,8 +64,7 @@ export default {
           } */
           break;
         case 'save-end':
-          document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-          document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
+          seAlert('alert', `save complete for pathID ${pathID}!`);
           break;
         default:
           throw new Error('Unexpected WebAppFind event type');
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 3c160a71..3a2a7e27 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-alert */
-/* globals $ */
+/* globals $ seAlert */
 import SvgCanvas from '../../svgcanvas/svgcanvas.js';
 
 const SIDEPANEL_MAXWIDTH = 300;
@@ -156,8 +156,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
+      seAlert('alert', this.uiStrings.notification.dupeLayerName);
       return;
     }
     this.svgCanvas.createLayer(newName);
@@ -191,8 +190,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
     if (!newName) { return; }
     if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
+      seAlert('alert', this.uiStrings.notification.dupeLayerName);
       return;
     }
     this.svgCanvas.cloneLayer(newName);
@@ -237,8 +235,7 @@ class LayersPanel {
     const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
     if (!newName) { return; }
     if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
-      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
+      seAlert('alert', this.uiStrings.notification.layerHasThatName);
       return;
     }
     this.svgCanvas.renameCurrentLayer(newName);
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 3fb4ee04..10d14179 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/src/editor/panels/TopPanelHandlers.js
@@ -1,4 +1,4 @@
-/* globals $ */
+/* globals $ seAlert */
 import SvgCanvas from '../../svgcanvas/svgcanvas.js';
 import {isValidUnit, getTypeMap, convertUnit} from '../../common/units.js';
 
@@ -403,8 +403,7 @@ class TopPanelHandlers {
 
     if (!valid) {
       e.target.value = this.selectedElement().getAttribute(attr);
-      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
+      seAlert('alert', this.uiStrings.notification.invalidAttrValGiven);
       return false;
     }
 
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 3d140a11..3b31034a 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-alert */
-/* globals jQuery seSelect */
+/* globals jQuery seSelect seAlert */
 /**
 * The main module for the visual SVG Editor.
 *
@@ -222,10 +222,10 @@ editor.init = () => {
     const dialogBox = document.createElement('se-cmenu_canvas-dialog');
     dialogBox.setAttribute('id', 'se-cmenu_canvas');
     document.body.append(dialogBox);
-    // alertDialog added to DOM
-    const alertBox = document.createElement('se-alert-dialog');
-    alertBox.setAttribute('id', 'se-alert-dialog');
-    document.body.append(alertBox);
+    // promptDialog added to DOM
+    const promptBox = document.createElement('se-prompt-dialog');
+    promptBox.setAttribute('id', 'se-prompt-dialog');
+    document.body.append(promptBox);
   } catch (err) {}
 
   editor.configObj.load();
@@ -456,8 +456,7 @@ editor.init = () => {
         editor.pref('save_notice_done', 'all');
       }
       if (done !== 'part') {
-        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-        document.getElementById('se-alert-dialog').title = note;
+        seAlert('alert', note);
       }
     }
   };
@@ -474,8 +473,7 @@ editor.init = () => {
     exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
 
     if (!exportWindow || exportWindow.closed) {
-      document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-      document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked;
+      seAlert('alert', uiStrings.notification.popupWindowBlocked);
       return;
     }
 
@@ -791,7 +789,7 @@ editor.init = () => {
     }
 
     if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') {
-      document.getElementById('se-alert-dialog').setAttribute('close', true);
+      document.getElementById('se-prompt-dialog').setAttribute('close', true);
     }
   };
 
@@ -1904,17 +1902,16 @@ editor.init = () => {
     const {title, w, h, save} = e.detail;
     // set document title
     svgCanvas.setDocumentTitle(title);
-    document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
     if (w !== 'fit' && !isValidUnit('width', w)) {
-      document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
+      seAlert('alert', uiStrings.notification.invalidAttrValGiven);
       return false;
     }
     if (h !== 'fit' && !isValidUnit('height', h)) {
-      document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
+      seAlert('alert', uiStrings.notification.invalidAttrValGiven);
       return false;
     }
     if (!svgCanvas.setResolution(w, h)) {
-      document.getElementById('se-alert-dialog').title = uiStrings.notification.noContentToFitTo;
+      seAlert('alert', uiStrings.notification.noContentToFitTo);
       return false;
     }
     // Set image save option
@@ -2004,8 +2001,7 @@ editor.init = () => {
   });
 
   $('#url_notice').click(() => {
-    document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-    document.getElementById('se-alert-dialog').title = this.title;
+    seAlert('alert', this.title);
   });
 
   $('#stroke_width').val(editor.configObj.curConfig.initStroke.width);
@@ -2442,14 +2438,13 @@ editor.init = () => {
     * @returns {void}
     */
     const importImage = function (e) {
-      document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
-      document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
+      document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
       e.stopPropagation();
       e.preventDefault();
       $('#main_menu').hide();
       const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
       if (!file) {
-        document.getElementById('se-alert-dialog').setAttribute('close', true);
+        document.getElementById('se-prompt-dialog').setAttribute('close', true);
         return;
       }
 
@@ -2470,7 +2465,7 @@ editor.init = () => {
           svgCanvas.alignSelectedElements('c', 'page');
           // highlight imported element, otherwise we get strange empty selectbox
           svgCanvas.selectOnly([newElement]);
-          document.getElementById('se-alert-dialog').setAttribute('close', true);
+          document.getElementById('se-prompt-dialog').setAttribute('close', true);
         };
         reader.readAsText(file);
       } else {
@@ -2500,7 +2495,7 @@ editor.init = () => {
             svgCanvas.alignSelectedElements('m', 'page');
             svgCanvas.alignSelectedElements('c', 'page');
             editor.topPanelHandlers.updateContextPanel();
-            document.getElementById('se-alert-dialog').setAttribute('close', true);
+            document.getElementById('se-prompt-dialog').setAttribute('close', true);
           };
           // create dummy img so we know the default dimensions
           let imgWidth = 100;
@@ -2528,8 +2523,7 @@ editor.init = () => {
       if (!ok) { return; }
       svgCanvas.clear();
       if (this.files.length === 1) {
-        document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
-        document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
+        document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
         const reader = new FileReader();
         reader.onloadend = async function ({target}) {
           await loadSvgString(target.result);
@@ -2695,8 +2689,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
         dataType: 'text',
         cache: Boolean(cache),
         beforeSend () {
-          document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel');
-          document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage;
+          document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
         },
         success (str) {
           loadSvgString(str, {noAlert});
@@ -2710,13 +2703,11 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
             reject(new Error('URLLoadFail'));
             return;
           }
-          document.getElementById('se-alert-dialog').setAttribute('close', true);
-          document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-          document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
+          seAlert('alert', uiStrings.notification.URLLoadFail + ': \n' + err);
           resolve();
         },
         complete () {
-          document.getElementById('se-alert-dialog').setAttribute('close', true);
+          document.getElementById('se-prompt-dialog').setAttribute('close', true);
         }
       });
     });

From 634ddcd4f6f633cb347350077f2b2424072309c6 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 29 Dec 2020 23:33:57 +0530
Subject: [PATCH 8/9] #process_cancel lint issue fixed

---
 src/editor/extensions/ext-imagelib/ext-imagelib.js          | 1 +
 .../extensions/ext-server_opensave/ext-server_opensave.js   | 1 +
 src/editor/svgedit.js                                       | 6 +++---
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js
index 88fd9887..10af6e74 100644
--- a/src/editor/extensions/ext-imagelib/ext-imagelib.js
+++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js
@@ -1,3 +1,4 @@
+/* globals seConfirm */
 /**
  * @file ext-imagelib.js
  *
diff --git a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js
index fdbe99f6..0ec8b68c 100644
--- a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js
+++ b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js
@@ -1,3 +1,4 @@
+/* globals seConfirm */
 /**
  * @file ext-server_opensave.js
  *
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 3b31034a..9ec9513a 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-alert */
-/* globals jQuery seSelect seAlert */
+/* globals jQuery seSelect seAlert seConfirm */
 /**
 * The main module for the visual SVG Editor.
 *
@@ -1292,7 +1292,7 @@ editor.init = () => {
 
   // fired when user wants to move elements to another layer
   let promptMoveLayerOnce = false;
-  $('#selLayerNames').change( async(evt) => {
+  $('#selLayerNames').change(async (evt) => {
     const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
     const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
     /**
@@ -1669,7 +1669,7 @@ editor.init = () => {
    * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
    * @returns {void}
    */
-  const clickClear = async() => {
+  const clickClear = async () => {
     const [x, y] = editor.configObj.curConfig.dimensions;
     const cancel = await seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
     if (cancel === uiStrings.common.cancel) {

From f2351f700cd2b1e4e0ddc9e06254bf4c1f9bdc1a Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Wed, 30 Dec 2020 09:50:53 +0100
Subject: [PATCH 9/9] add seList component

---
 src/editor/components/index.js                |   4 +-
 src/editor/components/seList.js               |  87 ++++++++
 src/editor/components/seListItem.js           |  71 +++++++
 src/editor/components/seMenu.js               |   1 -
 src/editor/components/seMenuItem.js           |   1 -
 .../components/{seDropdown.js => seZoom.js}   |   4 +-
 ...linejoin_mitter.svg => linejoin_miter.svg} |   0
 src/editor/index.html                         | 199 ++++++++----------
 src/editor/panels/TopPanelHandlers.js         |   4 +-
 src/editor/svgedit.css                        |  45 ----
 src/editor/svgedit.js                         |  14 +-
 11 files changed, 255 insertions(+), 175 deletions(-)
 create mode 100644 src/editor/components/seList.js
 create mode 100644 src/editor/components/seListItem.js
 rename src/editor/components/{seDropdown.js => seZoom.js} (98%)
 rename src/editor/images/{linejoin_mitter.svg => linejoin_miter.svg} (100%)

diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index 38adf0bb..8f16e993 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -1,10 +1,12 @@
 import './seButton.js';
 import './seFlyingButton.js';
 import './seExplorerButton.js';
-import './seDropdown.js';
+import './seZoom.js';
 import './seInput.js';
 import './seSpinInput.js';
 import './sePalette.js';
 import './seMenu.js';
 import './seMenuItem.js';
+import './seList.js';
+import './seListItem.js';
 import './seColorPicker.js';
diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
new file mode 100644
index 00000000..fbf3e73d
--- /dev/null
+++ b/src/editor/components/seList.js
@@ -0,0 +1,87 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/DropdownList.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  </style>
+  <label>Label</label>
+  <elix-dropdown-list>
+    <slot></slot>
+  </elix-dropdown-list>
+  
+`;
+/**
+ * @class SeList
+ */
+export class SeList extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
+    this.$label = this._shadowRoot.querySelector('label');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['label'];
+  }
+
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'label':
+      this.$label.textContent = newValue;
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get label () {
+    return this.getAttribute('label');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.$dropdown.addEventListener('change', (e) => {
+      e.preventDefault();
+      const selectedItem = e?.detail?.closeResult;
+      if (selectedItem !== undefined && selectedItem?.id !== undefined) {
+        document.getElementById(selectedItem.id).click();
+      }
+    });
+  }
+}
+
+// Register
+customElements.define('se-list', SeList);
diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js
new file mode 100644
index 00000000..f460a410
--- /dev/null
+++ b/src/editor/components/seListItem.js
@@ -0,0 +1,71 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Option.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  </style>  
+  <elix-option aria-label="option">
+    <slot></slot>
+  </elix-option>  
+`;
+/**
+ * @class SeMenu
+ */
+export class SeListItem extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['option'];
+  }
+
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'option':
+      this.$menuitem.setAttribute('option', newValue);
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get option () {
+    return this.getAttribute('option');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set option (value) {
+    this.setAttribute('option', value);
+  }
+}
+
+// Register
+customElements.define('se-list-item', SeListItem);
diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js
index 27436fa9..a02623e9 100644
--- a/src/editor/components/seMenu.js
+++ b/src/editor/components/seMenu.js
@@ -1,6 +1,5 @@
 /* eslint-disable node/no-unpublished-import */
 import 'elix/define/MenuButton.js';
-import 'elix/define/MenuItem.js';
 
 const template = document.createElement('template');
 template.innerHTML = `
diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js
index 288ea17e..43edfc11 100644
--- a/src/editor/components/seMenuItem.js
+++ b/src/editor/components/seMenuItem.js
@@ -1,5 +1,4 @@
 /* eslint-disable node/no-unpublished-import */
-import 'elix/define/Menu.js';
 import 'elix/define/MenuItem.js';
 
 const template = document.createElement('template');
diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seZoom.js
similarity index 98%
rename from src/editor/components/seDropdown.js
rename to src/editor/components/seZoom.js
index 447d4cc7..7f5602a5 100644
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seZoom.js
@@ -8,7 +8,7 @@ import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
 /**
  * @class Dropdown
  */
-class Dropdown extends ListComboBox {
+class Zoom extends ListComboBox {
   /**
     * @function get
     * @returns {PlainObject}
@@ -157,7 +157,7 @@ class Dropdown extends ListComboBox {
 }
 
 // Register
-customElements.define('se-dropdown', Dropdown);
+customElements.define('se-zoom', Zoom);
 
 /*
 {TODO
diff --git a/src/editor/images/linejoin_mitter.svg b/src/editor/images/linejoin_miter.svg
similarity index 100%
rename from src/editor/images/linejoin_mitter.svg
rename to src/editor/images/linejoin_miter.svg
diff --git a/src/editor/index.html b/src/editor/index.html
index d0361171..7fdf03cb 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -127,15 +127,23 @@
             title="Change rotation angle"></se-spin-input>
           <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
             title="Change gaussian blur value"></se-spin-input>
+          <se-list>
+            <se-list-item id="tool_posleft">Align Left</se-list-item>
+            <se-list-item id="tool_poscenter">Align Center</se-list-item>
+            <se-list-item id="tool_posright">Align Right</se-list-item>
+            <se-list-item id="tool_postop">Align Top</se-list-item>
+            <se-list-item id="tool_posmiddle">Align Middle</se-list-item>
+            <se-list-item id="tool_posbottom">Align Bottom</se-list-item> 
+          </se-list>
           <div class="dropdown toolset" id="tool_position" title="Align Element to Page">
             <div id="cur_position" class="icon_label"></div>
             <button></button>
           </div>
           <div id="xy_panel" class="toolset">
-            <se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
-            </se-input>
-            <se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
-            </se-input>
+            <se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
+            </se-spin-input>
+            <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
+            </se-spin-input>
           </div>
         </div> <!-- selected_panel -->
         <!-- Buttons when multiple elements are selected -->
@@ -154,33 +162,30 @@
           <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="Align Bottom" src="./images/align_bottom.svg"></se-button>
-          <label id="tool_align_relative">
-            <span id="relativeToLabel">relative to:</span>
-            <select id="align_relative_to" title="Align relative to ...">
-              <option id="selected_objects" value="selected">selected objects</option>
-              <option id="largest_object" value="largest">largest object</option>
-              <option id="smallest_object" value="smallest">smallest object</option>
-              <option id="page" value="page">page</option>
-            </select>
-          </label>
+          <se-list id="tool_align_relative" label="relative to:">
+            <se-list-item id="selected_objects" value="selected">selected objects</se-list-item>
+            <se-list-item id="largest_object" value="largest">largest object</se-list-item>
+            <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
+            <se-list-item id="page" value="page">page</se-list-item>
+          </se-list>
           <div class="tool_sep"></div>
         </div> <!-- multiselected_panel -->
         <div id="rect_panel">
           <div class="toolset">
-            <se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
-              title="Change rectangle width"></se-input>
-            <se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
-              title="Change rectangle height"></se-input>
+            <se-spin-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
+              title="Change rectangle width"></se-spin-input>
+            <se-spin-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
+              title="Change rectangle height"></se-spin-input>
           </div>
           <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius"
             data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
         </div> <!-- rect_panel -->
         <div id="image_panel">
           <div class="toolset">
-            <se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
-              title="Change image width"></se-input>
-            <se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
-              title="Change image height"></se-input>
+            <se-spin-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
+              title="Change image width"></se-spin-input>
+            <se-spin-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
+              title="Change image height"></se-spin-input>
           </div>
           <div class="toolset">
             <label id="tool_image_url">url:
@@ -195,37 +200,35 @@
         </div> <!-- image_panel -->
         <div id="circle_panel">
           <div class="toolset">
-            <se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
-            <se-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-input>
+            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-spin-input>
+            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-spin-input>
           </div>
           <div class="toolset">
-            <se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
+            <se-spin-input id="circle_r" data-attr="r" size="4" label="r:"></se-spin-input>
           </div>
         </div> <!-- circle_panel -->
         <div id="ellipse_panel">
           <div class="toolset">
-            <se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
-            </se-input>
-            <se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
-            </se-input>
+            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
+            </se-spin-input>
+            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
+            </se-spin-input>
           </div>
           <div class="toolset">
-            <se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
-            <se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
+            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-spin-input>
+            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-spin-input>
           </div>
         </div> <!-- ellipse_panel -->
         <div id="line_panel">
           <div class="toolset">
-            <se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
-            </se-input>
-            <se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
-            </se-input>
-          </div>
-          <div class="toolset">
-            <se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
-            </se-input>
-            <se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
-            </se-input>
+            <se-spin-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
+            </se-spin-input>
+            <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
+            </se-spin-input>
+            <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
+            </se-spin-input>
+            <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
+            </se-spin-input>
           </div>
         </div> <!-- line_panel -->
         <div id="text_panel">
@@ -236,25 +239,16 @@
             <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg"></se-button>
             <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
           </div>
-          <div class="toolset" id="tool_font_family">
-            <label>
-              <!-- Font family -->
-              <input id="font_family" type="text" title="Change Font Family" size="12" />
-            </label>
-            <div id="font_family_dropdown" class="dropdown">
-              <button></button>
-              <ul>
-                <li style="font-family:serif">Serif</li>
-                <li style="font-family:sans-serif">Sans-serif</li>
-                <li style="font-family:cursive">Cursive</li>
-                <li style="font-family:fantasy">Fantasy</li>
-                <li style="font-family:monospace">Monospace</li>
-                <li style="font-family:courier">Courier</li>
-                <li style="font-family:helvetica">Helvetica</li>
-                <li style="font-family:times">Times</li>
-              </ul>
-            </div>
-          </div>
+          <se-list id="tool_font_family" label="Font:">
+            <se-list-item value="Sans-serif"> <div style="font-family:serif">Sans-serif</div></se-list-item>
+            <se-list-item value="Serif"> <div style="font-family:serif">Serif</div></se-list-item>
+            <se-list-item value="Cursive"> <div style="font-family:serif">Cursive</div></se-list-item>
+            <se-list-item value="Fantasy"> <div style="font-family:serif">Fantasy</div></se-list-item>
+            <se-list-item value="Monospace"> <div style="font-family:serif">Monospace</div></se-list-item>
+            <se-list-item value="Courier"> <div style="font-family:serif">Courier</div></se-list-item>
+            <se-list-item value="Helvetica"> <div style="font-family:serif">Helvetica</div></se-list-item>
+            <se-list-item value="Times"> <div style="font-family:serif">Times</div></se-list-item> 
+          </se-list>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
             src="./images/fontsize.svg"></se-spin-input>
           <!-- Not visible, but still used -->
@@ -286,8 +280,8 @@
           <div class="tool_sep"></div>
           <se-button id="tool_node_link" title="Link Control Points" src="./images/tool_node_link.svg" pressed></se-button>
           <div class="tool_sep"></div>
-          <se-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-input>
-          <se-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-input>
+          <se-spin-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-spin-input>
+          <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-spin-input>
           <select id="seg_type" title="Change Segment type">
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
@@ -332,7 +326,7 @@
       </div> <!-- tools_left -->
       <div id="tools_bottom">
         <!-- Zoom buttons -->
-        <se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
           <div value="1000">1000</div>
           <div value="400">400</div>
           <div value="200">200</div>
@@ -343,66 +337,37 @@
           <div value="selection">Fit to selection</div>
           <div value="layer">Fit to layer content</div>
           <div value="content">Fit to all content</div>
-        </se-dropdown>
+        </se-zoom>
         <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
         <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
-        <label class="stroke_tool">
-          <select id="stroke_style" title="Change stroke dash style">
-            <option selected="selected" value="none">&#8212;</option>
-            <option value="2,2">...</option>
-            <option value="5,5">- -</option>
-            <option value="5,2,2,2">- .</option>
-            <option value="5,2,2,2,2,2">- ..</option>
-          </select>
-        </label>
-        <div class="stroke_tool dropdown" id="stroke_linejoin">
-          <div id="cur_linejoin" title="Linejoin: Miter"></div>
-          <button></button>
-        </div>
-        <div class="stroke_tool dropdown" id="stroke_linecap">
-          <div id="cur_linecap" title="Linecap: Butt"></div>
-          <button></button>
-        </div>
-        <div id="tool_opacity">
-          <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
-          <div id="opacity_dropdown" class="dropdown">
-            <button></button>
-            <ul>
-              <li>0%</li>
-              <li>25%</li>
-              <li>50%</li>
-              <li>75%</li>
-              <li>100%</li>
-              <li class="special">
-                <div id="opac_slider"></div>
-              </li>
-            </ul>
-          </div>
-        </div> <!-- tool_opacity -->
+        <se-list id="stroke_style" title="Change stroke dash style" label="">
+            <se-list-item value="none">&#8212;</se-list-item>
+            <se-list-item value="2,2">...</se-list-item>
+            <se-list-item value="5,5">- -</se-list-item>
+            <se-list-item value="5,2,2,2">- .</se-list-item>
+            <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
+        </se-list>
+        <se-list id="stroke_linejoin" title="Linejoin: Miter" label="">
+          <se-list-item id="linejoin_miter"><se-button size="small" title="Linejoin: Miter" src="./images/linejoin_miter.svg"></se-button></se-list-item>
+          <se-list-item id="linejoin_round"><se-button size="small" title="Linejoin: Round" src="./images/linejoin_round.svg"></se-button></se-list-item>
+          <se-list-item id="linejoin_bevel"><se-button size="small" title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"></se-button></se-list-item>  
+        </se-list>
+        <se-list id="stroke_linecap" title="Linecap: Butt" label="">
+          <se-list-item id="linecap_butt"><se-button size="small" title="Linecap: Butt" src="./images/linecap_butt.svg"></se-button></se-list-item>
+          <se-list-item id="linecap_square"><se-button size="small" title="Linecap: Square" src="./images/linecap_square.svg"></se-button></se-list-item>
+          <se-list-item id="linecap_round"><se-button size="small" title="Linecap: Round" src="./images/linecap_round.svg"></se-button></se-list-item>
+        </se-list>
+        <se-list id="opacity_dropdown" label="">
+          <se-list-item>0%</se-list-item>
+          <se-list-item>25%</se-list-item>
+          <se-list-item>50%</se-list-item>
+          <se-list-item>75%</se-list-item>
+          <se-list-item>100%</se-list-item>
+        </se-list>
+        <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div> <!-- tools_bottom -->
-      <div id="option_lists" class="dropdown">
-        <ul id="linejoin_opts">
-          <li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
-          <li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
-          <li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
-        </ul>
-        <ul id="linecap_opts">
-          <li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
-          <li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
-          <li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
-        </ul>
-        <ul id="position_opts" class="optcols3">
-          <li class="push_button" id="tool_posleft" title="Align Left"></li>
-          <li class="push_button" id="tool_poscenter" title="Align Center"></li>
-          <li class="push_button" id="tool_posright" title="Align Right"></li>
-          <li class="push_button" id="tool_postop" title="Align Top"></li>
-          <li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
-          <li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
-        </ul>
-      </div>
-    </div>
     <div id="dialog_box">
       <div class="overlay"></div>
       <div id="dialog_container">
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 2dac9259..09b31291 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/src/editor/panels/TopPanelHandlers.js
@@ -410,13 +410,13 @@ class TopPanelHandlers {
     if (attr !== 'id' && attr !== 'class') {
       if (isNaN(val)) {
         val = this.svgCanvas.convertToNum(attr, val);
-      } else if (this.configObj.curConfig.baseUnit !== 'px') {
+      } else if (this.editor.configObj.curConfig.baseUnit !== 'px') {
         // Convert unitless value to one with given unit
 
         const unitData = getTypeMap();
 
         if (this.selectedElement[attr] || this.svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
-          val *= unitData[this.configObj.curConfig.baseUnit];
+          val *= unitData[this.editor.configObj.curConfig.baseUnit];
         }
       }
     }
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 79282d4f..ce37d056 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -379,25 +379,6 @@ hr {
 
 /*—————————————————————————————*/
 
-.tool_button:hover,
-.push_button:hover,
-.buttonup:hover,
-.buttondown,
-.tool_button_current,
-.push_button_pressed
-{
-  background-color: #ffc !important;
-}
-
-.tool_button_current,
-.push_button_pressed,
-.buttondown {
-  background-color: #f4e284 !important;
-  -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-  -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-}
-
 #tools_top {
   position: absolute;
   left: 108px;
@@ -405,7 +386,6 @@ hr {
   top: 2px;
   height: 40px;
   border-bottom: none;
-  overflow: auto;
 }
 
 #tools_top .tool_sep {
@@ -515,12 +495,6 @@ input[type=text] {
   padding: 2px;
 }
 
-#tools_left .tool_button,
-#tools_left .tool_button_current {
-  position: relative;
-  z-index: 11;
-}
-
 .dropdown {
   position: relative;
 }
@@ -592,21 +566,6 @@ input[type=text] {
   margin-right: 0;
 }
 
-.tool_button,
-.push_button,
-.tool_button_current,
-.push_button_pressed
-{
-  height: 24px;
-  width: 24px;
-  margin: 2px 2px 4px 2px;
-  padding: 3px;
-  box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
-  background-color: #E8E8E8;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
  #main_menu li#tool_open,  #main_menu li#tool_import {
   position: relative;
   overflow: hidden;
@@ -683,10 +642,6 @@ input[type=text] {
   float: right;
 }
 
-.dropdown li.tool_button {
-  width: 24px;
-}
-
 #stroke_expand {
   width: 0;
   overflow: hidden;
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index ce81af8f..cf8f3313 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1292,7 +1292,7 @@ editor.init = () => {
 
   // fired when user wants to move elements to another layer
   let promptMoveLayerOnce = false;
-  $('#selLayerNames').change( async(evt) => {
+  $('#selLayerNames').change(async (evt) => {
     const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
     const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
     /**
@@ -1310,7 +1310,7 @@ editor.init = () => {
       if (promptMoveLayerOnce) {
         moveToLayer(true);
       } else {
-        const ok = await seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]);
+        const ok = await window.seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]);
         if (ok === uiStrings.common.cancel) {
           return;
         }
@@ -1669,9 +1669,9 @@ editor.init = () => {
    * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
    * @returns {void}
    */
-  const clickClear = async() => {
+  const clickClear = async () => {
     const [x, y] = editor.configObj.curConfig.dimensions;
-    const cancel = await seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
+    const cancel = await window.seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
     if (cancel === uiStrings.common.cancel) {
       return;
     }
@@ -1861,7 +1861,8 @@ editor.init = () => {
     };
 
     if (!svgCanvas.setSvgString(e.detail.value)) {
-      const resp = await seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]);
+      const resp =
+        await window.seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]);
       if (resp === uiStrings.common.cancel) {
         return;
       }
@@ -1972,7 +1973,8 @@ editor.init = () => {
     if (editingsource) {
       const origSource = svgCanvas.getSvgString();
       if (origSource !== e.detail.value) {
-        const resp = await seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]);
+        const resp =
+          await window.seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]);
         if (resp === uiStrings.common.ok) {
           hideSourceEditor();
         }