This repository has been archived by the owner on Nov 3, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15626 from cctuan/921828-2
Bug 921828 - (app-menu) [Window Management] Refactor ListMenu and move i...
- Loading branch information
Showing
7 changed files
with
267 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
|
|
||
| (function(window) { | ||
| 'use strict'; | ||
|
|
||
| var _ = navigator.mozL10n.get; | ||
| var _id = 0; | ||
| /** | ||
| * The ContextMenu of the AppWindow. | ||
| * | ||
| * @class BrowserContextMenu | ||
| * @param {AppWindow} app The app window instance | ||
| * where this dialog should popup. | ||
| * @extends BaseUI | ||
| */ | ||
| var BrowserContextMenu = window.BrowserContextMenu = | ||
| function BrowserContextMenu(app) { | ||
| this.app = app; | ||
| this.containerElement = app.element; | ||
| this.event = null; | ||
| // One to one mapping. | ||
| this.instanceID = _id++; | ||
| this._injected = false; | ||
| try { | ||
| app.element.addEventListener('mozbrowsercontextmenu', this); | ||
| } catch (e) { | ||
| app._dump(); | ||
| } | ||
| return this; | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.__proto__ = window.BaseUI.prototype; | ||
| BrowserContextMenu.prototype.CLASS_NAME = 'BrowserContextMenu'; | ||
|
|
||
| BrowserContextMenu.prototype.ELEMENT_PREFIX = 'contextmenu-'; | ||
|
|
||
| BrowserContextMenu.prototype.customID = function am_customID() { | ||
| if (this.app) { | ||
| return '[' + this.app.origin + ']'; | ||
| } else { | ||
| return ''; | ||
| } | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.handleEvent = function bcm_handleEvent(evt) { | ||
| evt.preventDefault(); | ||
| this.event = evt; | ||
| if (!this._injected) { | ||
| this.render(); | ||
| } | ||
| this.show(); | ||
| this._injected = true; | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype._fetchElements = function bcm__fetchElements() { | ||
| this.element = document.getElementById(this.CLASS_NAME + this.instanceID); | ||
| this.elements = {}; | ||
|
|
||
| var toCamelCase = function toCamelCase(str) { | ||
| return str.replace(/\-(.)/g, function replacer(str, p1) { | ||
| return p1.toUpperCase(); | ||
| }); | ||
| }; | ||
|
|
||
| this.elementClasses = ['header', 'list']; | ||
|
|
||
| // Loop and add element with camel style name to Modal Dialog attribute. | ||
| this.elementClasses.forEach(function createElementRef(name) { | ||
| this.elements[toCamelCase(name)] = | ||
| this.element.querySelector('.' + this.ELEMENT_PREFIX + name); | ||
| }, this); | ||
| var cancel = document.createElement('button'); | ||
| cancel.dataset.action = 'cancel'; | ||
| cancel.dataset.l10nId = 'cancel'; | ||
| this.elements.cancel = cancel; | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype._registerEvents = | ||
| function bcm__registerEvents() { | ||
| var elements = this.elements; | ||
| elements.list.addEventListener('click', this.selectedHandler.bind(this)); | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.selectedHandler = | ||
| function bcm_selectedHandler(evt) { | ||
| evt.preventDefault(); | ||
| var target = evt.target; | ||
| var action = target.dataset.action; | ||
| if (action && action === 'cancel') { | ||
| this.hide(); | ||
| return; | ||
| } | ||
|
|
||
| var value = target.dataset.value; | ||
| if (!value) { | ||
| return; | ||
| } | ||
| value = parseInt(value, 10); | ||
| this.hide(); | ||
|
|
||
| this.event.contextMenuItemSelected && | ||
| this.event.contextMenuItemSelected(value); | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.view = function bcm_view() { | ||
| return '<form class="contextmenu" role="dialog" tabindex="-1"' + | ||
| ' data-type="action" ' + | ||
| 'id="' + this.CLASS_NAME + this.instanceID + '">' + | ||
| '<header class="contextmenu-header"></header>' + | ||
| '<menu class="contextmenu-list"></menu>' + | ||
| '</form>'; | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.kill = function bcm_kill() { | ||
| this.containerElement.removeChild(this.element); | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.show = function bcm_show() { | ||
| if (!this.event) { | ||
| return; | ||
| } | ||
| var evt = this.event; | ||
| var detail = evt.detail; | ||
| if (!detail.contextmenu || detail.contextmenu.items.length === 0) { | ||
| return; | ||
| } | ||
| var choices = detail.contextmenu.items; | ||
| this.buildMenu(this._listItems(choices)); | ||
| this.element.classList.add('visible'); | ||
| evt.preventDefault(); | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.buildMenu = function bcm_show(items) { | ||
| this.elements.list.innerHTML = ''; | ||
| items.forEach(function traveseItems(item) { | ||
| var action = document.createElement('button'); | ||
| action.dataset.value = item.value; | ||
| action.textContent = item.label; | ||
| if (item.icon) { | ||
| action.classList.add(item.iconClass || 'icon'); | ||
| action.style.backgroundImage = 'url(' + item.icon + ')'; | ||
| } | ||
| this.elements.list.appendChild(action); | ||
| }, this); | ||
|
|
||
| this.elements.cancel.textContent = _('cancel'); | ||
| this.elements.list.appendChild(this.elements.cancel); | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype._listItems = function bcm__listItems(choices) { | ||
| var items = []; | ||
|
|
||
| choices.forEach(function(choice, index) { | ||
| items.push({ | ||
| label: choice.label, | ||
| icon: choice.icon, | ||
| value: index | ||
| }); | ||
| }); | ||
| return items; | ||
| }; | ||
|
|
||
| BrowserContextMenu.prototype.hide = function bcm_hide() { | ||
| this.element.blur(); | ||
| this.element.classList.remove('visible'); | ||
| if (this.app) { | ||
| this.app.focus(); | ||
| } | ||
| }; | ||
| }(this)); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /*global mocha, MocksHelper, MockL10n, AppWindow, BrowserContextMenu */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| mocha.globals(['AppWindow', 'BrowserContextMenu', 'System', 'BaseUI']); | ||
|
|
||
| requireApp('system/test/unit/mock_l10n.js'); | ||
| requireApp('system/test/unit/mock_orientation_manager.js'); | ||
| requireApp('system/test/unit/mock_app_window.js'); | ||
|
|
||
| var mocksForAppModalDialog = new MocksHelper([ | ||
| 'AppWindow' | ||
| ]).init(); | ||
|
|
||
| suite('system/BrowserContextMenu', function() { | ||
| var stubById, realL10n, stubQuerySelector; | ||
| mocksForAppModalDialog.attachTestHelpers(); | ||
| setup(function(done) { | ||
| realL10n = navigator.mozL10n; | ||
| navigator.mozL10n = MockL10n; | ||
|
|
||
| stubById = this.sinon.stub(document, 'getElementById'); | ||
| var e = document.createElement('div'); | ||
| stubQuerySelector = this.sinon.stub(e, 'querySelector'); | ||
| stubQuerySelector.returns(document.createElement('div')); | ||
| stubById.returns(e); | ||
| requireApp('system/js/system.js'); | ||
| requireApp('system/js/base_ui.js'); | ||
| requireApp('system/js/browser_context_menu.js', done); | ||
| }); | ||
|
|
||
| teardown(function() { | ||
| navigator.mozL10n = realL10n; | ||
| stubById.restore(); | ||
| stubQuerySelector.restore(); | ||
| }); | ||
|
|
||
| var fakeAppConfig1 = { | ||
| url: 'app://www.fake/index.html', | ||
| manifest: {}, | ||
| manifestURL: 'app://wwww.fake/ManifestURL', | ||
| origin: 'app://www.fake' | ||
| }; | ||
|
|
||
| var fakeContextMenuEvent = { | ||
| type: 'mozbrowsercontextmenu', | ||
| preventDefault: function() {}, | ||
| detail: { | ||
| contextmenu: { | ||
| items: [ | ||
| { | ||
| label: 'test0', | ||
| icon: 'test' | ||
| }] | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| test('New', function() { | ||
| var app1 = new AppWindow(fakeAppConfig1); | ||
| var md1 = new BrowserContextMenu(app1); | ||
| assert.isDefined(md1.instanceID); | ||
| }); | ||
|
|
||
| test('launch menu', function() { | ||
| var app1 = new AppWindow(fakeAppConfig1); | ||
| var md1 = new BrowserContextMenu(app1); | ||
|
|
||
| md1.handleEvent(fakeContextMenuEvent); | ||
| assert.isTrue(md1.element.classList.contains('visible')); | ||
| assert.equal( | ||
| md1.elements.list.querySelector('button:first-child').textContent, | ||
| fakeContextMenuEvent.detail.contextmenu.items[0].label); | ||
| assert.equal( | ||
| md1.elements.list.querySelector('button:first-child'). | ||
| style.backgroundImage, | ||
| 'url("' + fakeContextMenuEvent.detail.contextmenu.items[0].icon + '")'); | ||
| }); | ||
| }); |