Hi,
PFA patch to add basic Tab key navigation in debugger window, where user
will be able to navigate buttons using Tab key.
RM#2897
TODO:// Need to work on Debugger window Panel navigation.
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
diff --git a/web/pgadmin/tools/debugger/static/js/debugger_ui.js
b/web/pgadmin/tools/debugger/static/js/debugger_ui.js
index ecb7e87..339af36 100644
--- a/web/pgadmin/tools/debugger/static/js/debugger_ui.js
+++ b/web/pgadmin/tools/debugger/static/js/debugger_ui.js
@@ -1,5 +1,5 @@
define([
- 'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
'underscore.string', 'alertify',
+ 'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
'underscore.string', 'pgadmin.alertifyjs',
'sources/pgadmin', 'pgadmin.browser', 'backbone', 'backgrid', 'codemirror',
'backform', 'wcdocker', 'pgadmin.backform', 'pgadmin.backgrid',
'pgadmin.browser.panel'
@@ -445,12 +445,35 @@ define([
grid.render();
$(this.elements.content).html(grid.el);
+
+ // For keyboard navigation in the grid
+ // we'll set focus on checkbox from the first row if any
+ var grid_checkbox = $(grid.el).find('input:checkbox').first();
+ if (grid_checkbox.length){
+ setTimeout(function() {
+ grid_checkbox.click();
+ }, 250);
+ }
+
},
setup:function() {
return {
- buttons:[{ text: "Debug", key: 13, className: "btn btn-primary"
},
- { text: "Cancel", key: 27, className: "btn btn-primary"
}],
- options: { modal: 0, resizable: true }
+ buttons:[
+ { text: "Debug", key: 13, className: "btn btn-primary" },
+ { text: "Cancel", key: 27, className: "btn btn-primary" }
+ ],
+ // Set options for dialog
+ options: {
+ //disable both padding and overflow control.
+ padding : !1,
+ overflow: !1,
+ model: 0,
+ resizable: true,
+ maximizable: true,
+ pinnable: false,
+ closableByDimmer: false,
+ modal: false
+ }
};
},
// Callback functions when click on the buttons of the Alertify
dialogs
@@ -727,8 +750,14 @@ define([
}
},
build:function() {
+ Alertify.pgDialogBuild.apply(this);
},
prepare:function() {
+ // Add our class to alertify
+ $(this.elements.body.childNodes[0]).addClass(
+ 'alertify_tools_dialog_properties obj_properties'
+ );
+
/*
If we already have data available in sqlite database then we
should enable the debug button otherwise
disable the debug button.
diff --git a/web/pgadmin/tools/debugger/templates/debugger/direct.html
b/web/pgadmin/tools/debugger/templates/debugger/direct.html
index e16d602..29bb729 100644
--- a/web/pgadmin/tools/debugger/templates/debugger/direct.html
+++ b/web/pgadmin/tools/debugger/templates/debugger/direct.html
@@ -38,26 +38,32 @@ try {
<nav class="navbar-inverse navbar-fixed-top">
<div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2
border-gray-3" role="toolbar" aria-label="">
<div class="btn-group" role="group" aria-label="">
- <button type="button" class="btn btn-default btn-step-into"
title="{{ _('Step into') }}">
+ <button type="button" class="btn btn-default btn-step-into"
title="{{ _('Step into') }}"
+ tabindex="1">
<i class="fa fa-indent"></i>
</button>
- <button type="button" class="btn btn-default btn-step-over"
title="{{ _('Step over') }}">
+ <button type="button" class="btn btn-default btn-step-over"
title="{{ _('Step over') }}"
+ tabindex="2">
<i class="fa fa-outdent"></i>
</button>
- <button type="button" class="btn btn-default btn-continue"
title="{{ _('Continue/Start') }}">
+ <button type="button" class="btn btn-default btn-continue"
title="{{ _('Continue/Start') }}"
+ tabindex="3">
<i class="fa fa-play-circle"></i>
</button>
</div>
<div class="btn-group" role="group" aria-label="">
- <button type="button" class="btn btn-default
btn-toggle-breakpoint" title="{{ _('Toggle breakpoint') }}">
+ <button type="button" class="btn btn-default
btn-toggle-breakpoint" title="{{ _('Toggle breakpoint') }}"
+ tabindex="4">
<i class="fa fa-circle"></i>
</button>
- <button type="button" class="btn btn-default btn-clear-breakpoint"
title="{{ _('Clear all breakpoints') }}">
+ <button type="button" class="btn btn-default btn-clear-breakpoint"
title="{{ _('Clear all breakpoints') }}"
+ tabindex="5">
<i class="fa fa-ban"></i>
</button>
</div>
<div class="btn-group" role="group" aria-label="">
- <button type="button" class="btn btn-default btn-stop" title="{{
_('Stop') }}">
+ <button type="button" class="btn btn-default btn-stop" title="{{
_('Stop') }}"
+ tabindex="6">
<i class="fa fa-stop-circle"></i>
</button>
</div>
