Popup buttons are being added programmatically (video tab only)

js/conf/Debug.js

@@ -8,7 +8,8 @@ Debug = {
   keyboard: true,
   debugResizer: true,
   debugArDetect: true,
-  debugStorage: false,
+  // debugStorage: false,
+  debugStorage: true,
   // comms: false,
   comms: true,
   // showArDetectCanvas: true,

js/conf/ExtensionConf.js

@@ -134,7 +134,7 @@ var ExtensionConf = {
   // List of all possible actions, for use in settings
   // TODO: move to separate file as this shouldn't be user-settable
   actionsList: [{
-    action: 'crop',
+    action: 'set-ar',
     args: [{
       name: 'Automatic',
       arg: 'auto',
@@ -190,7 +190,7 @@ var ExtensionConf = {
   // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov. 
   actions: [{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 'auto'
     }],
     shortcut: [{
@@ -209,7 +209,7 @@ var ExtensionConf = {
     label: 'Automatic'
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 'reset',
     }],
     shortcut: [{
@@ -226,7 +226,7 @@ var ExtensionConf = {
     label: 'Reset',
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 'fitw',
     }],
     shortcut: [{
@@ -243,7 +243,7 @@ var ExtensionConf = {
     label: 'Fit width',
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 'fith',
     }],
     shortcut: [{
@@ -260,7 +260,7 @@ var ExtensionConf = {
     label: 'Fit height',
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 1.78,
     }],
     shortcut: [{
@@ -277,7 +277,7 @@ var ExtensionConf = {
     label: '16:9',
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 2.39,
     }],
     shortcut: [{
@@ -294,7 +294,7 @@ var ExtensionConf = {
     label: '21:9'
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 2.35,
     }],
     shortcut: [{
@@ -311,7 +311,7 @@ var ExtensionConf = {
     label: '2.35',
   },{
     cmd: [{
-      action: 'crop',
+      action: 'set-ar',
       arg: 2.0,
     }],
     shortcut: [{
@@ -403,7 +403,6 @@ var ExtensionConf = {
       action: 'stretch',
       arg: 0,
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,
@@ -414,7 +413,6 @@ var ExtensionConf = {
       action: 'stretch',
       arg: 1,
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,
@@ -425,7 +423,6 @@ var ExtensionConf = {
       action: 'stretch',
       arg: 2,
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,
@@ -436,7 +433,6 @@ var ExtensionConf = {
       action: 'stretch',
       arg: 3,
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,
@@ -451,7 +447,6 @@ var ExtensionConf = {
       action: 'align',
       arg: 'left'
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,
@@ -462,7 +457,6 @@ var ExtensionConf = {
       action: 'align',
       arg: 'center'
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,
@@ -473,7 +467,6 @@ var ExtensionConf = {
       action: 'align',
       arg: 'right'
     }],
-    shortcut: [],
     popup: true,
     popup_site: true,
     popup_global: true,

js/lib/Comms.js

@@ -66,7 +66,7 @@ class CommsClient {
     }
 
     if (message.cmd === "set-ar") {
-      this.pageInfo.setAr(message.ratio);
+      this.pageInfo.setAr(message.arg);
     } else if (message.cmd === 'set-alignment') {
       this.pageInfo.setVideoFloat(message.mode);
       this.pageInfo.restoreAr();
@@ -290,7 +290,7 @@ class CommsServer {
     } else if (message.cmd === 'set-ar') {
       this.sendToActive(message);
     } else if (message.cmd === 'set-custom-ar') {
-      this.settings.active.keyboard.shortcuts.q.arg = message.ratio;
+      this.settings.active.keyboard.shortcuts.q.arg = message.arg;
       this.settings.save();
     } else if (message.cmd === 'set-alignment') {
       this.sendToActive(message);

js/lib/Settings.js

@@ -57,6 +57,13 @@ class Settings {
 
     if(Debug.debug) {
       console.log("[Settings::init] Configuration fetched from storage:", settings);
+
+      if (Debug.flushStoredSettings) {
+        console.log("%c[Settings::init] Debug.flushStoredSettings is true. Using default settings", "background: #d00; color: #ffd");
+        Debug.flushStoredSettings = false; // don't do it again this session
+        this.active = this.getDefaultSettings();
+        return this.active;
+      }
     }
 
     // if there's no settings saved, return default settings.
@@ -191,6 +198,16 @@ class Settings {
     return this.active.sites[site];
   }
 
+  getActionsForSite(site) {
+    if (!site) {
+      return this.active.actions;
+    }
+    if (this.active.sites[site] && this.active.sites[site].actions && this.active.sites[site].actions.length > 0) {
+      return this.active.sites[site].actions;
+    }
+    return this.active.actions;
+  }
+
   getExtensionMode(site) {
     if (!site) {
       site = window.location.hostname;

js/lib/libghettoui/BaseElement.js

@@ -0,0 +1,56 @@
+class BaseElement {
+  constructor(id, label, onClick, additionalClasses, existingElement) {
+    console.log("additional classes", additionalClasses)
+
+    if (existingElement) {
+      this.element = existingElement;
+    } else {
+      this.element = document.createElement('div');
+      this.element.setAttribute('id', id);
+    }
+    if (additionalClasses) {
+      this.element.classList.add(...additionalClasses);
+    }
+    if (onClick) {
+      this.element.addEventListener('click', onClick);
+    }
+    if (label && !existingElement) {
+      this.element.innerHTML = label;
+    }
+  }
+
+  static fromExisting(element, onClick){
+    return new BaseElement(undefined, undefined, onClick, undefined, element);
+  }
+
+  disable() {
+    this.element.classList.add('disabled');
+  }
+  enable() {
+    this.element.classList.remove('disabled');
+  }
+  hide() {
+    this.element.classList.add('hidden');
+  }
+  show() {
+    this.element.classList.remove('hidden');
+  }
+  select() {
+    this.element.classList.add('selected');
+  }
+  unselect() {
+    this.element.classList.remove('selected');
+  }
+  appendTo(element) {
+    if (element.element) {
+      element.element.appendChild(this.element);
+    } else {
+      element.appendChild(this.element);
+    }
+  }
+  removeChildren() {
+    while (this.element.lastChild) {
+      this.element.removeChild(this.element.lastChild);
+    }
+  }
+}

js/lib/libghettoui/BaseUi.js

@@ -1,35 +0,0 @@
-class BaseUi {
-  constructor(id, label, onClick, additionalClasses) {
-    this.element = document.createElement('div');
-    this.element.setAttribute('id', id);
-    if (additionalClasses) {
-      this.element.classList.add(...additionalClasses);
-    }
-    if (onClick) {
-      this.element.addEventListener('click', onClick);
-    }
-    this.element.innerHTML = label;
-  }
-
-  disable() {
-    this.element.classList.add('disabled');
-  }
-  enable() {
-    this.element.classList.remove('disabled');
-  }
-  hide() {
-    this.element.classList.add('hidden');
-  }
-  show() {
-    this.element.classList.remove('hidden');
-  }
-  select() {
-    this.element.classList.add('selected');
-  }
-  unselect() {
-    this.element.classList.remove('selected');
-  }
-  appendTo(element) {
-    element.appendChild(this.element);
-  }
-}

js/lib/libghettoui/buttons/Button.js

@@ -1,5 +1,7 @@
-class ShortcutButton extends BaseUi {
+class Button extends BaseElement {
   constructor(id, label, onClick, additionalClasses) {
+    console.log("additional classes", additionalClasses)
+
     super(
       id,
       label,

js/lib/libghettoui/buttons/ShortcutButton.js

@@ -1,5 +1,6 @@
 class ShortcutButton extends Button {
   constructor(id, label, shortcutLabel, onClick, additionalClasses) {
+    console.log("additional classes -- sb", additionalClasses)
     super(
       id,
       `${label}<br/><span class="smallcaps small darker">(${shortcutLabel})`,

js/lib/libghettoui/popup/MenuItem.js

@@ -1,4 +1,4 @@
-class MenuItem extends BaseUi {
+class MenuItem extends BaseElement {
   constructor(id, label, sublabel, onClick, additionalClasses) {
     super(
       id, 

js/lib/libghettoui/popup/TabItem.js

@@ -1,4 +1,4 @@
-class TabItem extends BaseUi {
+class TabItem extends BaseElement {
 
   constructor (id, name, label, isIframe, onClick, additionalClasses) {
     super(id, label, onClick, additionalClasses);

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Ultrawidify",
-  "version": "3.3.0-a2",
+  "version": "3.3.0-a3",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

res/popup/js/popup.js

@@ -95,9 +95,8 @@ async function processReceivedMessage(message, port){
       port.postMessage({cmd: 'get-current-zoom'});
     }
     site = message.site;
-    if(message.site.host)
+    loadConfig(site.host);
-    loadConfig(message.site.host);
+    loadFrames(site);
-    loadFrames(message.site);
   } else if (message.cmd === 'set-current-zoom') {
     setCurrentZoom(message.zoom);
   }
@@ -147,6 +146,7 @@ function stringToKeyCombo(key_in){
 }
 
 function configurePopupTabs(site) {
+  return;
   // todo: this can potentially be removed
 
   // Determine which tabs can we touch.
@@ -169,6 +169,18 @@ function configurePopupTabs(site) {
   }
 }
 
+
+
+function basicCommandHandler(cmdArray) {
+  for (cmd of cmdArray) {
+    port.postMessage({
+      cmd: cmd.action,
+      arg: cmd.arg
+    });
+  }
+
+}
+
 function configureGlobalTab() {
   return; // todo: revisit
   if (Debug.debug) {
@@ -249,61 +261,72 @@ function configureSitesTab(site) {
   }
 }
 
-function configureVideoTab() {
+function configureVideoTab(site) {
-  // process keyboard shortcuts for crop settings
+  const popupButtons = settings.getActionsForSite(site).filter(action => action.popup === true); 
-  if(settings.active.keyboard.shortcuts){
-    for(var key in settings.active.keyboard.shortcuts){
-      var shortcut = settings.active.keyboard.shortcuts[key];
-      var keypress = stringToKeyCombo(key);
-      
-      try{
-        if(shortcut.action == "crop"){
-          if (key == 'q') {
-            _changeAr_button_shortcuts["custom"] = keypress;
-          }
-          else if(shortcut.arg == 2.0){
-            _changeAr_button_shortcuts["189"] = keypress;
-          }
-          else if(shortcut.arg == 2.39){
-            _changeAr_button_shortcuts["219"] = keypress;
-          }
-          else if(shortcut.arg == 1.78){
-            _changeAr_button_shortcuts["169"] = keypress;
-          }
-          else if(shortcut.arg == "fitw") {
-            _changeAr_button_shortcuts["fitw"] = keypress;
-          }
-          else if(shortcut.arg == "fith") {
-            _changeAr_button_shortcuts["fith"] = keypress;
-          }
-          else if(shortcut.arg == "reset") {
-            _changeAr_button_shortcuts["reset"] = keypress;
-          }
-        }
-        else if(shortcut.action == "auto-ar") {
-            _changeAr_button_shortcuts["auto-ar"] = keypress;
-        }
-      }
-      catch(Ex){
-        //do nothing if key doesn't exist
-      }
-    }
 
-    // fill in custom aspect ratio
+  const cropButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-ar');
-    if (settings.active.keyboard.shortcuts.q) {
+  const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'stretch');
-      document.getElementById("_input_custom_ar").value = settings.active.keyboard.shortcuts.q.arg;
+  const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'align');
-    }
 
-    for(var key in _changeAr_button_shortcuts){
+  if (cropButtons.length === 0) {
-      try{
+    VideoPanel.elements.cropSettings.container.hide();
-        document.getElementById(`_b_changeAr_${key}_key`).textContent = `(${_changeAr_button_shortcuts[key]})`;
+  } else {
-      }
+    VideoPanel.elements.cropSettings.buttonContainer.removeChildren();
-      catch(ex){
+    VideoPanel.elements.cropSettings.container.show();
-        
+    VideoPanel.elements.cropSettings.buttonContainer.show();
-      }
+
+    for (button in cropButtons) {
+      const nb = new ShortcutButton(
+        '',
+        button.label,
+        (button.shortcut && button.shortcut[0].key ? button.shortcut[0].key.toUpperCase() : ''),
+        () => basicCommandHandler(button.cmd),
+        ['w24']
+      )
+      console.log("BUTON CONTAINER", VideoPanel.elements.cropSettings.buttonContainer)
+      nb.appendTo(VideoPanel.elements.cropSettings.buttonContainer);
     }
   }
 
+  if (stretchButtons.length === 0) {
+    VideoPanel.elements.stretchSettings.container.hide();
+  } else {
+    VideoPanel.elements.stretchSettings.buttonContainer.removeChildren();
+    VideoPanel.elements.stretchSettings.container.show();
+    VideoPanel.elements.stretchSettings.buttonContainer.show();
+
+    for (button in stretchButtons) {
+      const nb = new ShortcutButton(
+        '',
+        button.label,
+        button.shortcut && button.shortcut[0].key ? button.shortcut[0].key.toUpperCase() : '',
+        () => basicCommandHandler(button.cmd),
+        ['w24']
+      )
+      nb.appendTo(VideoPanel.elements.stretchSettings.buttonContainer);
+    }
+  }
+
+  if (alignButtons.length === 0) {
+    VideoPanel.elements.stretchSettings.container.hide();
+  } else {
+    VideoPanel.elements.alignmentSettings.buttonContainer.removeChildren();
+    VideoPanel.elements.alignmentSettings.container.show();
+    VideoPanel.elements.alignmentSettings.buttonContainer.show();
+
+    for (button in alignButtons) {
+      const nb = new ShortcutButton(
+        '',
+        button.label,
+        button.shortcut && button.shortcut[0].key ? button.shortcut[0].key.toUpperCase() : '',
+        () => basicCommandHandler(),
+        ['w24']
+      )
+      nb.appendTo(VideoPanel.elements.alignmentSettings.buttonContainer);
+    }
+  }
+
+
   // todo: get min, max from settings
   VideoPanel.inputs.zoomSlider.min = Math.log2(0.5);
   VideoPanel.inputs.zoomSlider.max = Math.log2(8);
@@ -330,8 +353,6 @@ function configureVideoTab() {
 
 async function loadConfig(site){
 
-  console.log("NEW CONFIG!")
-
   if (Debug.debug) {
     console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active);
   }
@@ -339,7 +360,7 @@ async function loadConfig(site){
   configurePopupTabs(site);
   configureGlobalTab();
   configureSitesTab(site);
-  configureVideoTab();
+  configureVideoTab(site);
 
   if (Debug.debug) {
     console.log("[popup.js::loadConfig] config loaded\n-----------------------\n\n");
@@ -798,16 +819,6 @@ async function popup_init() {
   }
 
 
-  const customArInputField = document.getElementById("_input_custom_ar");
-  const autoarFrequencyInputField = document.getElementById("_input_autoAr_timer");
-
-  customArInputField.addEventListener("blur", (event) => {
-    validateCustomAr();
-  });
-  customArInputField.addEventListener("mouseleave", (event) => {
-    validateCustomAr();
-  });
-
   // autoarFrequencyInputField.addEventListener("blur", (event) => {
   //   validateAutoArTimeout();
   // });

res/popup/js/popupvars.js

@@ -61,21 +61,19 @@ SitePanel.stretch['3']         = document.getElementById("_stretch_site_conditio
 
 //#region VideoPanel
 var VideoPanel = {};
-VideoPanel.alignment = {};
+VideoPanel.elements = {};
-VideoPanel.alignment.left   = document.getElementById("_align_video_left");
+VideoPanel.elements.cropSettings = {
-VideoPanel.alignment.center = document.getElementById("_align_video_center");
+  container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')),
-VideoPanel.alignment.right  = document.getElementById("_align_video_right");
+  buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons'))
-
+}
-// labels on buttons
+VideoPanel.elements.stretchSettings = {
-VideoPanel.buttonLabels = {};
+  container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch')),
-VideoPanel.buttonLabels.crop = {};
+  buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch_buttons'))
-VideoPanel.buttonLabels.crop['auto-ar'] = document.getElementById("_b_changeAr_auto-ar_key");
+}
-VideoPanel.buttonLabels.crop.reset      = document.getElementById("_b_changeAr_reset_key");
+VideoPanel.elements.alignmentSettings = {
-VideoPanel.buttonLabels.crop['219']     = document.getElementById("_b_changeAr_219_key");
+  container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment')),
-VideoPanel.buttonLabels.crop['189']     = document.getElementById("_b_changeAr_189_key");
+  buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment_buttons'))
-VideoPanel.buttonLabels.crop['169']     = document.getElementById("_b_changeAr_169_key");
+}
-VideoPanel.buttonLabels.crop.custom     = document.getElementById("_b_changeAr_custom_key");
-VideoPanel.buttonLabels.zoom = {};
 
 // buttons: for toggle, select
 VideoPanel.buttons = {};
@@ -88,7 +86,6 @@ VideoPanel.buttons.changeAr.hideCustomAr = document.getElementById("_changeAr_b_
 
 // inputs (getting values)
 VideoPanel.inputs = {};
-VideoPanel.inputs.customCrop       = document.getElementById("_input_custom_ar");
 VideoPanel.inputs.zoomSlider       = document.getElementById("_input_zoom_slider");
 VideoPanel.inputs.allowPan         = document.getElementById("_input_zoom_site_allow_pan");
 
@@ -99,5 +96,4 @@ VideoPanel.labels.zoomLevel        = document.getElementById("_label_zoom_level"
 // misc stuff
 VideoPanel.misc = {};
 VideoPanel.misc.zoomShortcuts      = document.getElementById("_zoom_shortcuts");
-VideoPanel.misc.customArChanger    = document.getElementById("_changeAr_customAr");
 //#endregion

res/popup/popup.html

@@ -132,35 +132,20 @@
       <div id="_menu_settings_video" class="suboption">
 
         <!-- CROP STUFF -->
-        <div class="row">
+        <div id="_menu_settings_video_crop" class="row">
           <span class="label">Cropping mode</span>
-          <div class="button-row">
+          <div id="_menu_settings_video_crop_buttons" class="button-row">
-            <a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_auto-ar_key" class="smallcaps small darker"></span>&nbsp;</a>
+
-            <a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker">&nbsp;</span></a>
-            <a class="button _changeAr _ar_custom w24">Custom<br/><span id="_b_changeAr_custom_key" class="smallcaps small darker">&nbsp;</span></a>
           </div>
-          <div style="overflow: auto">
+          <!-- todo: redirect 'custom aspect ratio' to settings -->
+          <!-- <div style="overflow: auto">
             <div class="float-right medium-small">
               <a id="_changeAr_b_show_customAr" class="_changeAr_show_customAr x-pad-1em">Set custom aspect ratio</a>
-              <a id="_changeAr_b_hide_customAr" class="_changeAr_hide_customAr hidden x-pad-1em">Hide custom aspect ratio settings</a>
             </div>
-          </div>
+          </div> -->
-        </div>
-        <div id="_changeAr_customAr" class="row hidden">
-          <span class="label">Custom aspect ratio</span>
-          <div>
-            <input id="_input_custom_ar" class="_changeAr _custom" onblur="validateCustomAr()"> &nbsp; &nbsp; <span id="_b_changeAr_save_custom_ar" class="button _ar_save_custom_ar _changeAr">Save</span>
-            <br/><small>Aspect ratio can be entered in any of these forms (without quotes): 
-              <ul style="display: block; padding-top: 0px; margin-top: 0px">
-                <li>fraction (<i>width/height</i>, e.g. <i>16/10</i>, <i>2560/1080</i>, etc.)</li>
-                <li>ratio (e.g. <i>1:2.35</i> or simply <i>2.35</i> — <i>1:</i> bit can be left out)</li>
-              </ul></small>
-          </div>
         </div>
 
+
         <!-- ZOOM STUFF -->
         <span class="label experimental">Manual zooming and panning</span>
         <div class="row">
@@ -199,21 +184,16 @@
         </div>
 
         <!-- STRETCH STUFF -->
-        <span class="label experimental">Stretching mode</span>
+        <div id="_menu_settings_video_stretch" class="row">
-        <div class="button-row">
+          <span class="label experimental">Stretching mode</span>
-          <a class="button _stretch _ar_stretch_none w24">Normal<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
+          <div id="_menu_settings_video_stretch_buttons" class="button-row">
-          <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>            
+          </div>
-          <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_stretch_hybrid_key" class="smallcaps small darker"></span></a>
-          <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_stretch_conditional_key" class="smallcaps small darker"></span></a>
         </div>
 
         <!-- VIDEO ALIGNMENT -->
-        <div class="row">
+        <div id="_menu_settings_video_alignment" class="row">
           <span class="label">Video alignment:</span>
-          <div class="button-row">
+          <div id="_menu_settings_video_alignment_buttons" class="button-row">
-            <a id="_align_video_left"   class="button _align _align_video_left">Left</a>
-            <a id="_align_video_center" class="button _align _align_video_center">Center</a>
-            <a id="_align_video_right"  class="button _align _align_video_right">Right</a>
           </div>
         </div>
       </div>
@@ -244,9 +224,11 @@
     <script src="../../js/lib/Settings.js"></script>
     
     <!-- ui libs -->
-    <script src="../../js/lib/libghettoui/BaseUi.js"></script>
+    <script src="../../js/lib/libghettoui/BaseElement.js"></script>
     <script src="../../js/lib/libghettoui/popup/MenuItem.js"></script>
     <script src="../../js/lib/libghettoui/popup/TabItem.js"></script>
+    <script src="../../js/lib/libghettoui/buttons/Button.js"></script>
+    <script src="../../js/lib/libghettoui/buttons/ShortcutButton.js"></script>