michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0: * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0: * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: "use strict";
michael@0: 
michael@0: module.metadata = {
michael@0:   "stability": "experimental",
michael@0:   "engines": {
michael@0:     "Firefox": "> 28"
michael@0:   }
michael@0: };
michael@0: 
michael@0: const { Cu } = require("chrome");
michael@0: const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
michael@0: const { subscribe, send, Reactor, foldp, lift, merges } = require("../../event/utils");
michael@0: const { InputPort } = require("../../input/system");
michael@0: const { OutputPort } = require("../../output/system");
michael@0: const { Interactive } = require("../../input/browser");
michael@0: const { CustomizationInput } = require("../../input/customizable-ui");
michael@0: const { pairs, map, isEmpty, object,
michael@0:         each, keys, values } = require("../../util/sequence");
michael@0: const { curry, flip } = require("../../lang/functional");
michael@0: const { patch, diff } = require("diffpatcher/index");
michael@0: const prefs = require("../../preferences/service");
michael@0: const { getByOuterId } = require("../../window/utils");
michael@0: 
michael@0: const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
michael@0: const PREF_ROOT = "extensions.sdk-toolbar-collapsed.";
michael@0: 
michael@0: 
michael@0: // There are two output ports one for publishing changes that occured
michael@0: // and the other for change requests. Later is synchronous and is only
michael@0: // consumed here. Note: it needs to be synchronous to avoid race conditions
michael@0: // when `collapsed` attribute changes are caused by user interaction and
michael@0: // toolbar is destroyed between the ticks.
michael@0: const output = new OutputPort({ id: "toolbar-changed" });
michael@0: const syncoutput = new OutputPort({ id: "toolbar-change", sync: true });
michael@0: 
michael@0: // Merge disptached changes and recevied changes from models to keep state up to
michael@0: // date.
michael@0: const Toolbars = foldp(patch, {}, merges([new InputPort({ id: "toolbar-changed" }),
michael@0:                                           new InputPort({ id: "toolbar-change" })]));
michael@0: const State = lift((toolbars, windows, customizable) =>
michael@0:   ({windows: windows, toolbars: toolbars, customizable: customizable}),
michael@0:   Toolbars, Interactive, new CustomizationInput());
michael@0: 
michael@0: // Shared event handler that makes `event.target.parent` collapsed.
michael@0: // Used as toolbar's close buttons click handler.
michael@0: const collapseToolbar = event => {
michael@0:   const toolbar = event.target.parentNode;
michael@0:   toolbar.collapsed = true;
michael@0: };
michael@0: 
michael@0: const parseAttribute = x =>
michael@0:   x === "true" ? true :
michael@0:   x === "false" ? false :
michael@0:   x === "" ? null :
michael@0:   x;
michael@0: 
michael@0: // Shared mutation observer that is used to observe `toolbar` node's
michael@0: // attribute mutations. Mutations are aggregated in the `delta` hash
michael@0: // and send to `ToolbarStateChanged` channel to let model know state
michael@0: // has changed.
michael@0: const attributesChanged = mutations => {
michael@0:   const delta = mutations.reduce((changes, {attributeName, target}) => {
michael@0:     const id = target.id;
michael@0:     const field = attributeName === "toolbarname" ? "title" : attributeName;
michael@0:     let change = changes[id] || (changes[id] = {});
michael@0:     change[field] = parseAttribute(target.getAttribute(attributeName));
michael@0:     return changes;
michael@0:   }, {});
michael@0: 
michael@0:   // Calculate what are the updates from the current state and if there are
michael@0:   // any send them.
michael@0:   const updates = diff(reactor.value, patch(reactor.value, delta));
michael@0: 
michael@0:   if (!isEmpty(pairs(updates))) {
michael@0:     // TODO: Consider sending sync to make sure that there won't be a new
michael@0:     // update doing a delete in the meantime.
michael@0:     send(syncoutput, updates);
michael@0:   }
michael@0: };
michael@0: 
michael@0: 
michael@0: // Utility function creates `toolbar` with a "close" button and returns
michael@0: // it back. In addition it set's up a listener and observer to communicate
michael@0: // state changes.
michael@0: const addView = curry((options, {document}) => {
michael@0:   let view = document.createElementNS(XUL_NS, "toolbar");
michael@0:   view.setAttribute("id", options.id);
michael@0:   view.setAttribute("collapsed", options.collapsed);
michael@0:   view.setAttribute("toolbarname", options.title);
michael@0:   view.setAttribute("pack", "end");
michael@0:   view.setAttribute("customizable", "false");
michael@0:   view.setAttribute("style", "padding: 2px 0; max-height: 40px;");
michael@0:   view.setAttribute("mode", "icons");
michael@0:   view.setAttribute("iconsize", "small");
michael@0:   view.setAttribute("context", "toolbar-context-menu");
michael@0:   view.setAttribute("class", "toolbar-primary chromeclass-toolbar");
michael@0: 
michael@0:   let label = document.createElementNS(XUL_NS, "label");
michael@0:   label.setAttribute("value", options.title);
michael@0:   label.setAttribute("collapsed", "true");
michael@0:   view.appendChild(label);
michael@0: 
michael@0:   let closeButton = document.createElementNS(XUL_NS, "toolbarbutton");
michael@0:   closeButton.setAttribute("id", "close-" + options.id);
michael@0:   closeButton.setAttribute("class", "close-icon");
michael@0:   closeButton.setAttribute("customizable", false);
michael@0:   closeButton.addEventListener("command", collapseToolbar);
michael@0: 
michael@0:   view.appendChild(closeButton);
michael@0: 
michael@0:   // In order to have a close button not costumizable, aligned on the right,
michael@0:   // leaving the customizable capabilities of Australis, we need to create
michael@0:   // a toolbar inside a toolbar.
michael@0:   // This is should be a temporary hack, we should have a proper XBL for toolbar
michael@0:   // instead. See:
michael@0:   // https://bugzilla.mozilla.org/show_bug.cgi?id=982005
michael@0:   let toolbar = document.createElementNS(XUL_NS, "toolbar");
michael@0:   toolbar.setAttribute("id", "inner-" + options.id);
michael@0:   toolbar.setAttribute("defaultset", options.items.join(","));
michael@0:   toolbar.setAttribute("customizable", "true");
michael@0:   toolbar.setAttribute("style", "-moz-appearance: none; overflow: hidden");
michael@0:   toolbar.setAttribute("mode", "icons");
michael@0:   toolbar.setAttribute("iconsize", "small");
michael@0:   toolbar.setAttribute("context", "toolbar-context-menu");
michael@0:   toolbar.setAttribute("flex", "1");
michael@0: 
michael@0:   view.insertBefore(toolbar, closeButton);
michael@0: 
michael@0:   const observer = new document.defaultView.MutationObserver(attributesChanged);
michael@0:   observer.observe(view, { attributes: true,
michael@0:                            attributeFilter: ["collapsed", "toolbarname"] });
michael@0: 
michael@0:   const toolbox = document.getElementById("navigator-toolbox");
michael@0:   toolbox.appendChild(view);
michael@0: });
michael@0: const viewAdd = curry(flip(addView));
michael@0: 
michael@0: const removeView = curry((id, {document}) => {
michael@0:   const view = document.getElementById(id);
michael@0:   if (view) view.remove();
michael@0: });
michael@0: 
michael@0: const updateView = curry((id, {title, collapsed, isCustomizing}, {document}) => {
michael@0:   const view = document.getElementById(id);
michael@0: 
michael@0:   if (!view)
michael@0:     return;
michael@0: 
michael@0:   if (title)
michael@0:     view.setAttribute("toolbarname", title);
michael@0: 
michael@0:   if (collapsed !== void(0))
michael@0:     view.setAttribute("collapsed", Boolean(collapsed));
michael@0: 
michael@0:   if (isCustomizing !== void(0)) {
michael@0:     view.querySelector("label").collapsed = !isCustomizing;
michael@0:     view.querySelector("toolbar").style.visibility = isCustomizing
michael@0:                                                 ? "hidden" : "visible";
michael@0:   }
michael@0: });
michael@0: 
michael@0: const viewUpdate = curry(flip(updateView));
michael@0: 
michael@0: // Utility function used to register toolbar into CustomizableUI.
michael@0: const registerToolbar = state => {
michael@0:   // If it's first additon register toolbar as customizableUI component.
michael@0:   CustomizableUI.registerArea("inner-" + state.id, {
michael@0:     type: CustomizableUI.TYPE_TOOLBAR,
michael@0:     legacy: true,
michael@0:     defaultPlacements: [...state.items]
michael@0:   });
michael@0: };
michael@0: // Utility function used to unregister toolbar from the CustomizableUI.
michael@0: const unregisterToolbar = CustomizableUI.unregisterArea;
michael@0: 
michael@0: const reactor = new Reactor({
michael@0:   onStep: (present, past) => {
michael@0:     const delta = diff(past, present);
michael@0: 
michael@0:     each(([id, update]) => {
michael@0:       // If update is `null` toolbar is removed, in such case
michael@0:       // we unregister toolbar and remove it from each window
michael@0:       // it was added to.
michael@0:       if (update === null) {
michael@0:         unregisterToolbar("inner-" + id);
michael@0:         each(removeView(id), values(past.windows));
michael@0: 
michael@0:         send(output, object([id, null]));
michael@0:       }
michael@0:       else if (past.toolbars[id]) {
michael@0:         // If `collapsed` state for toolbar was updated, persist
michael@0:         // it for a future sessions.
michael@0:         if (update.collapsed !== void(0))
michael@0:           prefs.set(PREF_ROOT + id, update.collapsed);
michael@0: 
michael@0:         // Reflect update in each window it was added to.
michael@0:         each(updateView(id, update), values(past.windows));
michael@0: 
michael@0:         send(output, object([id, update]));
michael@0:       }
michael@0:       // Hack: Mutation observers are invoked async, which means that if
michael@0:       // client does `hide(toolbar)` & then `toolbar.destroy()` by the
michael@0:       // time we'll get update for `collapsed` toolbar will be removed.
michael@0:       // For now we check if `update.id` is present which will be undefined
michael@0:       // in such cases.
michael@0:       else if (update.id) {
michael@0:         // If it is a new toolbar we create initial state by overriding
michael@0:         // `collapsed` filed with value persisted in previous sessions.
michael@0:         const state = patch(update, {
michael@0:           collapsed: prefs.get(PREF_ROOT + id, update.collapsed),
michael@0:         });
michael@0: 
michael@0:         // Register toolbar and add it each window known in the past
michael@0:         // (note that new windows if any will be handled in loop below).
michael@0:         registerToolbar(state);
michael@0:         each(addView(state), values(past.windows));
michael@0: 
michael@0:         send(output, object([state.id, state]));
michael@0:       }
michael@0:     }, pairs(delta.toolbars));
michael@0: 
michael@0:     // Add views to every window that was added.
michael@0:     each(window => {
michael@0:       if (window)
michael@0:         each(viewAdd(window), values(past.toolbars));
michael@0:     }, values(delta.windows));
michael@0: 
michael@0:     each(([id, isCustomizing]) => {
michael@0:       each(viewUpdate(getByOuterId(id), {isCustomizing: !!isCustomizing}),
michael@0:         keys(present.toolbars));
michael@0: 
michael@0:     }, pairs(delta.customizable))
michael@0:   },
michael@0:   onEnd: state => {
michael@0:     each(id => {
michael@0:       unregisterToolbar("inner-" + id);
michael@0:       each(removeView(id), values(state.windows));
michael@0:     }, keys(state.toolbars));
michael@0:   }
michael@0: });
michael@0: reactor.run(State);