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 222129 - Navigator no longer understands javascript classes
Summary: Navigator no longer understands javascript classes
Status: NEW
Alias: None
Product: javascript
Classification: Unclassified
Component: Navigation (show other bugs)
Version: 7.3
Hardware: All All
: P3 normal with 4 votes (vote)
Assignee: Petr Pisl
URL:
Keywords:
Depends on: 222177 222179 222182
Blocks:
  Show dependency tree
 
Reported: 2012-11-14 15:49 UTC by bfanger
Modified: 2014-03-06 14:50 UTC (History)
5 users (show)

See Also:
Issue Type: TASK
Exception Reporter:


Attachments
The screenshot of the current state (81.23 KB, image/png)
2012-11-14 15:58 UTC, Petr Pisl
Details
navigator screenshot (9.17 KB, image/png)
2012-11-14 15:59 UTC, Vladimir Riha
Details
Navigator in Netbeans 7.2 (17.68 KB, image/png)
2012-11-14 19:11 UTC, bfanger
Details
Navigator in Netbeans 7.3 (Dev 201211140001) (42.15 KB, image/png)
2012-11-14 19:13 UTC, bfanger
Details
Editor.js used to create the 2 Navigator screenshots (4.39 KB, application/x-javascript)
2012-11-14 19:15 UTC, bfanger
Details
NetBeans 73RC2 JS Navigator - Class not recognized without property assignment (283.01 KB, image/png)
2013-02-13 22:14 UTC, vezea
Details
NetBeans 73RC2 JS Navigator - Class recognized with property assignment (295.79 KB, image/png)
2013-02-13 22:15 UTC, vezea
Details
Navigator in Netbeans 7.2 (108.00 KB, image/png)
2013-06-07 14:06 UTC, gewalop
Details
PrototypeJS 7.3.1 / 7.2 IDE diff navigator tree (204.33 KB, image/png)
2013-07-31 07:01 UTC, octlabs
Details
also affects code "suggests" (127.97 KB, image/png)
2013-07-31 07:11 UTC, octlabs
Details
Extjs in netbeans 7.2 (85.32 KB, image/png)
2013-09-13 13:36 UTC, martynas.typo3
Details
Extjs in netbeans 7.3 (68.03 KB, image/png)
2013-09-13 13:37 UTC, martynas.typo3
Details

Note You need to log in before you can comment on or make changes to this bug.
Description bfanger 2012-11-14 15:49:27 UTC
Example Javascript code:

    var Person = function () {}

    /** 
     * My method.
     * @return {String}
     */
    Person.prototype.myMethod = function () {
        return doSomething();
    };


The Navigator window in 7.2 gave a nice overview of methods in the class and seamed to understand what the prototype property for a function meant.
This is no longer the case in 7.3 which practically shows all variables used and imaginary _L12 types which makes it very noisy for large scripts.

I do find the "Ns.Class.prototype.method = function () {" notation a bit verbose but the improved navigation was worth the extra code.

I would like use the Backbone.View.extend method and use "@lends" from jsdoc to indicate which methods belong the the class which should allow netbeans to create a neat class entry in the navigator (and even improved autocompletion).

http://code.google.com/p/jsdoc-toolkit/wiki/TagLends

On a sidenote:
The navigator shows a "HTML->html" node for PHP files that don't
contain any html.
Comment 1 Petr Pisl 2012-11-14 15:58:55 UTC
Created attachment 127794 [details]
The screenshot of the current state
Comment 2 Vladimir Riha 2012-11-14 15:59:59 UTC
Created attachment 127795 [details]
navigator screenshot

How does it look in your case? Please check my screenshot. I also tried more complex case with [1] and I would say it works as well


[1] https://github.com/ladariha/sampleapp/blob/master/web/tests/js/complexcc.js



Product Version: NetBeans IDE Dev (Build 201211140001)
Java: 1.7.0_10-ea; Java HotSpot(TM) Client VM 23.6-b04
Runtime: Java(TM) SE Runtime Environment 1.7.0_10-ea-b15
System: Linux version 3.2.0-32-generic-pae running on i386; UTF-8; en_US (nb)
Comment 3 Petr Pisl 2012-11-14 16:00:57 UTC
What the build do you use. I attached a screenshot, where the behavior is
correct. Please feel free to reopen if something is wrong.
Comment 4 bfanger 2012-11-14 19:11:34 UTC
Created attachment 127809 [details]
Navigator in Netbeans 7.2
Comment 5 bfanger 2012-11-14 19:13:22 UTC
Created attachment 127811 [details]
Navigator in Netbeans 7.3 (Dev 201211140001)
Comment 6 bfanger 2012-11-14 19:15:14 UTC
Created attachment 127812 [details]
Editor.js used to create the 2 Navigator screenshots
Comment 7 bfanger 2012-11-14 20:40:13 UTC
The navigator for complexcc.js looks almost identical in 7.2 and 7.3
I've therefor uploaded screenshots of an example that demonstrates the extra clutter in the navigator introduced in 7.3.

The screenshot also includes a mystery "_L4" namespace and a "welcome" field which jump to a usage of the welcome method (declared later in the prototype and also visible in the navigator).

It also shows "prototype" as a subtype of Editor. Although it's technically possible for an object to contain "prototype" as field or subtype it's save to assume that is used for prototypical inheritance.
Which could be reflected in the navigator by merging those methods into the Editor node.


PS:
I can imagine building a navigator for a language like javascript where a function can be a function, a method, scope or constructor is hard and I wouldn't mind adding annotations to help the parser to make sense of it all.


*1: https://github.com/ladariha/sampleapp/blob/master/web/tests/js/complexcc.js
Comment 8 Petr Pisl 2012-11-15 09:40:15 UTC
> The screenshot also includes a mystery "_L4" namespace 

The _L4 refers the anonymous function, where is the variable Page declared. We have to work with full qualified namespaces in the model, to refer the right variable Page, and we reuse the generated names for the anonymous functions and anonymous literal objects from the parser. I agree that this should not be visible for the user. 

> and a "welcome" field which jump to a usage of the welcome method 
> (declared later in the prototype and also visible in the navigator).

This cames from the line

this.pager.on('empty', this.welcome, this);

in Editor.prototype.openEdition function. So this "welcome" property is resolved right that it belongs to the Editor object. But in this case it refers function defined in prototype. So the resolver shouldn't create new property welcome in Editor object, but add new occurrence for welcome function in the prototype object. But on the other hand the welcome property is parsed first, so the property is created in the model and after this is parsed the function. Hmmm, there has to be added some strange logic to catch these cases.

> It also shows "prototype" as a subtype of Editor. Although it's 
> technically possible for an object to contain "prototype" as field 
> or subtype it's save to assume that is used for prototypical 
> inheritance. Which could be reflected in the navigator by merging 
> those methods into the Editor node.

This behavior is intentional. In the runtime the properties and functions defined in prototype object has different behavior than properties and functions defined in a object directly (in this case Editor), during creating new objects. The function objects in prototype are shared / referenced during creating new objects and the function objects defined in Editor are created / copied. For this reason I would keep it as it is, because I see the difference in navigator.

> I can imagine building a navigator for a language like javascript 
> where a function can be a function, a method, scope or constructor 
> is hard and I wouldn't mind adding annotations to help the parser 
> to make sense of it all.

You are right. This is heuristic. The new JS editor is trying to build a model and over this model are running almost all editor features. So if the model will  contain the right information, then the features like navigator, code completion, refactoring etc will work correctly. I implement case by case to recognizing patterns in the code. But there will be always situations, when we will not understand to javascrit code correctly.

I created new issues for the problems described above. See the issue #222177, issue #222179 and issue #222182. If you don't agree with displaying prototype node in navigator, please open new issue. This issue I mark as task and will be closed, when the issues #222177, #222179 and #222182 will be fixed.
Comment 9 vezea 2013-02-13 22:12:33 UTC
Everything seems to be cleaned up in the recent 7.3 RC revisions, but we're still seeing some javascript navigator issues.

For one, a class function doesn't seem to get recognized as such in the navigator unless a property is assigned within the constructor or a prototype method.  (This would appear to be related to a "this" assignment.)

The code example in the original post can be used to demonstrate this (as of 7.3 RC2), and we have a couple of similar screenshots to illustrate.
Comment 10 vezea 2013-02-13 22:14:24 UTC
Created attachment 131364 [details]
NetBeans 73RC2 JS Navigator - Class not recognized without property assignment
Comment 11 vezea 2013-02-13 22:15:18 UTC
Created attachment 131365 [details]
NetBeans 73RC2 JS Navigator - Class recognized with property assignment
Comment 12 gewalop 2013-06-07 14:06:12 UTC
Created attachment 135512 [details]
Navigator in Netbeans 7.2
Comment 13 gewalop 2013-06-07 14:07:28 UTC
Comment on attachment 135512 [details]
Navigator in Netbeans 7.2

A
Comment 14 gewalop 2013-06-07 14:08:03 UTC
Comment on attachment 135512 [details]
Navigator in Netbeans 7.2

a
Comment 15 gewalop 2013-06-07 14:10:48 UTC
Sorry for the comments above. First time using bugzilla.
I can confirm the same bug.

Here's my script on 7.2: http://i.imgur.com/pP52C5N.png
and here's the exact same on 7.3: http://i.imgur.com/TzdGTJG.png
Comment 16 Petr Pisl 2013-07-31 06:54:06 UTC
Could you please attach the script itself?  Thanks
Comment 17 octlabs 2013-07-31 06:58:40 UTC
(In reply to comment #16)
> Could you please attach the script itself?  Thanks

var Pages = Class.create({

	initialize: function(dom, data, options) {

    this.data = data;
    this.dom = $(dom);

    this.objects = new Array();

    this.options = {

    };

		Object.extend(this.options, options || { });
	},

  init: function() {

  }

});
Comment 18 octlabs 2013-07-31 07:01:48 UTC
Created attachment 138032 [details]
PrototypeJS 7.3.1 / 7.2 IDE diff navigator tree
Comment 19 octlabs 2013-07-31 07:11:09 UTC
Created attachment 138033 [details]
also affects code "suggests"
Comment 20 Petr Pisl 2013-07-31 12:26:42 UTC
Now I understand. It's prototype framework support.
Comment 21 martynas.typo3 2013-09-13 13:36:38 UTC
Created attachment 140051 [details]
Extjs in netbeans 7.2
Comment 22 martynas.typo3 2013-09-13 13:37:10 UTC
Created attachment 140052 [details]
Extjs in netbeans 7.3
Comment 23 martynas.typo3 2013-09-13 13:39:14 UTC
Netbeans 7.3 no longer understands ExtJs classes also :(
Comment 24 nadavvin 2014-01-16 16:13:01 UTC
Please also supports the formats:

var a = function(){
	return {
		'a': 2
	}
}();
Comment 25 octlabs 2014-03-06 14:08:59 UTC
bug still in 8.0 RC 1
we have to stay in 7.2
Comment 26 Vladimir Riha 2014-03-06 14:50:00 UTC
Please do not change issue meta information. Thank you