Preparation for a future commit and fix ;F in the MOW.

common/content/commandline.js

@@ -110,26 +110,6 @@ const CommandLine = Module("commandline", {
         this._startHints = false; // whether we're waiting to start hints mode
         this._lastSubstring = "";
 
-        memoize(this, "widgets", function () {
-            let widgets = {
-                commandline: document.getElementById("dactyl-commandline"),
-                prompt: document.getElementById("dactyl-commandline-prompt"),
-                command: document.getElementById("dactyl-commandline-command"),
-
-                message: document.getElementById("dactyl-message"),
-
-                multilineOutput: document.getElementById("dactyl-multiline-output"),
-                multilineInput: document.getElementById("dactyl-multiline-input")
-            };
-
-            widgets.command.inputField.QueryInterface(Ci.nsIDOMNSEditableElement);
-            widgets.message.inputField.QueryInterface(Ci.nsIDOMNSEditableElement);
-            widgets.mowContainer = widgets.multilineOutput.parentNode;
-
-            widgets.multilineOutput.contentDocument.body.id = "dactyl-multiline-output-content";
-            return widgets;
-        });
-
         // we need to save the mode which were in before opening the command line
         // this is then used if we focus the command line again without the "official"
         // way of calling "open"
@@ -344,6 +324,26 @@ const CommandLine = Module("commandline", {
         }, this);
     },
 
+    widgets: Class.memoize(function () {
+        let widgets = {
+            commandline: document.getElementById("dactyl-commandline"),
+            prompt: document.getElementById("dactyl-commandline-prompt"),
+            command: document.getElementById("dactyl-commandline-command"),
+
+            message: document.getElementById("dactyl-message"),
+
+            multilineOutput: document.getElementById("dactyl-multiline-output"),
+            multilineInput: document.getElementById("dactyl-multiline-input")
+        };
+
+        widgets.command.inputField.QueryInterface(Ci.nsIDOMNSEditableElement);
+        widgets.message.inputField.QueryInterface(Ci.nsIDOMNSEditableElement);
+        widgets.mowContainer = widgets.multilineOutput.parentNode;
+
+        widgets.multilineOutput.contentDocument.body.id = "dactyl-multiline-output-content";
+        return widgets;
+    }),
+
     // @param type can be:
     //  "submit": when the user pressed enter in the command line
     //  "change"

common/content/configbase.js

@@ -127,8 +127,7 @@ const ConfigBase = Class(ModuleBase, {
      */
     scripts: [],
 
-    get tabStrip()
+    tabStrip: Class.memoize(function () document.getElementById("TabsToolbar") || this.tabbrowser.mTabContainer),
-        Class.replaceProperty(this, "tabStrip", document.getElementById("TabsToolbar") || this.tabbrowser.mTabContainer),
 
     /**
      * @property {string} The leaf name of any temp files created by

common/content/dactyl.xul

@@ -9,8 +9,11 @@
 
 <?xml-stylesheet href="chrome://dactyl/skin/dactyl.css" type="text/css"?>
 <!DOCTYPE overlay SYSTEM "dactyl.dtd" [
-    <!ENTITY dactyl.content "chrome://dactyl/content/">
     <!ENTITY and "&amp;&amp;">
+    <!ENTITY dactyl.content "chrome://dactyl/content/">
+    <!ENTITY commandline "window.dactyl &and; dactyl.modules.commandline">
+    <!ENTITY events "if (window.dactyl &and; dactyl.modules.loaded.events) dactyl.modules.events">
+    <!ENTITY status "dactyl-statusline-field-">
 ]>
 
 <overlay id="dactyl"
@@ -24,8 +27,8 @@
 
     <window id="&dactyl.mainWindow;">
         <keyset id="mainKeyset">
-            <key id="key_open_vimbar" key=":" oncommand="window.dactyl &and; dactyl.modules.commandline.open(':', '', dactyl.modules.modes.EX);" modifiers=""/>
+            <!-- Why do we need this? ––Kris -->
-            <key id="key_stop" keycode="VK_ESCAPE" oncommand="window.dactyl &and; dactyl.modules.events.onEscape();"/>
+            <key id="key_stop" keycode="VK_ESCAPE" oncommand="&events;.onEscape();"/>
             <!-- other keys are handled inside the event loop in events.js -->
         </keyset>
 
@@ -35,61 +38,68 @@
 
         <!--this notifies us also of focus events in the XUL
             from: http://developer.mozilla.org/en/docs/XUL_Tutorial:Updating_Commands !-->
-        <commandset id="onPentadactylFocus"
+        <!-- I don't think we really need this. ––Kris -->
-            commandupdater="true"
+        <commandset id="onPentadactylFocus" commandupdater="true" events="focus"
-            events="focus"
+            oncommandupdate="&events;.onFocusChange(event);"/>
-            oncommandupdate="if (window.dactyl &and; dactyl.modules.loaded.events) dactyl.modules.events.onFocusChange(event);"/>
+        <commandset id="onPentadactylSelect" commandupdater="true" events="select"
-        <commandset id="onPentadactylSelect"
+            oncommandupdate="&events;.onSelectionChange(event);"/>
-            commandupdater="true"
-            events="select"
-            oncommandupdate="if (window.dactyl &and; dactyl.modules.loaded.events) dactyl.modules.events.onSelectionChange(event);"/>
 
         <!-- As of Firefox 3.1pre, iframe.height changes do not seem to have immediate effect,
              therefore we need to put them into a <vbox> for which that works just fine -->
         <vbox class="dactyl-container" hidden="false" collapsed="true">
             <iframe id="dactyl-multiline-output" src="chrome://dactyl/content/buffer.xhtml"
                 flex="1" hidden="false" collapsed="false"
-                onclick="window.dactyl &and; dactyl.modules.commandline.onMultilineOutputEvent(event)"/>
+                onclick="&commandline;.onMultilineOutputEvent(event)"/>
         </vbox>
 
         <vbox class="dactyl-container" hidden="false" collapsed="true">
             <iframe id="dactyl-completions" src="chrome://dactyl/content/buffer.xhtml"
                 flex="1" hidden="false" collapsed="false"
-                onclick="window.dactyl &and; dactyl.modules.commandline.onMultilineOutputEvent(event)"/>
+                onclick="&commandline;.onMultilineOutputEvent(event)"/>
         </vbox>
 
         <stack orient="horizontal" align="stretch" class="dactyl-container" dactyl:highlight="CmdLine">
+            <textbox class="plain" id="dactyl-mode"    flex="1" readonly="true" dactyl:highlight="Normal"/>
             <textbox class="plain" id="dactyl-message" flex="1" readonly="true" dactyl:highlight="Normal"/>
-            <hbox id="dactyl-commandline" hidden="false" collapsed="true" class="dactyl-container" dactyl:highlight="Normal">
+
-                <label class="plain" id="dactyl-commandline-prompt"  flex="0" crop="end" value="" collapsed="true"/>
+            <hbox id="dactyl-commandline" hidden="false" class="dactyl-container" dactyl:highlight="Normal" collapsed="true">
+                <label   class="plain" id="dactyl-commandline-prompt"  flex="0" crop="end" value="" collapsed="true"/>
                 <textbox class="plain" id="dactyl-commandline-command" flex="1" type="search" timeout="100"
-                    oninput="window.dactyl &and; dactyl.modules.commandline.onEvent(event);"
+                    oninput="&commandline;.onEvent(event);" onkeyup="&commandline;.onEvent(event);"
-                    onkeyup="window.dactyl &and; dactyl.modules.commandline.onEvent(event);"
+                    onfocus="&commandline;.onEvent(event);" onblur="&commandline;.onEvent(event);"/>
-                    onfocus="window.dactyl &and; dactyl.modules.commandline.onEvent(event);"
-                    onblur="window.dactyl &and; dactyl.modules.commandline.onEvent(event);"/>
             </hbox>
         </stack>
 
         <vbox class="dactyl-container" hidden="false" collapsed="false" dactyl:highlight="CmdLine">
             <textbox id="dactyl-multiline-input" class="plain" flex="1" rows="1" hidden="false" collapsed="true" multiline="true" dactyl:highlight="Normal"
-                onkeypress="window.dactyl &and; dactyl.modules.commandline.onMultilineInputEvent(event);"
+                onkeypress="&commandline;.onMultilineInputEvent(event);" oninput="&commandline;.onMultilineInputEvent(event);"
-                oninput="window.dactyl &and; dactyl.modules.commandline.onMultilineInputEvent(event);"
+                onblur="&commandline;.onMultilineInputEvent(event);"/>
-                onblur="window.dactyl &and; dactyl.modules.commandline.onMultilineInputEvent(event);"/>
         </vbox>
     </window>
 
     <statusbar id="status-bar" dactyl:highlight="StatusLine">
         <hbox insertbefore="&dactyl.statusBefore;" insertafter="&dactyl.statusAfter;"
-              id="dactyl-statusline-field-status" flex="1" hidden="false" align="center">
+              id="&status;status" flex="1" hidden="false" align="center">
-            <textbox class="plain" id="dactyl-statusline-field-url" readonly="false" flex="1" crop="end"/>
+            <stack orient="horizontal" align="stretch"      flex="1" class="dactyl-container" dactyl:highlight="CmdLine">
-            <label class="plain" id="dactyl-statusline-field-inputbuffer"    flex="0"/>
+                <textbox class="plain" id="&status;url"     flex="1" readonly="false" crop="end"/>
-            <label class="plain" id="dactyl-statusline-field-progress"       flex="0"/>
+                <textbox class="plain" id="&status;mode"    flex="1" readonly="true" collapsed="true" dactyl:highlight="Normal"/>
-            <label class="plain" id="dactyl-statusline-field-tabcount"       flex="0"/>
+                <textbox class="plain" id="&status;message" flex="1" readonly="true" collapsed="true" dactyl:highlight="Normal"/>
-            <label class="plain" id="dactyl-statusline-field-bufferposition" flex="0"/>
+
-            <label class="plain" id="dactyl-statusline-field-zoomlevel"      flex="0"/>
+                <hbox id="&status;commandline" hidden="false" class="dactyl-container" dactyl:highlight="Normal" collapsed="true">
+                    <label class="plain" id="&status;commandline-prompt"  flex="0" crop="end" value="" collapsed="true"/>
+                    <textbox class="plain" id="&status;commandline-command" flex="1" type="search" timeout="100"
+                        oninput="&commandline;.onEvent(event);" onkeyup="&commandline;.onEvent(event);"
+                        onfocus="&commandline;.onEvent(event);" onblur="&commandline;.onEvent(event);"/>
+                </hbox>
+            </stack>
+            <label class="plain" id="&status;inputbuffer"    flex="0"/>
+            <label class="plain" id="&status;progress"       flex="0"/>
+            <label class="plain" id="&status;tabcount"       flex="0"/>
+            <label class="plain" id="&status;bufferposition" flex="0"/>
+            <label class="plain" id="&status;zoomlevel"      flex="0"/>
         </hbox>
         <!-- just hide them since other elements expect them -->
-        <statusbarpanel id="statusbar-display" hidden="true"/>
+        <statusbarpanel id="statusbar-display"       hidden="true"/>
         <statusbarpanel id="statusbar-progresspanel" hidden="true"/>
     </statusbar>
 </overlay>

common/content/hints.js

@@ -33,9 +33,8 @@ const Hints = Module("hints", {
 
         this._resizeTimer = Timer(100, 500, function () {
             if (self._top && (modes.extended & modes.HINTS)) {
-                let win = self._top;
                 self._removeHints(0, true);
-                self._generate(win);
+                self._generate(self._top);
                 self._showHints();
             }
         });
@@ -55,7 +54,7 @@ const Hints = Module("hints", {
         this.addMode("t", "Follow hint in a new tab",             function (elem) buffer.followLink(elem, dactyl.NEW_TAB));
         this.addMode("b", "Follow hint in a background tab",      function (elem) buffer.followLink(elem, dactyl.NEW_BACKGROUND_TAB));
         this.addMode("w", "Follow hint in a new window",          function (elem) buffer.followLink(elem, dactyl.NEW_WINDOW));
-        this.addMode("F", "Open multiple hints in tabs",          function (elem) { buffer.followLink(elem, dactyl.NEW_BACKGROUND_TAB); hints.show("F"); });
+        this.addMode("F", "Open multiple hints in tabs",          function (elem, l, c, top) { buffer.followLink(elem, dactyl.NEW_BACKGROUND_TAB); hints.show("F", null, top); });
         this.addMode("O", "Generate an ':open URL' using hint",   function (elem, loc) commandline.open(":", "open " + loc, modes.EX));
         this.addMode("T", "Generate a ':tabopen URL' using hint", function (elem, loc) commandline.open(":", "tabopen " + loc, modes.EX));
         this.addMode("W", "Generate a ':winopen URL' using hint", function (elem, loc) commandline.open(":", "winopen " + loc, modes.EX));
@@ -247,10 +246,6 @@ const Hints = Module("hints", {
     _generate: function (win) {
         if (!win)
             win = window.content;
-        if (!this._top) {
-            this._top = win;
-            win.addEventListener("resize", this._resizeTimer.closure.tell, true);
-        }
 
         let doc = win.document;
         let height = win.innerHeight;
@@ -419,10 +414,6 @@ const Hints = Module("hints", {
     _removeHints: function (timeout, slight) {
         let firstElem = this._validHints[0] || null;
 
-        if (this._top)
-            this._top.removeEventListener("resize", this._resizeTimer.closure.tell, true);
-        this._top = null;
-
         for (let [,{ doc: doc, start: start, end: end }] in Iterator(this._docs)) {
             for (let elem in util.evaluateXPath("//*[@dactyl:highlight='hints']", doc))
                 elem.parentNode.removeChild(elem);
@@ -481,6 +472,7 @@ const Hints = Module("hints", {
         let timeout = followFirst || events.feedingKeys ? 0 : 500;
         let activeIndex = (this._hintNumber ? this._hintNumber - 1 : 0);
         let elem = this._validHints[activeIndex];
+        let top = this._top;
         this._removeHints(timeout);
 
         if (timeout == 0)
@@ -490,7 +482,7 @@ const Hints = Module("hints", {
         this.timeout(function () {
             if (modes.extended & modes.HINTS)
                 modes.pop();
-            this._hintMode.action(elem, elem.href || "", this._extendedhintCount);
+            this._hintMode.action(elem, elem.href || "", this._extendedhintCount, top);
         }, timeout);
         return true;
     },
@@ -772,6 +764,9 @@ const Hints = Module("hints", {
         this.prevInput = "";
         this._canUpdate = false;
 
+        this._top = win || content;
+        this._top.addEventListener("resize", this._resizeTimer.closure.tell, true);
+
         this._generate(win);
 
         // get all keys from the input queue
@@ -794,6 +789,10 @@ const Hints = Module("hints", {
      * Cancel all hinting.
      */
     hide: function () {
+        if (this._top)
+            this._top.removeEventListener("resize", this._resizeTimer.closure.tell, true);
+        this._top = null;
+
         this._removeHints(0);
     },
 
@@ -911,7 +910,7 @@ const Hints = Module("hints", {
 
     //}}}
 }, {
-    get translitTable() function () {
+    translitTable: Class.memoize(function () {
         const table = {};
         [
             [0x00c0, 0x00c6, ["A"]], [0x00c7, 0x00c7, ["C"]],
@@ -978,19 +977,17 @@ const Hints = Module("hints", {
             [0xfb00, 0xfb06, ["ff", "fi", "fl", "ffi", "ffl", "st", "st"]],
             [0xff21, 0xff3a, "A"], [0xff41, 0xff5a, "a"]
         ].forEach(function (start, stop, val) {
-            if (typeof a[2] != "string")
+            if (typeof val != "string")
-                for (i=start; i <= stop; i++)
+                for (let i=start; i <= stop; i++)
                     table[String.fromCharCode(i)] = val[(i - start) % val.length];
             else {
                 let n = val.charCodeAt(0);
-                for (i=start; i <= stop; i++)
+                for (let i=start; i <= stop; i++)
                     table[String.fromCharCode(i)] = String.fromCharCode(n + i - start);
             }
         });
-
+        return table;
-        delete this.translitTable;
+    }),
-        return this.translitTable = table;
-    },
     indexOf: function indexOf(dest, src) {
         let table = this.translitTable;
         var end = dest.length - src.length;

common/content/javascript.js

@@ -592,7 +592,7 @@ const JavaScript = Module("javascript", {
      * A list of properties of the global object which are not
      * enumerable by any standard method.
      */
-    globalNames: array.uniq([
+    globalNames: Class.memoize(function () array.uniq([
         "Array", "ArrayBuffer", "AttributeName", "Boolean",
         "CSSFontFaceStyleDecl", "CSSGroupRuleRuleList", "CSSNameSpaceRule",
         "CSSRGBColor", "CSSRect", "ComputedCSSStyleDeclaration", "Date",
@@ -610,7 +610,7 @@ const JavaScript = Module("javascript", {
         "undefined", "uneval"
     ].concat([k.substr(6) for (k in keys(Ci)) if (/^nsIDOM/.test(k))])
      .concat([k.substr(3) for (k in keys(Ci)) if (/^nsI/.test(k))])
-     .filter(function (k) k in window)),
+     .filter(function (k) k in window))),
 
     /**
      * Installs argument string completers for a set of functions.

common/content/modes.js

@@ -129,6 +129,8 @@ const Modes = Module("modes", {
 
     get mainMode() this._modeMap[this._main],
 
+    get topOfStack() this._modeStack[this._modeStack.length - 1],
+
     addMode: function (name, extended, options) {
         let disp = name.replace("_", " ", "g");
         this[name] = 1 << this._lastMode++;
@@ -179,12 +181,19 @@ const Modes = Module("modes", {
         this.show();
     },
 
+    save: function (id, value, obj, prop) {
+        if (this.topOfStack)
+            this.topOfStack[2][id] = { value: value, obj: obj, prop: prop };
+    },
+
     // helper function to set both modes in one go
     // if silent == true, you also need to take care of the mode handling changes yourself
     set: function (mainMode, extendedMode, silent, stack) {
         silent = (silent || this._main == mainMode && this._extended == extendedMode);
         // if a this._main mode is set, the this._extended is always cleared
         let oldMain = this._main, oldExtended = this._extended;
+        if (!stack && mainMode != null)
+            this.modeStack = [];
         if (typeof extendedMode === "number")
             this._extended = extendedMode;
         if (typeof mainMode === "number") {
@@ -195,6 +204,8 @@ const Modes = Module("modes", {
             if (this._main != oldMain)
                 this._handleModeChange(oldMain, mainMode, oldExtended);
         }
+        if (mainMode != null && !(stack && stack.pop))
+            this._modeStack.push([this._main, this._extended, {}]);
         dactyl.triggerObserver("modeChange", [oldMain, oldExtended], [this._main, this._extended], stack);
 
         if (!silent)
@@ -202,16 +213,18 @@ const Modes = Module("modes", {
     },
 
     push: function (mainMode, extendedMode, silent) {
-        this._modeStack.push([this._main, this._extended]);
+        this.set(mainMode, extendedMode, silent, { push: this.topOfStack });
-        this.set(mainMode, extendedMode, silent, { push: this._modeStack[this._modeStack.length - 1] });
     },
 
     pop: function (silent) {
         let a = this._modeStack.pop();
-        if (a)
+        if (!this.topOfStack)
-            this.set(a[0], a[1], silent, { pop: a });
-        else
             this.reset(silent);
+        else {
+            this.set(this.topOfStack[0], this.topOfStack[1], silent, { pop: a });
+            for (let [k, { obj, prop, value }] in Iterator(this.topOfStack[2]))
+                obj[prop] = value;
+        }
     },
 
     // TODO: Deprecate this in favor of addMode? --Kris
@@ -256,6 +269,7 @@ const Modes = Module("modes", {
 
     get extended() this._extended,
     set extended(value) { this.set(null, value); }
+}, {
 });
 
 // vim: set fdm=marker sw=4 ts=4 et:

common/modules/base.jsm

@@ -141,16 +141,17 @@ defineModule("base", {
         "Cc", "Ci", "Class", "Cr", "Cu", "Module", "Object", "Runnable",
         "Struct", "StructBase", "Timer", "UTF8", "XPCOMUtils", "array",
         "call", "callable", "curry", "debuggerProperties", "defineModule",
-        "endModule", "extend", "forEach", "isArray", "isGenerator",
+        "endModule", "forEach", "isArray", "isGenerator", "isinstance",
-        "isinstance", "isObject", "isString", "isSubclass", "iter", "iterAll",
+        "isObject", "isString", "isSubclass", "iter", "iterAll", "keys",
-        "keys", "memoize", "properties", "requiresMainThread", "set",
+        "memoize", "properties", "requiresMainThread", "set", "update",
-        "update", "values"
+        "values"
     ],
     use: ["services"]
 });
 
 function Runnable(self, func, args) {
     return {
+        __proto__: Runnable.prototype,
         QueryInterface: XPCOMUtils.generateQI([Ci.nsIRunnable]),
         run: function () { func.apply(self, args || []); }
     };
@@ -399,13 +400,13 @@ function isSubclass(targ, src) {
  * @param {object|string|[object|string]} src The types to check targ against.
  * @returns {boolean}
  */
+const isinstance_types = {
+    boolean: Boolean,
+    string: String,
+    function: Function,
+    number: Number
+}
 function isinstance(targ, src) {
-    const types = {
-        boolean: Boolean,
-        string: String,
-        function: Function,
-        number: Number
-    }
     src = Array.concat(src);
     for (var i = 0; i < src.length; i++) {
         if (typeof src[i] === "string") {
@@ -415,7 +416,7 @@ function isinstance(targ, src) {
         else {
             if (targ instanceof src[i])
                 return true;
-            var type = types[typeof targ];
+            var type = isinstance_types[typeof targ];
             if (type && isSubclass(src[i], type))
                 return true;
         }
@@ -474,7 +475,7 @@ function call(fn) {
  * value of the property.
  */
 function memoize(obj, key, getter) {
-    obj.__defineGetter__(key, function () (
+    obj.__defineGetter__(key, function replace() (
         Class.replaceProperty(this, key, null),
         Class.replaceProperty(this, key, getter.call(this, key))));
 }
@@ -566,6 +567,8 @@ function update(target) {
         let src = arguments[i];
         Object.getOwnPropertyNames(src || {}).forEach(function (k) {
             let desc = Object.getOwnPropertyDescriptor(src, k);
+            if (desc.value && desc.value instanceof Class.Property)
+                desc = desc.value.init(k);
             if (desc.value && callable(desc.value) && Object.getPrototypeOf(target)) {
                 let func = desc.value;
                 desc.value.superapply = function (self, args)
@@ -579,33 +582,6 @@ function update(target) {
     return target;
 }
 
-/**
- * Extends a subclass with a superclass. The subclass's
- * prototype is replaced with a new object, which inherits
- * from the superclass's prototype, {@see update}d with the
- * members of 'overrides'.
- *
- * @param {function} subclass
- * @param {function} superclass
- * @param {Object} overrides @optional
- */
-function extend(subclass, superclass, overrides) {
-    subclass.superclass = superclass;
-
-    try {
-        subclass.prototype = Object.create(superclass.prototype);
-    }
-    catch(e) {
-        dump(e + "\n" + String.replace(e.stack, /^/gm, "    ") + "\n\n");
-    }
-    update(subclass.prototype, overrides);
-    subclass.prototype.constructor = subclass;
-    subclass.prototype._class_ = subclass;
-
-    if (superclass.prototype.constructor === objproto.constructor)
-        superclass.prototype.constructor = superclass;
-}
-
 /**
  * @constructor Class
  *
@@ -666,13 +642,13 @@ function Class() {
     else {
         let superc = superclass;
         superclass = function Shim() {};
-        extend(superclass, superc, {
+        Class.extend(superclass, superc, {
             init: superc
         });
         superclass.__proto__ = superc;
     }
 
-    extend(Constructor, superclass, args[0]);
+    Class.extend(Constructor, superclass, args[0]);
     update(Constructor, args[1]);
     Constructor.__proto__ = superclass;
     args = args.slice(2);
@@ -683,11 +659,68 @@ function Class() {
     });
     return Constructor;
 }
-Class.replaceProperty = function (obj, prop, value) {
+/**
+ * @class Class.Property
+ * A class which, when assigned to a property in a Class's prototype
+ * or class property object, defines that property's descriptor
+ * rather than its value. When the init argument is a function, that
+ * function is passed the property's name and must return a property
+ * descriptor object. When it is an object, that object is used as
+ * the property descriptor.
+ *
+ * @param {function|Object} desc The property descriptor or a
+ *      function which returns the same.
+ */
+Class.Property = function Property(desc) ({ __proto__: Property.prototype, init: callable(desc) ? desc : function () desc });
+/**
+ * Extends a subclass with a superclass. The subclass's
+ * prototype is replaced with a new object, which inherits
+ * from the superclass's prototype, {@see update}d with the
+ * members of 'overrides'.
+ *
+ * @param {function} subclass
+ * @param {function} superclass
+ * @param {Object} overrides @optional
+ */
+Class.extend = function extend(subclass, superclass, overrides) {
+    subclass.superclass = superclass;
+
+    try {
+        subclass.prototype = Object.create(superclass.prototype);
+    }
+    catch(e) {
+        dump(e + "\n" + String.replace(e.stack, /^/gm, "    ") + "\n\n");
+    }
+    update(subclass.prototype, overrides);
+    subclass.prototype.constructor = subclass;
+    subclass.prototype._class_ = subclass;
+
+    if (superclass.prototype.constructor === objproto.constructor)
+        superclass.prototype.constructor = superclass;
+}
+
+/**
+ * Memoizes the value of a class property to the falue returned by
+ * the passed function the first time the property is accessed.
+ *
+ * @param {function(string)} getter The function which returns the
+ *      property's value.
+ * @return {Class.Property}
+ */
+Class.memoize = function memoize(getter)
+    Class.Property(function (key) ({
+        configurable: true,
+        enumerable: true,
+        get: function replace() (
+        Class.replaceProperty(this, key, null),
+        Class.replaceProperty(this, key, getter.call(this, key)))
+    }));
+
+Class.replaceProperty = function replaceProperty(obj, prop, value) {
     Object.defineProperty(obj, prop, { configurable: true, enumerable: true, value: value, writable: true });
     return value;
 };
-Class.toString = function () "[class " + this.className + "]";
+Class.toString = function toString() "[class " + this.className + "]";
 Class.prototype = {
     /**
      * Initializes new instances of this class. Called automatically

common/modules/styles.jsm

@@ -256,7 +256,33 @@ const Styles = Module("Styles", {
             context.title = ["Site"];
             context.completions = [[s, ""] for ([, s] in Iterator(styles.sites))];
         });
-    }
+    },
+
+    propertyPattern: (function () {
+        const string = /(?:"(?:[^\\"]|\\.)*(?:"|$)|'(?:[^\\']|\\.)*(?:'|$))/.source;
+        return RegExp(String.replace(<![CDATA[
+            (?:
+                (\s*)
+                ([-a-z]*)
+                (?:
+                    \s* : \s* (
+                        (?:
+                            [-\w]
+                            (?:
+                                \s* \( \s*
+                                    (?: S | [^)]*  )
+                                \s* (?: \) | $)
+                            )?
+                            \s*
+                            | \s* S \s* | [^;}]*
+                        )*
+                    )
+                )?
+            )
+            (\s* (?: ; | $) )
+        ]]>, /S/g, string).replace(/\s*/g, ""),
+        "gi");
+    })()
 }, {
     commands: function (dactyl, modules, window) {
         const commands = modules.commands;
@@ -383,35 +409,13 @@ const Styles = Module("Styles", {
     },
     completion: function (dactyl, modules, window) {
         const names = Array.slice(util.computedStyle(window.document.createElement("div")));
-        const string = /(?:"(?:[^\\"]|\\.)*(?:"|$)|'(?:[^\\']|\\.)*(?:'|$))/.source;
-        const pattern = RegExp(String.replace(<![CDATA[
-            (?:
-                (\s*)
-                ([-a-z]*)
-                (?:
-                    \s* : \s* (
-                        (?:
-                            [-\w]
-                            (?:
-                                \s* \( \s*
-                                    (?: S | [^)]*  )
-                                \s* (?: \) | $)
-                            )?
-                            \s*
-                            | \s* S \s* | [^;}]*
-                        )*
-                    )
-                )?
-            )
-            (\s* (?: ; | $) )
-        ]]>, /S/g, string).replace(/\s*/g, ""), "gi");
         modules.completion.css = function (context) {
-            context.title = ["Property"];
+            context.title = ["CSS Property"];
             context.keys = { text: function (p) p + ":", description: function () "" };
 
-            pattern.lastIndex = 0;
+            Styles.propertyPattern.lastIndex = 0;
             let match, lastMatch;
-            while ((!match || match[0]) && (match = pattern.exec(context.filter)) && (match[0].length || !lastMatch))
+            while ((!match || match[0]) && (match = Styles.propertyPattern.exec(context.filter)) && (match[0].length || !lastMatch))
                 lastMatch = match;
             if (lastMatch != null && !lastMatch[3] && !lastMatch[4]) {
                 context.advance(lastMatch.index + lastMatch[1].length)