chrome/content/ace++/fbeditor.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Editor</title>

    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
    <div id="editor">
        <div id="toggleWrap" onclick="toggleWrapMode();"></div>
        <div id="toggleGutter" onclick="toggleGutter();"></div>
    </div>

	<div id='source-buttons' style="right:0;bottom:0;position:fixed;z-index:10000;display:none">
		<span class="buttonify mode_button_active capsule_left">view</span>
		<span class="buttonify capsule_right">source</span>
	</div>
    <script type="text/javascript">
//add stub console since ace calls console.error
if (!window.console) {
    console={};
    console.log = console.error = function() {};
}

var aceRoot = './res/ace/';
var PATHS = {
	'ace/theme/'              :  aceRoot + 'theme-',
	'ace/keyboard/keybinding/':  aceRoot + 'keybinding-',
	'ace/mode/'               :  aceRoot + 'mode-',
	'fbace/'                  :  '',
	'res/'                    :  'res/',
	'shadia/'                 :  '../'
}

function transformPath(path) {
	console.log(path, '******')
	for (var sub in PATHS){
	console.log(sub)
        if(path.indexOf(sub) === 0) {
	console.log(PATHS[sub] + path.substr(sub.length) + '.js')
			return PATHS[sub] + path.substr(sub.length) + '.js';
        }
    }

    return aceRoot + path
}

loadScripts = function(deps, callback, lastUrl) {
    //console.log(deps)
    if (typeof deps === 'string') // module's path is wrong
        return;

    var url = deps.shift();
    if (!url)
        return callback && callback(_require(lastUrl));

    var script = document.createElementNS('http://www.w3.org/1999/xhtml', "script")
    script.type = "text/javascript;version=1.8";
    script.onload = function() {
        this.onload = null;
        loadScripts(deps, callback, url);
    };
	script.onerror = alert

    script.src = transformPath(url);
    document.documentElement.appendChild(script);
};

//*******************************************************************************************
//mini require from ace doesn't work :(
var _define = function(module, deps, payload) {
    if (arguments.length == 2)
        payload = deps;

    if (typeof module !== 'string') {
        console.error('dropping module because define wasn\'t a string.');
        return;
    }
    if(!require.modules[module])
        require.modules[module] = payload;
};

window.define = _define;

var _require = function(module, callback) {
    if (Object.prototype.toString.call(module) === "[object Array]") {
        var params = [];
        for (var i = 0, l = module.length; i < l; ++i) {
            var dep = lookup(module[i]);
            if (!dep)
                return loadScripts.apply(window, arguments);
            params.push(dep);
        }
        if (callback) {
            callback.apply(null, params);
        }
    }
    else if (typeof module === 'string') {
        var payload = lookup(module);
        if (!payload && _require.original)
            return;

        if (callback)
            callback();

        return payload;
    }
    else {
        if (_require.original)
            return _require.original.apply(window, arguments);
    }
};

_require.modules = {};
if (window.require)
    _require.original = window.require;

window.require = _require;
require.packaged = true;

var lookup = function(moduleName) {
    var module = require.modules[moduleName];
    if (module == null) {
        //console.error('Missing module: ' + moduleName);
        return null;
    }

    if (typeof module === 'function') {
        var exports = {};
        module(require, exports, { id: moduleName, uri: '' });
        // cache the resulting module object for next time
        require.modules[moduleName] = exports;
        return exports;
    }

    return module;
};
//*********************************************************************************************

var onLaunch, launched;
var startAce = function(callback, options, deps) {
    if (onLaunch) {
        onLaunch = callback || onLaunch;
		if(launched)
			onLaunch(window)
        return;
    }
    onLaunch = callback || true;
    // "ace/mode/javascript", "ace/mode/css", are loaded with html  // "ace-uncompressed" for debugging
    var rootDeps = ["fbace/startup", "res/ace/ace-uncompressed", "ace/mode/xml", "ace/mode/html"];
    if (!options)
        options = {
			softtabs: true,
			wordwrap: false,
			highlightactiveline: true,
			highlightselectedword: true,
			validateasyoutype: false
		};
    //"ace/theme/textmate" is built into ace.js so there's no need to load that
    if (!options.theme)
        options.theme = "ace/theme/textmate";
    else if (options.theme != "ace/theme/textmate")
        rootDeps.unshift(options.theme);
		
	if(deps)
		rootDeps.unshift.apply(rootDeps, deps)

	require(rootDeps, function() {
        require("fbace/startup").launch({}, options);
		launched = true
		
		onLaunch.call && onLaunch(window)
		onLaunch = true
    });
};
    </script>
</body>
</html>