Can you turn off scrolling in Chrome devtools DOM tree list - google-chrome-devtools

I don't know if this is new in the latest version or if I've only just noticed it, but the scrolling of the list of DOM tree elements at the bottom of the Elements panel is driving me up the wall.
This feels utterly ridiculous to bring up but I can't even search effectively because I don't know what that part of the panel is officially called - and none of the preferences or experiments seem to relate to it.
So does anybody know how to turn this off?

Related

What's the keyboard shortcut for filtering CSS Rules in chrome dev tools?

I'm looking around their shortcuts page but can't seem to find the shortcut to filter different CSS Rules.
Does anyone know how I can access it? In my experience sometimes these things don't get documented, and would be helpful if anyone can clarify.
Shortcuts Link
I want to be able to access this area here:
Thanks
I had a quite look at the source code and there doesn't appear to be a shortcut key combination for that. You can, of course, put in a feature request for one to be implemented. However, we'd have to consider what shortcut would be appropriate to use.
There's an alternative shortcut in terms of tab indexes in the Elements panel. By default, when you go to Elements, the body element is expanded. If you have no links in the outer elements inside the body, you only have to press the tab key twice to get to the style filter. If you have links, then it may be a few more times. However, you can press the left keyboard shortcut once to collapse the body, then tab twice. This means for the use case of just coming into the Elements panel (i.e. you haven't already been playing around in it), using left>tab>tab could be good enough.

Where did psuedo elements in Chrome Inspector go?

I cannot seem to find the little dotted box in my Chrome properties inspector that let me see psuedo elements like :hover, :active, :focus, :visited
Here is a link to what I see:
Instead there is a new little animations icon there. Yay for that, it sounds handy, but I would like the dotted box back, please.
I can right click on an element and "Force element state" to change the psuedo class, but this method is slower. I like the old way.
I've been looking all over the place, for example this link shows the old way: See :hover state in Chrome Developer Tools
I even looked in Chrome's change log and at their developer site instructions (https://developer.chrome.com/devtools) but no love!
Thanks guys,
-B
for anyone else it appears that the middle icon in the image above, the pushpin icon, now replaces the dotted box. Pressing on the pushpin brings up the same controls as before.

Configuring IntelliJ workspace views

Newb alert: moving from Eclipse to IntelliJ
I think what I want is "simple", but looking at menus, help and doc hasn't found it. (I did visit their help and website links; I'm probably not looking for the right thing.)
For my main code editing experience, I like to have 3 main window panes:
Right side, large main area: source code editor
Left, upper part: project files in a browsable outline
Left, lower part: structural view of the current class I'm editing (method names, member fields, etc)
For IntelliJ, I can get the Project Structure on the left, OR the Structure of the individual class, but I'm having trouble getting the left half of the screen to show both the Project and Class hierarchy.
I've tried to dragging and dropping, like from Eclipse, but that doesn't seem to work the say it did in that other IDE. (not arguing that it should, just something to try)
I think there are some general concepts that I might be missing. And when I use IntelliJ help or Google for things "view", etc, I'm getting some other meaning of the word.
General questions:
How do it (or CAN I?) generally arrange the IntelliJ IDE to look the
way I like? I'm happy to do some reading, but haven't seen this in
the table of contents.
Is it done by clicking and dragging?
Or maybe it's that IntelliJ just uses different verbiage to describe these IDE elements, and if you now the correct language, then maybe Google
promptly brings up the answer?
Any other Eclipse -> IntelliJ IDE config advice would also be welcome.
This is really easy to achieve. Instead of dragging the title bar of your panel, drag the button that opens the panel (see my screenshot). You can fully customize your view but dragging those buttons to either of the 4 panels (right, down, left up and left down).
Since you're asking for more advice on migrating, here's my approach to learn IntelliJ shortcuts as an Eclipse user. It's my blog, so if it is seen as advertising, I will remove it.

Hide Horizontal Scrollbars [Juno/Kepler/Luna]

As per the solution provided in this SO thread we can get back some screen real estate from Eclipse.
However, when working with multiple editor tabs (e.g. in a quadrant layout) the ever present horizontal scrollbars (even when there is no text extending beyond viewing area!) are a waste of valuable coding space, not to mention, hideous.
Have tried various CSS hacks in eclipse default_gtk.css (on Linux here) all to no avail; it appears that the ScrollBar widget is not modifiable via CSS.
This bug thread on saving space in Eclipse indicates something is in the works for Luna, but the developers seem split, some not caring about scrollbars or any wasted space (assuming everyone has huge monitors), and others preferring a clean and lean UI.
Anyway, if anyone has leads for how to hide scrollbars in Eclipse >= 4.2, do chime in! It's IMO the missing UI "feature" of Eclipse as you can strip out everything else, almost have max screen real estate available for code...just these damn scrollbars o_O
I think this does depend a lot on what the native controls used by SWT support. On the Mac, for example, scroll bars are not displayed.
If the SWT control on Linux supports turning off the scroll bars it should be possible to write a CSS property handler to set it. I do something similar on the Mac to set the scroll bar 'knob style' for trees and tables.
See my any answer to this question which shows how to write a CSS property handler in a plugin for StyledText which could be adapted.

Using chrome for web development - how to dock the inspector?

I know Firebug is the standard, but I find myself using Chrome a lot (screen space, speed, etc.) Anyway, I think their inspector is pretty good, too. Certainly good enough that I don't want to fire up FF and navigate thru a site every time that I want to take a peak at the DOM.
However, probably the most annoying part is that I can't dock the Chrome inspector to the bottom of Chrome. I see that there's a dock button, but it doesn't seem to do anything.
Any tips? suggestions? Is it supposed to do something else? Thanks.
There is now a button on chrome that allows you to dock the element inspector to the main browser window, just like firebug. It is located in the bottom left of the window and looks like a little rectangle with a smaller offset rectangle in it.
Seems to be something they're working on as we speak. So for now, I guess you'll just have to change the window size, to place the inspector underneath it, or whatever your preference is (except docking, of course)...
Ah .. found my answer here. Seems like it is dockable in Safari and not in Chrome, both based on webkit.
Seems like the proposed to solution is to remove the docking button! That's unfortunate. I won't use it if I have to constantly tab back and forth.
http://code.google.com/p/chromium/issues/detail?id=25