Skip to content

Commit 6b28e3c

Browse files
author
p01
committed
Improved keyboard navigation
1 parent ea2db22 commit 6b28e3c

File tree

3 files changed

+104
-76
lines changed

3 files changed

+104
-76
lines changed

‎src/resource-manager/resource_service.js‎

Lines changed: 65 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ window.cls || (window.cls = {});
77
*/
88
cls.ResourceInspector = function(network_logger)
99
{
10+
var EXPAND_COLLAPSE_ATTRIBUTE = "data-expand-collapse-id";
11+
var RESOURCE_UID_ATTRIBUTE = "data-resource-uid";
12+
var HIGHLIGHT_CLASSNAME = "resource-highlight";
1013

1114
var THROTTLE_DELAY = 250;
1215
var TYPE_GROUP_MAPPING =
@@ -125,11 +128,11 @@ cls.ResourceInspector = function(network_logger)
125128
// populate document_id_index
126129
document_id_index[d.documentID] = i;
127130

128-
// set depth, pivotID and sameOrigin
129-
var p = a[document_id_index[d.parentDocumentID]] || {pivotID:d.windowID, depth:0};
130-
var id = p.pivotID + "_" + d.documentID;
131+
// set depth, pivot_id and sameOrigin
132+
var p = a[document_id_index[d.parentDocumentID]] || {pivot_id:d.windowID, depth:0};
133+
var id = p.pivot_id + "_" + d.documentID;
131134
d.depth = p.depth + 1;
132-
d.pivotID = id;
135+
d.pivot_id = id;
133136
d.sameOrigin = cls.ResourceUtil.sameOrigin(p.url, d.url);
134137

135138
// set the default collapsed flag
@@ -145,33 +148,40 @@ cls.ResourceInspector = function(network_logger)
145148
}, this);
146149

147150
var unknown_document_id = false;
148-
151+
// filter out resources pointing to an unknown document_id,
149152
// set unknown_document_id flag,
150153
// assign top resource to the right document,
151154
// add group to each resource,
152-
// sameOrigin flag to each resource
153-
// full_id ( pivot_ID + uid )
154-
ctx.resourceList.forEach(function(r) {
155-
if (!unknown_document_id && !document_id_index.hasOwnProperty(r.document_id))
156-
unknown_document_id = true;
157-
155+
// sameOrigin flag to each resource,
156+
// full_id ( pivot_id + group + uid ),
157+
// pivot_id
158+
ctx.resourceList = ctx.resourceList.filter(function(r) {
158159
// check if this is the top resource of a document
159-
var documentID = ctx.document_resource_hash[r.resource_id];
160-
if (documentID != null && documentID != r.document_id)
161-
r.document_id = documentID;
160+
var document_id = ctx.document_resource_hash[r.resource_id];
161+
if (document_id != null && document_id != r.document_id)
162+
r.document_id = document_id;
163+
164+
var d = this._document_list[document_id_index[r.document_id]];
165+
if(!d)
166+
{
167+
unknown_document_id = true;
168+
return false;
169+
}
162170

163171
this._populate_document_resources(r);
164172

165173
r.group = TYPE_GROUP_MAPPING[r.type] || TYPE_GROUP_MAPPING["*"];
166-
var d = this._document_list[document_id_index[r.document_id]];
167-
r.sameOrigin = cls.ResourceUtil.sameOrigin(d && d.url, r);
168-
r.full_id = ( d && d.pivotID ) + "_" + ctx.group_order.indexOf(r.group) + r.group + "_" + r.uid;
174+
r.sameOrigin = cls.ResourceUtil.sameOrigin(d.url, r);
175+
176+
r.full_id = d.pivot_id + "_" + ctx.group_order.indexOf(r.group) + r.group + "_" + r.uid;
177+
r.pivot_id = d.pivot_id + "_" + r.group;
169178

179+
return true;
170180
}, this);
171181

172182
// sort the resource by their full_id ( pivot + uid )
173183
ctx.resourceList = ctx.resourceList.sort(function(a, b) {
174-
return a.full_uid > b.full_uid ? 1 : a.full_uid == b.full_uid ? 0 : -1;
184+
return a.full_id > b.full_id ? 1 : a.full_id == b.full_id ? 0 : -1;
175185
});
176186

177187
// filter the list of window. Purge the ones with no documents
@@ -185,7 +195,7 @@ cls.ResourceInspector = function(network_logger)
185195
// request the list of documents if we have
186196
// an empty documentList
187197
// or a resource pointing to an unknown document
188-
// or a document does not have a documentID yet
198+
// or a document does not have a document_id yet
189199
if (!ctx.documentList.length || unknown_document_id || null_document_id)
190200
this._list_documents();
191201

@@ -214,22 +224,22 @@ cls.ResourceInspector = function(network_logger)
214224
if (!this._context)
215225
return;
216226

217-
var pivot = target.get_ancestor("[data-expand-collapse-id]");
227+
var pivot = target.get_ancestor("[" + EXPAND_COLLAPSE_ATTRIBUTE + "]");
218228
if (pivot)
219229
{
220230
var hash = this._collapsed_hash;
221-
var pivotID = pivot.getAttribute("data-expand-collapse-id");
222-
var pivotIDs = [pivotID];
223-
var collapsed = !hash[pivotID];
231+
var pivot_id = pivot.getAttribute(EXPAND_COLLAPSE_ATTRIBUTE);
232+
var pivot_ids = [pivot_id];
233+
var collapsed = !hash[pivot_id];
224234

225235
if (event.shiftKey)
226236
{
227-
pivotIDs.push.apply(pivotIDs, Object.keys(hash).filter(function(p) {
228-
return p.startswith(pivotID + "_");
237+
pivot_ids.push.apply(pivot_ids, Object.keys(hash).filter(function(p) {
238+
return p.startswith(pivot_id + "_");
229239
}));
230240
}
231241

232-
pivotIDs.forEach(function(p) { hash[p] = collapsed; });
242+
pivot_ids.forEach(function(p) { hash[p] = collapsed; });
233243

234244
this.tree_view.update();
235245
}
@@ -240,59 +250,70 @@ cls.ResourceInspector = function(network_logger)
240250
if (!this._context)
241251
return;
242252

243-
var parent = target.get_ancestor("[data-resource-uid]");
253+
var parent = target.get_ancestor("[" + RESOURCE_UID_ATTRIBUTE + "]");
244254
if (parent == null)
245255
return;
246256

247-
var uid = parent.getAttribute("data-resource-uid");
257+
var uid = parent.getAttribute(RESOURCE_UID_ATTRIBUTE);
248258
this.highlight_resource(uid);
249259
this.detail_view.show_resource(uid);
250260
}.bind(this);
251261

252262
this.highlight_resource = function(uid)
253263
{
254-
var e;
255264
if (this._selected_resource_uid == uid)
256265
return;
257266

258-
e = document.querySelector(".resource-highlight");
267+
var e = document.querySelector("." + HIGHLIGHT_CLASSNAME);
259268
if (e)
260-
e.removeClass("resource-highlight");
269+
e.removeClass(HIGHLIGHT_CLASSNAME);
261270

262271
this._selected_resource_uid = uid;
263272
if (this._context)
264273
this._context.selectedResourceUID = uid;
265274

266-
e = document.querySelector("[data-resource-uid='" + this._selected_resource_uid + "']");
275+
e = document.querySelector("[" + RESOURCE_UID_ATTRIBUTE + "='" + this._selected_resource_uid + "']");
267276
if (e)
268-
e.addClass("resource-highlight");
277+
{
278+
e.addClass(HIGHLIGHT_CLASSNAME);
279+
// todo: scroll into view
280+
}
269281
}.bind(this);
270282

271-
this._highlight_sibling_resource = function(increment)
283+
this._highlight_sibling_resource = function(inc)
272284
{
273-
if (!this._context || !this._context.visibleResources || !this._context.visibleResources.length)
285+
if (!this._context)
274286
return;
275287

288+
// walk the list of resources in the "inc" direction, looking for the last visible
289+
// resource before we reached the selected resource uid ( or the end of the list )
276290
var uid;
277-
var list = this._context.visibleResources;
278-
var pos = list.indexOf(this._selected_resource_uid);
279-
if (pos == -1)
280-
uid = list[increment > 0 ? 0 : list.length - 1];
281-
else
282-
uid = list[Math.min( Math.max(0, pos + increment), list.length - 1)];
291+
var list = this._context.resourceList;
292+
var i = inc < 0 ? list.length - 1 : 0;
283293

284-
this.highlight_resource(uid);
294+
while (list[i] != null && list[i].uid != this._selected_resource_uid)
295+
{
296+
if (list[i].is_visible)
297+
uid = list[i].uid;
298+
299+
i += inc;
300+
}
301+
302+
if (uid != null)
303+
{
304+
this.highlight_resource(uid);
285305
this.detail_view.show_resource(uid);
306+
}
286307
};
287308

288309
this.highlight_next_resource_bound = function()
289310
{
290-
this._highlight_sibling_resource(1);
311+
this._highlight_sibling_resource(-1);
291312
}.bind(this);
292313

293314
this.highlight_previous_resource_bound = function()
294315
{
295-
this._highlight_sibling_resource(-1);
316+
this._highlight_sibling_resource(1);
296317
}.bind(this);
297318

298319
this._resource_request_update_bound = function(msg)

‎src/resource-manager/resource_templates.js‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,16 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
1818
return name;
1919
};
2020

21-
this._expander_extras = function(context, pivotID, depth)
21+
this._expander_extras = function(context, pivot_id, depth)
2222
{
23-
var hash = context.collapsed;
24-
25-
// expand all pivots when searching
26-
if (context.searchTerm != "")
27-
hash[pivotID] = false;
28-
29-
var collapsed = hash[pivotID];
23+
var collapsed = context.collapsed[pivot_id];
3024

3125
var tpl = {};
3226

3327
tpl.h2 = ["handler", "resources-expand-collapse"];
3428
tpl.li =
3529
[
36-
"data-expand-collapse-id", pivotID
30+
"data-expand-collapse-id", pivot_id
3731
];
3832
tpl.button =
3933
[
@@ -51,7 +45,21 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
5145
this.update = function(context)
5246
{
5347
this.flat_list = [];
54-
context.visibleResources = [];
48+
49+
// expand all the pivots if there is a search_term
50+
if (context.search_term != "")
51+
Object.keys(context.collapsed).forEach(function(v) { context.collapsed[v] = false; });
52+
53+
// filter the list of resources, set their is_visible flag and push the ones matching
54+
context.resources = [];
55+
context.resourceList.forEach(function(r) {
56+
var matches = (context.search_term == "" || r.url.contains(context.search_term));
57+
r.is_visible = matches && !context.collapsed[r.pivot_id]
58+
59+
if (matches)
60+
context.resources.push(r);
61+
});
62+
5563
this.windows(context);
5664
var tpl = ["div", ["ul", this.flat_list], "class", "resource-tree"];
5765
delete this.flat_list;
@@ -90,7 +98,7 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
9098
this.documents = function(context, wid, pid)
9199
{
92100
context.documentList.filter(function(d) {
93-
return d.documentID != null && d.windowID == wid && d.parentDocumentID == pid;
101+
return d.windowID == wid && d.parentDocumentID == pid;
94102
}).forEach(
95103
this.document.bind(this, context)
96104
);
@@ -99,15 +107,12 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
99107
this.document = function(context, d)
100108
{
101109
var documentResources = context.documentResources[d.documentID] || [];
102-
var resources = context.resourceList.filter(function(r) {
103-
if (context.searchTerm != "" && !r.url.contains(context.searchTerm))
104-
return false;
105-
110+
var resources = context.resources.filter(function(r) {
106111
return documentResources.contains(r.uid);
107112
});
108113

109114
var depth = d.depth;
110-
var extras = this._expander_extras(context, d.pivotID, depth);
115+
var extras = this._expander_extras(context, d.pivot_id, depth);
111116

112117
this.flat_list.push(
113118
["li",
@@ -144,17 +149,17 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
144149
context.group_order.forEach(this.resource_group.bind(this, context, resources, d));
145150
};
146151

147-
this.resource_group = function(context, resources_unfiltered, d, g)
152+
this.resource_group = function(context, resources, d, g)
148153
{
149-
var resources = resources_unfiltered.filter(function(r) {
154+
var resources = resources.filter(function(r) {
150155
return r.group == g;
151156
});
152157

153158
if (!resources.length)
154159
return;
155160

156161
var depth = d.depth + 1;
157-
var extras = this._expander_extras(context, d.pivotID + "_" + g, depth);
162+
var extras = this._expander_extras(context, d.pivot_id + "_" + g, depth);
158163

159164
this.flat_list.push(
160165
["li",
@@ -185,18 +190,16 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
185190

186191
this.resource = function(context, depth, r)
187192
{
188-
var search = context.searchTerm;
193+
var search = context.search_term;
189194
var partial_URL_match = "";
190195
if (search != "")
191196
{
192-
var pos_first = r.url.indexOf(search) - this.URL_MATCH_CONTEXT_SIZE;
193-
var pos_last = r.url.lastIndexOf(search) + this.URL_MATCH_CONTEXT_SIZE + search.length;
197+
var pos_first = r.url.indexOf(search) - URL_MATCH_CONTEXT_SIZE;
198+
var pos_last = r.url.lastIndexOf(search) + URL_MATCH_CONTEXT_SIZE + search.length;
194199

195200
partial_URL_match = (pos_first > 0 ? "…" : "") + r.url.substring(pos_first, pos_last) + (pos_last < r.url.length ? "…" : "");
196201
}
197202

198-
context.visibleResources.push(r.uid);
199-
200203
this.flat_list.push(
201204
["li",
202205
["h2",
@@ -209,11 +212,11 @@ window.templates.resource_tree || (window.templates.resource_tree = new function
209212
],
210213
" ",
211214
r.sameOrigin ? [] : ["span", r.host, "class", "resource-domain"],
212-
213-
"handler", "resource-detail",
214-
"data-resource-uid", String(r.uid),
215-
"class", "resource-tree-resource" + (context.selectedResourceUID == r.uid ?" resource-highlight" : "")
216-
]
215+
"class", "resource-tree-resource"
216+
],
217+
"class", (context.selectedResourceUID == r.uid ? "resource-highlight" : ""),
218+
"handler", "resource-detail",
219+
"data-resource-uid", String(r.uid)
217220
]
218221
);
219222
};

‎src/resource-manager/resource_tree_view.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ cls.ResourceTreeView = function(id, name, container_class, html, default_handler
4343

4444
if (ctx)
4545
{
46-
ctx.searchTerm = this.searchTerm || "";
46+
ctx.search_term = this.search_term || "";
4747
tpl = templates.resource_tree.update(ctx);
4848
}
4949
else if (this._loading)
@@ -165,9 +165,9 @@ cls.ResourceTreeView.create_ui_widgets = function()
165165
text_search.add_listener("onbeforesearch", (function(msg)
166166
{
167167
var view = window.views.resource_tree_view;
168-
if (view.searchTerm != msg.search_term)
168+
if (view.search_term != msg.search_term)
169169
{
170-
view.searchTerm = msg.search_term;
170+
view.search_term = msg.search_term;
171171
view.update();
172172
}
173173
}).bind(text_search));
@@ -193,14 +193,18 @@ cls.ResourceTreeView.create_ui_widgets = function()
193193
text_search.setFormInput(
194194
views.resource_tree_view.getToolbarControl(msg.container, "resource-tree-text-search")
195195
);
196+
window.views.resource_tree_view.search_term = "";
196197
}
197198
}
198199
};
199200

200201
var on_view_destroyed = function(msg)
201202
{
202203
if (msg.id == "resource_tree_view")
204+
{
203205
text_search.cleanup();
206+
window.views.resource_tree_view.search_term = "";
207+
}
204208
};
205209

206210
window.messages.add_listener("view-created", on_view_created);

0 commit comments

Comments
 (0)