diff options
Diffstat (limited to 'devtools/client/projecteditor/chrome/content')
4 files changed, 307 insertions, 0 deletions
diff --git a/devtools/client/projecteditor/chrome/content/projecteditor-loader.js b/devtools/client/projecteditor/chrome/content/projecteditor-loader.js new file mode 100644 index 000000000..adee8f143 --- /dev/null +++ b/devtools/client/projecteditor/chrome/content/projecteditor-loader.js @@ -0,0 +1,176 @@ +var Cu = Components.utils; +const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {}); +const {FileUtils} = Cu.import("resource://gre/modules/FileUtils.jsm", {}); +const {NetUtil} = Cu.import("resource://gre/modules/NetUtil.jsm", {}); +const promise = require("promise"); +const ProjectEditor = require("devtools/client/projecteditor/lib/projecteditor"); + +const SAMPLE_PATH = buildTempDirectoryStructure(); +const SAMPLE_NAME = "DevTools Content Application Name"; +const SAMPLE_PROJECT_URL = "data:text/html;charset=utf-8,<body><h1>Project Overview</h1></body>"; +const SAMPLE_ICON = "chrome://devtools/skin/images/tool-debugger.svg"; + +/** + * Create a workspace for working on projecteditor, available at + * chrome://devtools/content/projecteditor/chrome/content/projecteditor-loader.xul. + * This emulates the integration points that the app manager uses. + */ +var appManagerEditor; + +// Log a message to the project overview URL to make development easier +function log(msg) { + if (!appManagerEditor) { + return; + } + + let doc = appManagerEditor.iframe.contentDocument; + let el = doc.createElement("p"); + el.textContent = msg; + doc.body.appendChild(el); +} + +document.addEventListener("DOMContentLoaded", function onDOMReady(e) { + document.removeEventListener("DOMContentLoaded", onDOMReady, false); + let iframe = document.getElementById("projecteditor-iframe"); + window.projecteditor = ProjectEditor.ProjectEditor(iframe); + + projecteditor.on("onEditorCreated", (editor, a) => { + log("editor created: " + editor); + if (editor.label === "app-manager") { + appManagerEditor = editor; + appManagerEditor.on("load", function foo() { + appManagerEditor.off("load", foo); + log("Working on: " + SAMPLE_PATH); + }); + } + }); + projecteditor.on("onEditorDestroyed", (editor) => { + log("editor destroyed: " + editor); + }); + projecteditor.on("onEditorSave", (editor, resource) => { + log("editor saved: " + editor, resource.path); + }); + projecteditor.on("onTreeSelected", (resource) => { + log("tree selected: " + resource.path); + }); + projecteditor.on("onEditorLoad", (editor) => { + log("editor loaded: " + editor); + }); + projecteditor.on("onEditorActivated", (editor) => { + log("editor focused: " + editor); + }); + projecteditor.on("onEditorDeactivated", (editor) => { + log("editor blur: " + editor); + }); + projecteditor.on("onEditorChange", (editor) => { + log("editor changed: " + editor); + }); + projecteditor.on("onCommand", (cmd) => { + log("Command: " + cmd); + }); + + projecteditor.loaded.then(() => { + projecteditor.setProjectToAppPath(SAMPLE_PATH, { + name: SAMPLE_NAME, + iconUrl: SAMPLE_ICON, + projectOverviewURL: SAMPLE_PROJECT_URL, + validationStatus: "valid" + }).then(() => { + let allResources = projecteditor.project.allResources(); + console.log("All resources have been loaded", allResources, allResources.map(r=>r.basename).join("|")); + }); + + }); + +}, false); + +/** + * Build a temporary directory as a workspace for this loader + * https://developer.mozilla.org/en-US/Add-ons/Code_snippets/File_I_O + */ +function buildTempDirectoryStructure() { + + // First create (and remove) the temp dir to discard any changes + let TEMP_DIR = FileUtils.getDir("TmpD", ["ProjectEditor"], true); + TEMP_DIR.remove(true); + + // Now rebuild our fake project. + TEMP_DIR = FileUtils.getDir("TmpD", ["ProjectEditor"], true); + + FileUtils.getDir("TmpD", ["ProjectEditor", "css"], true); + FileUtils.getDir("TmpD", ["ProjectEditor", "data"], true); + FileUtils.getDir("TmpD", ["ProjectEditor", "img", "icons"], true); + FileUtils.getDir("TmpD", ["ProjectEditor", "js"], true); + + let htmlFile = FileUtils.getFile("TmpD", ["ProjectEditor", "index.html"]); + htmlFile.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + writeToFile(htmlFile, [ + "<!DOCTYPE html>", + '<html lang="en">', + " <head>", + ' <meta charset="utf-8" />', + " <title>ProjectEditor Temp File</title>", + ' <link rel="stylesheet" href="style.css" />', + " </head>", + ' <body id="home">', + " <p>ProjectEditor Temp File</p>", + " </body>", + "</html>"].join("\n") + ); + + let readmeFile = FileUtils.getFile("TmpD", ["ProjectEditor", "README.md"]); + readmeFile.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + writeToFile(readmeFile, [ + "## Readme" + ].join("\n") + ); + + let licenseFile = FileUtils.getFile("TmpD", ["ProjectEditor", "LICENSE"]); + licenseFile.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + writeToFile(licenseFile, [ + "/* This Source Code Form is subject to the terms of the Mozilla Public", + " * License, v. 2.0. If a copy of the MPL was not distributed with this", + " * file, You can obtain one at http://mozilla.org/MPL/2.0/. */" + ].join("\n") + ); + + let cssFile = FileUtils.getFile("TmpD", ["ProjectEditor", "css", "styles.css"]); + cssFile.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + writeToFile(cssFile, [ + "body {", + " background: red;", + "}" + ].join("\n") + ); + + FileUtils.getFile("TmpD", ["ProjectEditor", "js", "script.js"]).createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + + FileUtils.getFile("TmpD", ["ProjectEditor", "img", "fake.png"]).createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + FileUtils.getFile("TmpD", ["ProjectEditor", "img", "icons", "16x16.png"]).createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + FileUtils.getFile("TmpD", ["ProjectEditor", "img", "icons", "32x32.png"]).createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + FileUtils.getFile("TmpD", ["ProjectEditor", "img", "icons", "128x128.png"]).createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + FileUtils.getFile("TmpD", ["ProjectEditor", "img", "icons", "vector.svg"]).createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + + return TEMP_DIR.path; +} + + +// https://developer.mozilla.org/en-US/Add-ons/Code_snippets/File_I_O#Writing_to_a_file +function writeToFile(file, data) { + + let defer = promise.defer(); + var ostream = FileUtils.openSafeFileOutputStream(file); + + var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]. + createInstance(Components.interfaces.nsIScriptableUnicodeConverter); + converter.charset = "UTF-8"; + var istream = converter.convertToInputStream(data); + + // The last argument (the callback) is optional. + NetUtil.asyncCopy(istream, ostream, function (status) { + if (!Components.isSuccessCode(status)) { + // Handle error! + console.log("ERROR WRITING TEMP FILE", status); + } + }); +} diff --git a/devtools/client/projecteditor/chrome/content/projecteditor-loader.xul b/devtools/client/projecteditor/chrome/content/projecteditor-loader.xul new file mode 100644 index 000000000..84db8ea48 --- /dev/null +++ b/devtools/client/projecteditor/chrome/content/projecteditor-loader.xul @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!DOCTYPE window [ +<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" > + %toolboxDTD; +]> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script type="application/javascript;version=1.8" src="projecteditor-loader.js"></script> + + <commandset id="toolbox-commandset"> + <command id="projecteditor-cmd-close" oncommand="window.close();"/> + </commandset> + + <keyset id="projecteditor-keyset"> + <key id="projecteditor-key-close" + key="&closeCmd.key;" + command="projecteditor-cmd-close" + modifiers="accel"/> + </keyset> + + <iframe id="projecteditor-iframe" flex="1" forceOwnRefreshDriver=""></iframe> +</window> diff --git a/devtools/client/projecteditor/chrome/content/projecteditor-test.xul b/devtools/client/projecteditor/chrome/content/projecteditor-test.xul new file mode 100644 index 000000000..ee2be12f0 --- /dev/null +++ b/devtools/client/projecteditor/chrome/content/projecteditor-test.xul @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?> +<?xml-stylesheet href="chrome://global/skin/global.css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + + <script type="application/javascript" src="chrome://global/content/globalOverlay.js"></script> + + <commandset id="mainCommandSet"> + <commandset id="editMenuCommands"/> + </commandset> + <menubar></menubar> + <iframe id='projecteditor-iframe' flex="1"></iframe> +</window> diff --git a/devtools/client/projecteditor/chrome/content/projecteditor.xul b/devtools/client/projecteditor/chrome/content/projecteditor.xul new file mode 100644 index 000000000..795fe9fab --- /dev/null +++ b/devtools/client/projecteditor/chrome/content/projecteditor.xul @@ -0,0 +1,87 @@ +<?xml version="1.0"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<?xml-stylesheet href="chrome://devtools/skin/light-theme.css" type="text/css"?> +<?xml-stylesheet href="chrome://devtools/skin/projecteditor/projecteditor.css" type="text/css"?> +<?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?> +<?xml-stylesheet href="resource://devtools/client/themes/common.css" type="text/css"?> +<?xml-stylesheet href="chrome://devtools/skin/markup.css" type="text/css"?> + +<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?> + +<!DOCTYPE window [ +<!ENTITY % scratchpadDTD SYSTEM "chrome://devtools/locale/scratchpad.dtd" > + %scratchpadDTD; +<!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd"> +%editMenuStrings; +<!ENTITY % sourceEditorStrings SYSTEM "chrome://devtools/locale/sourceeditor.dtd"> +%sourceEditorStrings; +]> + +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="theme-body theme-light"> + + <script type="application/javascript" src="chrome://global/content/globalOverlay.js"/> + + <commandset id="projecteditor-commandset" /> + <commandset id="editMenuCommands"/> + <keyset id="projecteditor-keyset" /> + <keyset id="editMenuKeys"/> + + <!-- Eventually we want to let plugins declare their own menu items. + Wait unti app manager lands to deal with this integration point. + --> + <menubar id="projecteditor-menubar"> + <menu id="file-menu" label="&fileMenu.label;" accesskey="&fileMenu.accesskey;"> + <menupopup id="file-menu-popup" /> + </menu> + + <menu id="edit-menu" label="&editMenu.label;" + accesskey="&editMenu.accesskey;"> + <menupopup id="edit-menu-popup"> + <menuitem id="menu_undo"/> + <menuitem id="menu_redo"/> + <menuseparator/> + <menuitem id="menu_cut"/> + <menuitem id="menu_copy"/> + <menuitem id="menu_paste"/> + </menupopup> + </menu> + </menubar> + + <popupset> + <menupopup id="context-menu-popup"> + </menupopup> + <menupopup id="texteditor-context-popup"> + <menuitem id="cMenu_cut"/> + <menuitem id="cMenu_copy"/> + <menuitem id="cMenu_paste"/> + <menuitem id="cMenu_delete"/> + <menuseparator/> + <menuitem id="cMenu_selectAll"/> + </menupopup> + </popupset> + + <deck id="main-deck" flex="1"> + <vbox flex="1" id="source-deckitem"> + <hbox id="sources-body" flex="1"> + <vbox width="250" id="sources"> + <vbox flex="1"> + </vbox> + <toolbar id="project-toolbar" class="devtools-toolbar" hidden="true"></toolbar> + </vbox> + <splitter id="source-editor-splitter" class="devtools-side-splitter"/> + <vbox id="shells" flex="4"> + <toolbar id="projecteditor-toolbar" class="devtools-toolbar"> + <hbox id="plugin-toolbar-left"/> + <spacer flex="1"/> + <hbox id="plugin-toolbar-right"/> + </toolbar> + <box id="shells-deck-container" flex="4"></box> + <toolbar id="projecteditor-toolbar-bottom" class="devtools-toolbar"> + </toolbar> + </vbox> + </hbox> + </vbox> + </deck> +</page> |