New issue
Advanced search Search tips

Issue 304730 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 2013
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature



Sign in to add a comment

DevTools: make entire toolbar a resize handle

Project Member Reported by paulir...@chromium.org, Oct 7 2013

Issue description

These days the devtools move around a lot depending on what you're doing.

Right: great for DOM & Styles, great for JS debugging
Bottom: best for Timeline
Undocked: for the full Flame Chart view.

As such you end up resizing DevTools while docked quite a bit. The handle on the top of the dock-to-bottom is really tiny. Hard to grab. 

Meanwhile the handle that splits the console drawer is very tall. Can we use the same behavior, so any empty space on the toolbar can be grabbed?

(Also row-resize is probably a better cursor chioce than our current ns-resize)


 
cursor_ns-resize.gif
95 bytes View Download
Screen Shot 2013-10-06 at 9.21.55 PM.png
125 KB View Download
row-resize.gif
891 bytes View Download
Owner: dgozman@chromium.org
Status: Assigned
 Issue 305960  has been merged into this issue.
 Issue 315219  has been merged into this issue.
Project Member

Comment 4 by bugdroid1@chromium.org, Dec 11 2013

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=163695

------------------------------------------------------------------------
r163695 | dgozman@chromium.org | 2013-12-11T10:16:56.224003Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Settings.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/InspectorView.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/InspectorFrontendHostStub.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/inspector.css?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/SourcesPanel.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/Drawer.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/StatusBarButton.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/helpScreen.css?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/inspector.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/HelpScreen.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/externs.js?r1=163695&r2=163694&pathrev=163695
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/inspectorCommon.css?r1=163695&r2=163694&pathrev=163695

DevTools: added "overlayContents" mode, where DevTools content is placed around and underneath insepcted contents.

BUG= 318751 , 304730 

Review URL: https://codereview.chromium.org/71633003
------------------------------------------------------------------------
Labels: -Type-Bug Type-Feature
Status: Fixed
Grab and move up and down is cool, but personally I prefer:
https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#dock-to-right
https://code.google.com/p/chromium/issues/detail?id=315219

Also related (can I add a shortcut to toggle dev tools from dock to bottom / dock to right):
https://code.google.com/p/chromium/issues/detail?id=314662#c14

This would be super sweet!

Interested to know your thoughts, cheers.
We don't have a clear concept of how drag-to-change-dock should work. This interferes with drag-to-resize. What should be the UI indication? If nothing happens while you drag, and then suddenly dock side has changed, I'd be surprised to say at least.

As for custom shortcut, there is an issue 174309 already.
Can we allow dragging the docking icon?
Cool, issue 174309 would solve this for me.

In Version 35.0.1898.0 canary I can drag the whole toolbar up and down, but personally I'd prefer it if it behaved like this:
https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow/devtools-drag-to-right.gif

Where you can drag the toolbar to dock dev tools to the right or bottom.

Perhaps this could be an option in settings if not in by default?

[✓] Drag Toolbar To Right For Quicker Dock-Positioning



Dragging dock icon seems awkward to me. It also shows available options on mouse hold. This plays bad with drag.

Setting for 'drag-to-dock instead of drag-to-resize' is an interesting idea. I will look into that.

Sign in to add a comment