aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorelijahe2013-12-12 17:09:20 (EST)
committerMark Macdonald2013-12-12 17:24:08 (EST)
commit8e50ac41ce569b72c8faefa2631439cbaf060866 (patch)
tree1f45e23553e63821d10f8de7fd5263bdbad63bea
parentad5f9048de67abf4491004a573ef6975bbfb5c16 (diff)
downloadorg.eclipse.orion.client-8e50ac41ce569b72c8faefa2631439cbaf060866.zip
org.eclipse.orion.client-8e50ac41ce569b72c8faefa2631439cbaf060866.tar.gz
org.eclipse.orion.client-8e50ac41ce569b72c8faefa2631439cbaf060866.tar.bz2
Bug 421482 - UX: No context menu!
- Added NON-NLS comments - Improved keyboard traversal of browser context menu button - Removed events used only for internal functionality --Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/css/theme.css11
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/webui/browsercontextmenubutton.html4
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/webui/contextmenu.js47
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/webui/dropdown.js30
4 files changed, 51 insertions, 41 deletions
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/theme.css b/bundles/org.eclipse.orion.client.ui/web/css/theme.css
index 2cf8feb..1d5cc1d 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/theme.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/theme.css
@@ -433,11 +433,16 @@ a.currentLocation:hover {
border: 1px solid #ccc !important;
}
-span.browserContextButton { /* specifying span element to override .core-sprite-openarrow */
- background-repeat: no-repeat;
- background-position: center -527px;
+button.browserContextButton { /* specifying <button> element to increase specificity and override .dropdownMenuItem's padding */
+ border: none;
+ width: 100%;
text-align: center;
padding: 0;
+ background: none;
+}
+
+span.browserContextButton {
+ line-height: 0; /* remove the extra padding from the open arrow icon */
}
.checkedMenuItem {
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/browsercontextmenubutton.html b/bundles/org.eclipse.orion.client.ui/web/orion/webui/browsercontextmenubutton.html
index 616b48e..8c34c5c 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/webui/browsercontextmenubutton.html
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/webui/browsercontextmenubutton.html
@@ -1,3 +1,5 @@
<li class="dropdownSubMenu">
- <span class="dropdownMenuItem modelDecorationSprite core-sprite-openarrow browserContextButton"></span>
+ <button class="dropdownMenuItem browserContextButton" tabindex="0">
+ <span class="modelDecorationSprite core-sprite-openarrow browserContextButton"></span>
+ </button>
</li> \ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/contextmenu.js b/bundles/org.eclipse.orion.client.ui/web/orion/webui/contextmenu.js
index adc4cc6..afe96f6 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/webui/contextmenu.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/webui/contextmenu.js
@@ -128,33 +128,40 @@ define([
this._browserContextNode = this._dropdownNode.lastChild;
- var browserContextSpan = this._browserContextNode.firstElementChild;
+ var browserContextButtonNode = this._browserContextNode.firstElementChild;
- browserContextSpan.commandTooltip = new Tooltip.Tooltip({
- node: browserContextSpan,
+ this._browserContextTooltip = new Tooltip.Tooltip({
+ node: browserContextButtonNode,
text: messages["To view the browser's context menu, trigger the context menu again."], //$NON-NLS-0$
position: ["below", "right", "left", "above"], //$NON-NLS-3$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
trigger: "none" //$NON-NLS-0$
});
// add handler to show tooltip
- this._browserContextNode.addEventListener("click", function(e){ //$NON-NLS-0$
- browserContextSpan.commandTooltip.show();
+ browserContextButtonNode.addEventListener("click", function(e){ //$NON-NLS-0$
+ self._browserContextTooltip.show();
}, false);
+ browserContextButtonNode.addEventListener("keyup", function(e){ //$NON-NLS-0$
+ if (e.which || e.keyCode) {
+ if ((e.which === lib.KEY.ENTER) || (e.keyCode === lib.KEY.ENTER)) {
+ self._browserContextTooltip.show();
+ return false;
+ }
+ }
+ });
+
// add handler to close submenu
- this._browserContextNode.addEventListener("mouseover", function(e){ //$NON-NLS-0$
+ browserContextButtonNode.addEventListener("mouseover", function(e){ //$NON-NLS-0$
self._closeSelectedSubmenu();
}, false);
- // add handlers to hide tooltip
- var hideTooltip = function(e){
- browserContextSpan.commandTooltip.hide(0);
- };
- this.addEventListener("dropdownclosed", hideTooltip, true); //$NON-NLS-0$
- this.addEventListener("submenuopen", hideTooltip, true); //$NON-NLS-0$
-
- this._browserContextTooltip = browserContextSpan.commandTooltip;
+ }
+ },
+
+ _hideBrowserContextTooltip: function() {
+ if (this._browserContextTooltip) {
+ this._browserContextTooltip.hide(0);
}
}
});
@@ -172,6 +179,18 @@ define([
return actionTaken;
};
+ // overrides Dropdown.protoype.submenuOpen
+ ContextMenu.prototype.submenuOpen = function(submenu) {
+ Dropdown.prototype.submenuOpen.call(this, submenu); //call function in super class
+ this._hideBrowserContextTooltip();
+ };
+
+ // overrides Dropdown.protoype.submenuOpen
+ ContextMenu.prototype.close = function(restoreFocus) {
+ Dropdown.prototype.close.call(this, restoreFocus); //call function in super class
+ this._hideBrowserContextTooltip();
+ };
+
// overrides Dropdown.protoype.destroy
ContextMenu.prototype.destroy = function() {
this._triggerNode.removeEventListener("contextmenu", this._boundcontextmenuEventHandler, true); //$NON-NLS-0$
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/dropdown.js b/bundles/org.eclipse.orion.client.ui/web/orion/webui/dropdown.js
index 8530d71..51c465b 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/webui/dropdown.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/webui/dropdown.js
@@ -62,17 +62,13 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
//if a parentDropdown isn't specified move up in dom tree looking for one
var parentNode = this._dropdownNode.parentNode;
while(parentNode && (document !== parentNode)) {
- if (parentNode.classList && parentNode.classList.contains("dropdownMenu")) {
+ if (parentNode.classList && parentNode.classList.contains("dropdownMenu")) { //$NON-NLS-0$
this._parentDropdown = parentNode.dropdown;
break;
}
parentNode = parentNode.parentNode;
}
}
-
- if (this._parentDropdown) {
- this._parentDropdownNode = this._parentDropdown._dropdownNode;
- }
if (options.triggerNode) {
this._triggerNode = options.triggerNode;
@@ -103,11 +99,6 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
// keys
this._dropdownNode.addEventListener("keydown", this._dropdownKeyDown.bind(this), false); //$NON-NLS-0$
-
- //submenu open handler
- var boundSubmenuHandler = this._submenuOpenHandler.bind(this);
- this.addEventListener("submenuopen", boundSubmenuHandler); //$NON-NLS-0$
- this._boundSubmenuOpenHandler = boundSubmenuHandler;
},
/**
@@ -137,9 +128,9 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
lib.setFramesEnabled(false);
if (this._populate) {
this.empty();
- this.dispatchEvent({type: "prepopulate", dropdown: this, event: event});
+ this.dispatchEvent({type: "prepopulate", dropdown: this, event: event}); //$NON-NLS-0$
this._populate(this._dropdownNode);
- this.dispatchEvent({type: "postpopulate", dropdown: this, event: event});
+ this.dispatchEvent({type: "postpopulate", dropdown: this, event: event}); //$NON-NLS-0$
}
var items = this.getItems();
if (items.length > 0) {
@@ -166,7 +157,7 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
actionTaken = true;
if (this._parentDropdown) {
- this._parentDropdown.dispatchEvent({type: "submenuopen", dropdown: this, event: event});
+ this._parentDropdown.submenuOpen(this);
}
}
}
@@ -208,7 +199,7 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
var overflowY = (bounds.top + bounds.height) - (bodyBounds.top + bodyBounds.height);
if (0 < overflowY) {
//TODO (minor) figure out proper bottom padding amount
- this._dropdownNode.style.top = Math.ceil(this._dropdownNode.style.top - overflowY) + "px";
+ this._dropdownNode.style.top = Math.ceil(this._dropdownNode.style.top - overflowY) + "px"; //$NON-NLS-0$
}
},
@@ -243,8 +234,6 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
this._isVisible = false;
actionTaken = true;
-
- this.dispatchEvent({type: "dropdownclosed", dropdown: this});
}
return actionTaken;
},
@@ -267,7 +256,7 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
//add handler to close open submenu when other items in the parent menu are hovered
filtered.forEach(function(item){
if (!item._hasDropdownMouseover) {
- item.addEventListener("mouseover", function(e){
+ item.addEventListener("mouseover", function(e){ //$NON-NLS-0$
if (item.dropdown) {
item.dropdown.open(e);
} else {
@@ -339,8 +328,7 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
* Sets the this._selectedSubmenu to the one that's passed in.
* @param submenu The submenu that was opened and should be set as the next this._selectedSubmenu
*/
- _submenuOpenHandler: function(event) {
- var submenu = event.dropdown;
+ submenuOpen: function(submenu) {
if (submenu !== this._selectedSubmenu) {
//close the current menu and all its children
this._closeSelectedSubmenu();
@@ -361,10 +349,6 @@ define(['require', 'orion/webui/littlelib', 'orion/EventTarget'], function(requi
if (this._boundAutoDismiss) {
lib.removeAutoDismiss(this._boundAutoDismiss);
}
- if (this._boundSubmenuOpenHandler) {
- this.removeEventListener("submenuopen", this._boundSubmenuOpenHandler);
- this._boundSubmenuOpenHandler = null;
- }
}
};
Dropdown.prototype.constructor = Dropdown;