Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firebug Lite currently doesn't scroll the Console panel to the bottom. #19

Open
sfinktah opened this issue Oct 17, 2015 · 4 comments
Open

Comments

@sfinktah
Copy link

per: https://code.google.com/p/fbug/issues/detail?id=5345

Firebug Lite currently doesn't scroll the Console panel to the bottom. See http://getfirebug.com/firebuglite. This isn't Safari specific.

Therefore I keep this as enhancement request for Firebug Lite.

Note that Firebug Lite development is currently put on ice due to a lack of resources. So if you want this to be implemented soon, feel free to provide a patch.

Sebastian

This "solves" it, but I'm presently to busy to branch and insert myself.

(function() {
    var target = document.getElementById('fbConsole');
    if (target) {
        // create an observer instance
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    var a = mutation.addedNodes;
                    if (a.length) {
                        a[a.length - 1].scrollIntoView();
                    }
                }
            });
        });

        // configuration of the observer:
        var config = {
            childList: true
        };

        // pass in the target node, as well as the observer options
        observer.observe(target, config);

        // later, you can stop observing
        // observer.disconnect();
    }
})();
@Zlatkovsky
Copy link

For someone looking for this functionality, and stumbling into this thread: even without this code being incorporated into the FireBug source code, you can simply include a reference to the regular FireBug Lite script, and follow it up with a small script (based on the above) to add the scrolling behavior:

<script src=".../firebug-lite.js#enableTrace,startOpened"></script>

<script>
	(function() {
		// Small tweak to FireBug Lite, to have it scroll to the bottom-most line.
		// Taken from https://github.com/firebug/firebug-lite/issues/19
		var iframe = document.getElementById('FirebugUI');
		var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
		var target = innerDoc.getElementById('fbConsole');
		if (target) {
			// create an observer instance
			var observer = new MutationObserver(function(mutations) {
				mutations.forEach(function(mutation) {
					if (mutation.type === 'childList') {
						var a = mutation.addedNodes;
						if (a.length) {
							a[a.length - 1].scrollIntoView();
						}
					}
				});
			});

			// configuration of the observer:
			var config = {
				childList: true
			};

			// pass in the target node, as well as the observer options
			observer.observe(target, config);

			// later, you can stop observing
			// observer.disconnect();
		}
	})();
</script>

@Zlatkovsky
Copy link

Update to the code above: it looks like scrollIntoView has a problem on the Mac, whereby it makes the console items jump and the UI break if Firebug had previously been resized. So replace the scrollIntoView above with:

                    var elementToScroll = a[a.length - 1];
                    // On Safari, use a proprietary method -- or else the UI breaks if Firebug had previously been resized
                    if (elementToScroll.scrollIntoViewIfNeeded) {
                        elementToScroll.scrollIntoViewIfNeeded();
                    } else {
                        elementToScroll.scrollIntoView();
                    }

@sfinktah
Copy link
Author

sfinktah commented Oct 7, 2017

Has this still not been dealt with in trunk? Dissapointing.

@staabm
Copy link

staabm commented Oct 7, 2017

Why do you still use this tool? Browsers devtools are a lot more feature complete and usefull..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants