Section for editing keyboard shortcuts is reasonably complete.

src/common/components/action-alt.vue

@@ -6,7 +6,7 @@
 
       </div>
       <div class="flex action-name">
-        <span class="icon" @click="deleteAction()">🗙</span>
+        <span class="icon" @click="removeAction()">🗙</span>
         <span class="icon" @click="editAction()">🖉</span> {{action.name}}
       </div>
     </div>

src/options/App.vue

@@ -11,6 +11,11 @@
                           @close="closePopups()"
       >
       </AddEditActionPopup>
+      <ConfirmPopup v-if="confirmationDialogText"
+                    :dialogText="confirmationDialogText"
+                    @close="closePopups()"
+                    @confirm="confirm()"
+      />
     </div>
 
     <!-- ACTUAL PAGE -->
@@ -21,7 +26,7 @@
       <div class="header flex flex-column">
         <div class="flex extension-name text-sink-anchor">
           <div class="text-sink title-sink-pad w100 text-center">
-            Ultrawidify Vue
+            Ultrawidify
           </div>
         </div>
 
@@ -39,11 +44,11 @@
               >
               Autodetection
           </div>
-          <div class="menu-item"
+          <div class="menu-item experimental"
               :class="{'selected-tab': selectedTab === 'controls'}"
               @click="setSelectedTab('controls')"
               >
-              Controls
+              Actions
           </div>
           <div class="menu-item"
               :class="{'selected-tab': selectedTab === 'about'}"
@@ -80,15 +85,11 @@
           <ControlsSettings v-if="selectedTab === 'controls'"
                             :settings="settings"
                             @edit-event="showEditActionPopup($event)"
+                            @remove-event="showRemoveActionPopup($event)"
           >
           </ControlsSettings>
 
           <!-- Vice City/beggathon reference: https://youtu.be/Mn3YEJTSYs8?t=770 -->
-          <div style="margin-top: 160px;">
-            TODO  - remove this whne releasing, this is only for debug info.<br/>
-            Selected tab: {{selectedTab}} <small>Title: {{selectedTabTitle}}</small><br/>
-            Any  open popups: {{anyOpenedPopups}}
-          </div>
         </div>
       </div>
     </div>
@@ -109,6 +110,7 @@ import Settings from '../ext/lib/Settings.js';
 import GeneralSettings from './general-settings';
 import ControlsSettings from './controls-settings/controls-settings';
 import AddEditActionPopup from './controls-settings/add-edit-action-popup';
+import ConfirmPopup from './common/ConfirmationPopup';
 
 import AutodetectionSettings  from './autodetection-settings';
 
@@ -124,6 +126,10 @@ export default {
       editActionPopupVisible: false,
       editActionIndex: -1,
       anyOpenedPopups: false,
+      removeConfirmationDialog: '',
+      messages: {
+        removeAction: "Are you sure you want to remove this action?"
+      },
     }
   },
   async created () {
@@ -136,6 +142,7 @@ export default {
     ControlsSettings,
     AddEditActionPopup,
     AutodetectionSettings,
+    ConfirmPopup,
   },
   methods: {
     setSelectedTab(newTab) {
@@ -162,9 +169,24 @@ export default {
       this.editActionIndex = event;
       this.anyOpenedPopups = true;
     },
+    showRemoveActionPopup(indexToRemove) {
+      this.editActionIndex = indexToRemove;
+      this.anyOpenedPopups = true;
+      this.confirmationDialogText = this.messages.removeAction;
+    },
     closePopups(){
       this.anyOpenedPopups = false;
       this.editActionPopupVisible = false;
+      this.confirmationDialogText = '';
+    },
+    confirm(){
+      if (this.confirmationDialogText === this.messages.removeAction) {
+        this.settings.active.actions.splice(this.editActionIndex, 1);
+        this.settings.save();
+      }
+
+
+      this.closePopups();
     }
   }
 };
@@ -182,6 +204,9 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-content: center;
 }
 
 .blur {

src/options/common/ConfirmationPopup.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="full-screen"
+       @click="cancel()"
+  >
+    <div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
+      <div>
+        {{dialogText}}
+      </div>
+      <div class="flex flex-row flex-end">
+        <ShortcutButton class="flex b3 button"
+                        label="Ok"
+                        @click.native="confirm()"
+        />
+        <ShortcutButton class="flex b3 button"
+                        label="Cancel"
+                        @click.native="cancel()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShortcutButton from '../../common/components/shortcut-button.vue' 
+
+export default {
+  props: {
+    dialogText: String,
+  },
+  components: {
+    ShortcutButton
+  },
+  methods: {
+    cancel() {
+      this.$emit('close')
+    },
+    confirm() {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.full-screen {
+  background-color: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.dialog-box {
+  background-color: rgba(0,0,0,0.9);
+  // width: 100%;
+  // height: 100%;
+  max-width: 130rem;
+  max-height: 42rem;
+  padding-top: 2rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+</style>

src/options/controls-settings/add-edit-action-popup.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-screen"
-       @click="$emit('close')"
+       @click="cancel()"
   >
     <div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
       <div class="window-title">
@@ -22,13 +22,6 @@
       >
       </CommandAddEdit>
 
-      <pre style="height: 500px; overflow-y: scroll; overflow-x: hidden">
-        ----- [ raw action data ] -----
-        Action:
-        {{action}}
-        --- [ end raw action data ] ---
-      </pre>
-
       <div class="flex flex-column">
         <div class="flex flex-row">
           <div class="flex label-secondary form-label">
@@ -185,13 +178,14 @@ export default {
       this.action.label = newLabel;
     },
     updateScopes(scope, prop, value) {
-      if(!this.action.scopes[scope]) {
+      console.log("updating scope", scope, "for prop", prop, ". New value:", value)
+      if(this.action.scopes[scope] === undefined) {
         this.action.scopes[scope] = {};
       }
       this.action.scopes[scope][prop] = value;
 
       // TODO: remove for release
-      this.action = JSON.parse(JSON.stringify(this.action))
+      // this.action = JSON.parse(JSON.stringify(this.action))
     },
     addNewCommand() {
       this.currentCmdIndex = -1;
@@ -245,7 +239,7 @@ export default {
   background-color: rgba(0,0,0,0.5);
   display: flex;
   align-items: center;
-  justify-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
   position: absolute;

src/options/controls-settings/command-builder/command-add-edit.vue

@@ -78,20 +78,6 @@
         Save
       </div>
     </div>
-    <pre>
-    ----- [ COMMAND DATA ] -----
-    
-    :: Action:
-    {{action}}
-
-    :: Selected Action:
-    {{selectedAction}}
-    
-    :: Selected Argumennt:
-    {{selectedArgument}}
-    --- [ END COMMAND DATA ] ---  
-  </pre>
-
   </div>
 </template>
 

src/options/controls-settings/controls-settings.vue

@@ -1,6 +1,28 @@
 <template>
   <div>
-    <p>Here, you can change keyboard shortcuts or even create your own.</p>
+    <p>Here you can create, edit or remove actions. This includes adding keyboard shortcuts that trigger them, or toggling visibility of each action in the extension popup.</p>
+    <p><b>Note that this section is highly experimental.</b> If there's extension-breaking bugs, please file a bug report on github or e-mail me.
+    However, there's some bugs that I'm aware of, but have little intentions to fix any time soon: <ul>
+      <li><b>Crop actions</b> (and maybe some others) are limited to the <i>page</i> scope (‘Video settings’ in popup) by design.
+      Yes, 'global' and 'site' checkboxes are still there, but they won't do anything. I probably won't remove them any time soon,
+      because I'd honestly rather spend my finite time on other things.</li>
+      <li>UI looks absolutely atrocious, and it's prolly gonna stay that way for a while. I am open to specific design suggestions, though.</li>
+      <li><b>For shortcuts:</b> you can use modifier keys (ctrl/alt/meta/shift), but remember to release modifier keys last. For example,
+      if you want to do use shift-S for anything: press both keys, release S, release shift. If you release shift first, extension
+      will think you were holding only shift key. You're prolly used to doing things that way already. If you're not — bad news,
+      reworking how keyboard shortcuts work isn't going to happen for a while.</li>
+      <li>I don't think reordering (in a user-friendly way at least) is gonna happen any time soon.</li>
+    </ul>
+    </p>
+
+    <p>&nbsp;</p>
+
+    <div class="flex flex-row button-box">
+      <Button label="Add new action"
+              @click.native="addAction()"
+      >
+      </Button>
+    </div>
 
     <div class="flex flex-column">
       <div class="action-item-category-header">
@@ -11,6 +33,7 @@
                    :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
         >
         </ActionAlt>
       </template>
@@ -24,6 +47,7 @@
                    :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
         >
         </ActionAlt>
       </template>
@@ -37,6 +61,7 @@
                    :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
         >
         </ActionAlt>
       </template>
@@ -55,6 +80,7 @@
                    :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
         >
         </ActionAlt>
       </template>
@@ -76,6 +102,7 @@
                    :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
         >
         </ActionAlt>
       </template>
@@ -114,6 +141,12 @@ export default {
     }
   },
   methods: {
+    removeAction(index) {
+      this.$emit('remove-event', index)
+    },
+    addAction() {
+      this.$emit('edit-event', -1);
+    },
     changeShortcut(index) {
       this.$emit('edit-event', index);
     }

src/options/controls-settings/scope-settings-component/scope-settings.vue

@@ -7,7 +7,7 @@
       <div class="flex flex-input flex-grow">
         <input type="checkbox"
                :checked="scopeOptions.show"
-               @input="$emit('show', $event.target.value)"
+               @input="$emit('show', $event.target.checked)"
         />
       </div>
     </div>