231870 – Provide code completion for properties based on web service that returns JSON

This Bugzilla instance is a read-only archive of historic NetBeans bug reports. To report a bug in NetBeans please follow the project's instructions for reporting issues.

Bug 231870 - Provide code completion for properties based on web service that returns JSON

Summary: Provide code completion for properties based on web service that returns JSON

Status:	NEW

Alias:	None

Product:	web
Classification:	Unclassified
Component:	AngularJS (show other bugs)
Version:	7.4
Hardware:	All All

Importance:	P2 normal with 2 votes (vote)
Assignee:	Petr Pisl

URL:
Keywords:

Depends on:
Blocks:	234990
	Show dependency tree

Reported:	2013-06-26 20:44 UTC by Petr Jiricka
Modified:	2015-09-09 11:39 UTC (History)
CC List:	4 users (show)

See Also:
Issue Type:	ENHANCEMENT
Exception Reporter:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

Description Petr Jiricka 2013-06-26 20:44:58 UTC

1. Clone this project from github: https://github.com/daha/angularJS-github-contributors
2. Import it to NetBeans using HTML5 Project with Existing Sources wizard
3. Set browser to Chrome with NetBeans Integration and run it
3. On the index page, click "Show Repos" (don't change the default user "angular")
4. Click one of the items in the repository list (e.g. angular.js)
5. In the IDE, open Window | Web | Network Monitor
6. Click the line that says GET api.github.com/repos/angular/angular.js/contributors
7. In the Response tab you see that this service returns data entries such as:
{
"login": "IgorMinar",
"id": 216296,
"avatar_url": "https://secure.gravatar.com/avatar/fc5dc0d579fb554752763792a2d5f449?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png",
"gravatar_id": "fc5dc0d579fb554752763792a2d5f449",
"url": "https://api.github.com/users/IgorMinar",
"html_url": "https://github.com/IgorMinar",
"followers_url": "https://api.github.com/users/IgorMinar/followers",
"following_url": "https://api.github.com/users/IgorMinar/following{/other_user}",
"gists_url": "https://api.github.com/users/IgorMinar/gists{/gist_id}",
"starred_url": "https://api.github.com/users/IgorMinar/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/IgorMinar/subscriptions",
"organizations_url": "https://api.github.com/users/IgorMinar/orgs",
"repos_url": "https://api.github.com/users/IgorMinar/repos",
"events_url": "https://api.github.com/users/IgorMinar/events{/privacy}",
"received_events_url": "https://api.github.com/users/IgorMinar/received_events",
"type": "User",
"contributions": 1045
}

8. In the call stack tab you see that the first non-framework frame is: ContribListCtrl (app/js/controllers.js:100:42)
9. Open file Site Root/partials/contributors-list.html
10. Place caret after contributor. (e.g. on line 24) and press Ctrl+Space

=> It would be nice if code completion offered all the properties of the contributor object.

IMO this is one of the scenarios/features we could support as part of a broader "Web service consumption" support, as discussed previously with David K, and today with Milan.

How could this be achieved? It looks like the IDE has all the necessary info available in the network monitor, and they need to be tied with the JavaScript editor/model. I see that we even support Ctrl+click navigation from <div ng-controller="ContribListCtrl"> to the controller declaration. Then we need to find the real URL+returned JSON for this controller, and this information is available in the call stack, no?

Another idea raised by David Strupl is: since we are running the code in debugger, can we "watch" what properties are contained in the live objects in the browser as the code gets executed, and feed this data to code completion? (Though this may be just a generalization of the approach that's already used by the Network Monitor, isn't it?)

Comment 1 David Konecny 2013-06-27 04:56:59 UTC

I can imagine few solutions.

#1) An AngularJS specific solution would be to hook into AngularJS in runtime when page is executed and inspect AngularJS Scopes. If you install "AngularJS Batarang" plugin to Chrome and run this app in CDT you will get to see hierarchy of AngularJS scopes and what they contain. The IDE could grab the snapshot and persist it (and always keep last page execution snapshot in userdir mapped to an HTML) and then use the data hierarchy in code completion. This could be fairly accurate with occasional mistakes when runtime snapshot is outdated and does not contain the latest code changes.

#2) A generic (and more heuristic and more error prone) solution would be to take a snapshot of all data structures fetched from network during rendering of a single page. This would happen again in runtime when page is opened in browser and would provide following information: "these data structures are used during rendering of this page". (and snaphost would be again persisted in the userdir and mapped to an HTML) And code completion on this HTML (and its dependencies) would offer all names collected from the data structure snaphost. It may sound lame but in practice I can imagine it could work fairly well. For example in Petr's /partials/contributors-list.html after user wrote {{contributors.data.length}} and {{contributor.login}} we are positive which datastructure corresponds to {{contributors}}. And even without that just offering in code completion names of JSON datafields would still help.

Any other ideas?? Comments?

Comment 2 Petr Jiricka 2013-06-27 13:02:21 UTC

Thanks David. With #1, to clarify are you suggesting that we use the "AngularJS Batarang" plugin itself and require the user to install it, or that we use a similar approach that this plugin is using? It seems like we can't rely on this plugin, as it requires CDT, which of course is a conflict with our connector.

Today I also filed another AngularJS-specific enhancement (issue 231924), which I assume could also be addressed by approaches #1 and #2. But that enhancement may also be solvable by directly analyzing the code.

The disadvantage of both #1 and #2 is that first you need to run the page to get the runtime data and initialize the code completion, but:
- I think that's still fine, most of the time you are tweaking existing code rather than writing new.
- I don't see any way to do that without information from the runtime

Comment 3 David Konecny 2013-06-27 23:53:00 UTC

> "or that we use a similar approach that this plugin is using"
This is what I meant. The plugin was just an example of what can be extracted from the AngularJS in runtime.