Closed Bug 792633 Opened 7 years ago Closed Last year

Allow users to collapse console.dir() output

Categories

(DevTools :: Console, enhancement, P3)

enhancement

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: anton, Unassigned)

References

Details

Attachments

(1 file)

I was playing with console.dir output today and noted several bugs that make the output pretty much unusable for any kind of large-ish objects:

1. You can't collapse/expand the output box. So if you run 'console.dir(window)' you'll end up with a giant box that cannot be hidden in any way but clearing the whole web console.

2. You can't scroll if your mouse pointer is inside the console.dir output box. This means that to go to the end of your output you have to move your pointer to the side of the window and then scroll.

3. The whole area around the output box is a one big link. Accidentally clicking on it (happens a lot with trackpads, especially because of 2) opens an Inspector window.

Attached is a screenshot of the output box I'm talking about (in case its unclear).
I volunteer to work on that but I'm not sure how affected this will be by the ongoing web console output rewrite (778766).
Thanks for the bug report! console.dir uses a part of the property panel, and it is in dire need of improvements.

The output rewrite will change all of the code structure, but little in user experience.

Can you please explain what kind of code changes you have in mind? And the UX changes? With a bit of planning I think you should be able to do your work in a way that would be easier for me to reuse.
Low hanging fruits would be: 1) making the console.dir output box seamless so it doesn't interfere with scrolling; 2) allow users to collapse/expand said box and 3) allow users to "popup" the box into a separate inspector window.

Or we can also go the other way and re-do inspector/console.dir implementation so that it opens as a side-bar a-la JSTerm.
for 1), I think we can do a better job there when we get to doing the console output improvements. We're planning to do that when Mihai's remoting is done (bug 768096).

2) might be a good short-term solution.

3) ultimately, maybe as part of 1) I think we want to do that.
(In reply to Mihai Sucan [:msucan] from comment #2)
> Thanks for the bug report! console.dir uses a part of the property panel,
> and it is in dire need of improvements.
> 
> The output rewrite will change all of the code structure, but little in user
> experience.

You sure? Might be a good time to do both rather than another major refactoring project without user-visible change.
(In reply to Rob Campbell [:rc] (:robcee) from comment #5)
> (In reply to Mihai Sucan [:msucan] from comment #2)
> > Thanks for the bug report! console.dir uses a part of the property panel,
> > and it is in dire need of improvements.
> > 
> > The output rewrite will change all of the code structure, but little in user
> > experience.
> 
> You sure? Might be a good time to do both rather than another major
> refactoring project without user-visible change.

We could make changes, sure, but we should also avoid the potential of having big changes backed out due to some UX/UI changes that people will not agree with. I believe you agree we should try to keep changes on the safe side. We should discuss more about that bug.
OS: Mac OS X → All
Priority: -- → P2
Hardware: x86 → All
Anton, this should be fixed by the switch to the variables view (bug 808370). Can you please retest and point out any issues? Thanks!
Flags: needinfo?(anton)
2 and 3 seem to be resolved but 1 is still an issue IMHO. I couldn't find how to collapse the console.dir output box.
Flags: needinfo?(anton)
Thanks Anton. Going to rename the bug accordingly. Also lowering priority because this bug is now only about collapsible console.dir() messages.
Severity: major → normal
Priority: P2 → P3
Summary: Multiple bugs with console.dir output → Allow users to collapse console.dir() output
A 418px height box that is output in the webconsole every time a console.dir statement is executed is not acceptable and the priority should be raised. I must say, I do like the collapsible tree, but it is appeal is completely overshadowed by the bulk of the output box.

I would hope to see:
  * On output, an object on a single line.
  * On the single line, you would see a brief JSON description of the content with ellipses after a 50 characters or so. 
  * The object would have an expander button as it does today to see the children of the object. 
  * As the tree is expanded, the outer box should grow in size to a maximum height of the 418px (418px is current height of every console.dir statement executed).
  * As the box hits the maximum height, it should then be scrollable.
  * The entire object should be able to be copied as a JSON string into the copy buffer via a right click menu item.
This bug pretty much singlehandedly drove me over to using Chrome for dev work instead of Firefox, which I'm fine with.  However, on the rare occasion when Firefox is misbehaving and I have to debug in it again, this bug continually burns me.

For anyone else suffering through this, the best workaround I can muster is to duck-punch `console.dir` and `console.dirxml`:

```js
(function() {
  // One of many possible Firefox browser detection hacks
  var isNotFirefox = typeof InstallTrigger === "undefined";

  // Only duck-punch in Firefox
  if (isNotFirefox) {
    return;
  }

  function getTypeName(obj) {
    var typeObj = obj == null || typeof obj === "function" ? obj : obj.constructor;
    if (typeObj) {
      return typeObj.name ||
        String(typeObj)
          .replace(/^[\S\s]*?function\s*/, "")
          .replace(/[\s\(\/][\S\s]+$/, "");
    }
    return "" + obj;
  }
  
  console._dir = console.dir;
  console._dirxml = console.dirxml;

  console.dir = function() {
    var argTypes =
      Array.prototype.slice.call(arguments)
        .map(function(e) { return getTypeName(e); });
    console.groupCollapsed("console.dir: " + argTypes.join(", "));
    console._dir.apply(console, arguments);
    console.groupEnd();
  };
  console.dirxml = function() {
    var argTypes =
      Array.prototype.slice.call(arguments)
        .map(function(e) { return getTypeName(e); });
    console.groupCollapsed("console.dirxml: " + argTypes.join(", "));
    console._dirxml.apply(console, arguments);
    console.groupEnd();
  };

})();
```
Severity: normal → enhancement
Product: Firefox → DevTools
This was resolved with Bug 1308566
Status: NEW → RESOLVED
Closed: Last year
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.