Provide a loading message in the sources navigator panel

[azellsworth]

Often, it will take a long time for sources to load into the node-inspector. Unfortunately, there's no feedback to the user about this process, which can cause new users to abandon the tool. This pull request provides a proof-of-concept loading message to the user, and suggests the --no-preload flag after a set period of loading time.

There is likely a much more elegant solution for presenting feedback to the user, and I'd be happy to discuss an alternative approach to adding this feature.

Features:

• Displays "Loading files..." animation while sources are loading
• After 5 seconds, if sources have not loaded, suggests --no-preload

Example image:

[3y3]

Hello @azellsworth , thank you for contribution.

Unfortunately we can't change something in front-end folder, because it updates automatically sometimes.
Look at front-end-node folder, there placed all our overrides.

I'd like your idea. But we need some changes here.

Instead of injecting in registerCommand func, you can define your own event (look at showConsole), which will be sent to front-end on start of getRecourceTree processing (and maybe in progress).

So getResourceTree in lib/PageAgent will looks somethind like that:

getResourceTree: function(params, done) {
    var cb = function() {
      done.apply(null, arguments);
      this._session.emit('resource-tree-resolved');
    }.bind(this);

+   this._frontendClient.sendEvent('getResourceTreeProgress', {
+     folders: 0,
+     files: 0
+   });
    if (this._debuggerClient.isReady) {
      this._doGetResourceTree(params, cb);
    } else {
      this._debuggerClient.once(
        'connect',
        this._doGetResourceTree.bind(this, params, cb)
      );
    }
  },

Event info is optional solution. But if you want, you can add real progress by sending getResourceTreeProgress after each iterate call in lib/ScriptFileStorage.js

Also would be nice to use DevTools api to create message. You also can use css instead of direct styling.
The example of css injection exists in front-end-node/settings