Action table is now actually a table

js/conf/ExtensionConf.js

@@ -3,7 +3,7 @@ if(Debug.debug)
 
 var ExtensionConf = {
   basicExtensionMode: "blacklist",
-  extensionMode: "whitelist", // how should this extension work? 
+  extensionMode: "blacklist", // how should this extension work? 
                               //       'blacklist' - work everywhere except blacklist
                               //       'whitelist' - only work on whitelisted sites
                               //       'disabled'  - work nowhere
@@ -209,6 +209,7 @@ var ExtensionConf = {
     popup_site: false,  // optional, false by default
     popup_global: false,// optional, false by default
     ui: true,
+    ui_path: 'crop',
     label: 'Automatic'
   },{
     cmd: [{
@@ -226,6 +227,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: 'Reset',
   },{
     cmd: [{
@@ -243,6 +245,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: 'Fit width',
   },{
     cmd: [{
@@ -260,6 +263,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: 'Fit height',
   },{
     cmd: [{
@@ -277,6 +281,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: '16:9',
   },{
     cmd: [{
@@ -294,6 +299,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: '21:9'
   },{
     cmd: [{
@@ -311,6 +317,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: '2.35',
   },{
     cmd: [{
@@ -328,6 +335,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: '18:9'
   },{
     cmd: [{
@@ -345,6 +353,7 @@ var ExtensionConf = {
     }],
     popup: false,
     ui: false,
+    ui_path: 'crop',
     label: 'Zoom',
   },{
     cmd: [{
@@ -379,6 +388,7 @@ var ExtensionConf = {
     }],
     popup: true,
     ui: true,
+    ui_path: 'crop',
     label: 'Toggle panning mode',
   },{
     cmd: [{
@@ -396,6 +406,7 @@ var ExtensionConf = {
     }],
     popup: false,
     ui: false,
+    ui_path: 'crop',
     label: 'Pan (hold)'
   },
   //
@@ -420,6 +431,7 @@ var ExtensionConf = {
     popup_site: true,
     popup_global: true,
     ui: true,
+    ui_path: 'stretch',
     label: 'Basic'
   },{
     cmd: [{
@@ -430,6 +442,7 @@ var ExtensionConf = {
     popup_site: true,
     popup_global: true,
     ui: true,
+    ui_path: 'stretch',
     label: 'Hybrid'
   },{
     cmd: [{
@@ -440,6 +453,7 @@ var ExtensionConf = {
     popup_site: true,
     popup_global: true,
     ui: true,
+    ui_path: 'stretch',
     label: 'Thin borders'
   },{
     cmd: [{
@@ -464,6 +478,7 @@ var ExtensionConf = {
     popup_site: true,
     popup_global: true,
     ui: true,
+    ui_path: 'align',
     label: 'Left',
   },{
     cmd: [{
@@ -474,6 +489,7 @@ var ExtensionConf = {
     popup_site: true,
     popup_global: true,
     ui: true,
+    ui_path: 'align',
     label: 'Center',
   },{
     cmd: [{
@@ -484,6 +500,7 @@ var ExtensionConf = {
     popup_site: true,
     popup_global: true,
     ui: true,
+    ui_path: 'align',
     label: 'Right',
   },{
     cmd: [{
@@ -511,6 +528,7 @@ var ExtensionConf = {
     popup_global: true,
     popup_site: false,
     ui: true,
+    ui_path: 'settings/global',
     label: 'Enable'
   },{
     cmd: [{
@@ -522,6 +540,7 @@ var ExtensionConf = {
     popup_global: true,
     popup_site: false,
     ui: true,
+    ui_path: 'settings/global',
     label: 'On whitelisted only'
   },{
     cmd: [{
@@ -533,6 +552,7 @@ var ExtensionConf = {
     popup_global: true,
     popup_site: false,
     ui: true,
+    ui_path: 'settings/global',
     label: 'Disabled'
   },{
     // site-only
@@ -545,6 +565,7 @@ var ExtensionConf = {
     popup_global: false,
     popup_site: true,
     ui: true,
+    ui_path: 'settings/site',
     label: 'Enable'
   },{
     cmd: [{
@@ -556,6 +577,7 @@ var ExtensionConf = {
     popup_global: false,
     popup_site: true,
     ui: true,
+    ui_path: 'settings/site',
     label: 'Use default option'
   },{
     cmd: [{
@@ -567,6 +589,7 @@ var ExtensionConf = {
     popup_global: false,
     popup_site: true,
     ui: true,
+    ui_path: 'settings/site',
     label: 'Disable'
   },{ // extension options:
       // global
@@ -579,6 +602,7 @@ var ExtensionConf = {
     popup_global: true,
     popup_site: false,
     ui: true,
+    ui_path: 'settings/global',
     label: 'Enable'
   },{
     cmd: [{
@@ -590,6 +614,7 @@ var ExtensionConf = {
     popup_global: true,
     popup_site: false,
     ui: true,
+    ui_path: 'settings/global',
     label: 'On whitelisted only'
   },{
     cmd: [{
@@ -601,6 +626,7 @@ var ExtensionConf = {
     popup_global: true,
     popup_site: false,
     ui: true,
+    ui_path: 'settings/global',
     label: 'Disabled'
   },{
     // site-only
@@ -613,6 +639,7 @@ var ExtensionConf = {
     popup_global: false,
     popup_site: true,
     ui: true,
+    ui_path: 'settings/global',
     label: 'Enable'
   },{
     
@@ -625,6 +652,7 @@ var ExtensionConf = {
     popup_global: false,
     popup_site: true,
     ui: true,
+    ui_path: 'settings/global',
     label: 'Use default option'
   },{
     cmd: [{
@@ -636,6 +664,7 @@ var ExtensionConf = {
     popup_global: false,
     popup_site: true,
     ui: true,
+    ui_path: 'settings/site', 
     label: 'Disable'
   },],
   // -----------------------------------------

js/lib/libghettoui/settings/ActionItem.js

@@ -1,39 +1,36 @@
 class ActionItem extends BaseElement {
   constructor(id, action, onClick) {
-    super(id, undefined, onClick);
-    this.element.classList.add("action-list-item", "flex", "flex-row");
+    super(id, undefined, onClick, undefined, document.createElement('tr'));
+    this.element.classList.add("action-list-item");
     
-    // action list item looks like this
-    // [  action.label          | shortcut | visibility checkboxes ]
-
-    var cmd = document.createElement('div')
-    var label = document.createElement('div');
-    var shortcut = document.createElement('div');
-    var popupVideoCb = document.createElement('div');
-    var popupSiteCb = document.createElement('div');
-    var popupGlobalCb = document.createElement('div');
-    var playerUi = document.createElement('div');
-    
-    cmd.classList.add('cmd', 'flex');
-    label.classList.add('label', 'flex');
-    shortcut.classList.add('shortcut', 'flex');
-    popupVideoCb.classList.add('checkbox', 'flex');
-    popupSiteCb.classList.add('checkbox', 'flex');
-    popupGlobalCb.classList.add('checkbox', 'flex');
-    playerUi.classList.add('checkbox', 'flex');
-
+    let cmd = "";
     for (var c in action.cmd) {
-      cmd.textContent += `${c > 0 ? '; ' : ''}${action.cmd[0].action} ${action.cmd[0].arg}`
+      cmd += `${c > 0 ? '; ' : ''}${action.cmd[0].action} ${action.cmd[0].arg}`
     }
-    label.textContent = action.label;
-    shortcut.textContent = action.parsedShortcut;
 
-    this.element.appendChild(label);
-    this.element.appendChild(cmd);
-    this.element.appendChild(shortcut);
-    this.element.appendChild(popupVideoCb);
-    this.element.appendChild(popupSiteCb);
-    this.element.appendChild(popupGlobalCb);
-    this.element.appendChild(playerUi);
+    this.element.innerHTML = `
+      <td class="cmd monospace">${cmd}</td>
+      <td class="label">${action.label ? action.label : ""}</td>
+      <td class="shortcut">${action.parsedShortcut ? action.parsedShortcut : ""}</td>
+      <td class="checkbox">
+        <input type="checkbox" disabled ${
+          action.shortcut && action.shortcut.length && (action.shortcut[0].onMouseMove || action.shortcut[0].onClick || action.shortcut[0].onScroll)  ?
+          "checked" : ""
+        }>
+      </td>
+      <td class="checkbox">
+        <input type="checkbox" disabled ${action.popup_global ? "checked" : ""}>
+      </td>
+      <td class="checkbox">
+        <input type="checkbox" disabled ${action.popup_site ? "checked" : ""}>
+      </td>
+      <td class="checkbox">
+        <input type="checkbox" disabled ${action.popup_ ? "checked" : ""}>
+      </td>
+      <td class="checkbox">
+        <input type="checkbox" disabled ${action.ui ? "checked" : ""}>
+      </td>
+      <td>${action.ui_path ? action.ui_path : ""}</td>
+    `;
   }
 }

res/popup/js/popup.js

@@ -72,12 +72,18 @@ function loadFrames(videoTab) {
     }
   }
 
+  if (videoTab.frames.length < 2) {
+    return;
+  }
+
   function onTabitemClick(item) {
     tablist[selectedMenu].tab.selectSubitem(item);
     selectedSubitem[selectedMenu] = item;
     port.postMessage({cmd: 'popup-set-selected-tab', selectedMenu: selectedMenu, selectedSubitem: item});
   }
 
+
+
   for (var option of [{id: '__all', label: 'All'},{id: '__playing', label: 'Currently playing'}]) {
     const id = option.id;
     var newItem = new TabItem(

res/settings/js/customization.js

@@ -30,10 +30,20 @@ function loadActions() {
     zoomPanActions.indexOf(action) === -1 )
   );
 
+  ActionItemCategoryHeaderProcessor.addCategoryName(ui.customization.actionList.element, "Crop actions");
+  ActionItemCategoryHeaderProcessor.addTableHeader(ui.customization.actionList.element);
   loadActionSection(cropActions, ui.customization.actionList);
+  ActionItemCategoryHeaderProcessor.addCategoryName(ui.customization.actionList.element, "Stretch actions");
+  ActionItemCategoryHeaderProcessor.addTableHeader(ui.customization.actionList.element);
   loadActionSection(stretchActions, ui.customization.actionList);
+  ActionItemCategoryHeaderProcessor.addCategoryName(ui.customization.actionList.element, "Alignment actions");
+  ActionItemCategoryHeaderProcessor.addTableHeader(ui.customization.actionList.element);
   loadActionSection(alignActions, ui.customization.actionList);
+  ActionItemCategoryHeaderProcessor.addCategoryName(ui.customization.actionList.element, "Zoom actions");
+  ActionItemCategoryHeaderProcessor.addTableHeader(ui.customization.actionList.element);
   loadActionSection(zoomPanActions, ui.customization.actionList);
+  ActionItemCategoryHeaderProcessor.addCategoryName(ui.customization.actionList.element, "Other actions");
+  ActionItemCategoryHeaderProcessor.addTableHeader(ui.customization.actionList.element);
   loadActionSection(otherActions, ui.customization.actionList);
 
   ui.customization.actionItems.push(cropActions);
@@ -45,6 +55,10 @@ function loadActions() {
   console.log("ui.customization:", ui.customization)
 }
 
+function loadSectionHeader(title) {
+
+}
+
 function loadActionSection(actions, container) {
   for(action of actions) {
     if (action.shortcut && action.shortcut[0].key) {

res/settings/settings.html

@@ -196,7 +196,7 @@
         <div class="description">
           <p>In this sections, you can define custom actions, add or change keyboard shortcut or hide buttons from the popup.</p>
         </div>
-        <div class="flex flex-column" id="_customization_action_list">
+        <table id="_customization_action_list">
 
         </div>
       </div>     
@@ -231,6 +231,8 @@
     <!-- ui libs -->
     <script src="../../js/lib/libghettoui/BaseElement.js"></script>
     <script src="../../js/lib/libghettoui/settings/ActionItem.js"></script>
+    <script src="../../js/lib/libghettoui/settings/ActionItemCategoryHeaderProcessor.js"></script>
+
     <script src="js/settingsvars.js"></script>
     <script src="js/customization.js"></script>
     <script src="js/settings.js"></script>