This seems reasonable to me. When DevTools is right-anchored/floating but very narrow, Computed Styles should become the second tab of the styles pane, just as it is when the styles pane is anchored on the right.

@luoe: Could you find our what the responsive breakpoint is for switching between single/split style pane right now, so we can determine where the next breakpoint should  be?

@chowse: The current breakpoint is when DevTools width == 680px, switching between single/split.  The colored box model showing padding/border/margin in the Computed tab is 179px wide, so the second breakpoint could be between 179 and 680.

Spoke with luoe@ offline, and found the current defaults/breakpoints for the styles panel:

* When DevTools is >= 680px wide:
  * The styles pane is docked to the right
  * The Styles tabs (including Computed Style) are 325px wide by default
  * The elements view is <= 355px by default
* Otherwise:
  * The styles pane is docked to the bottom
  * The Computed Styles tab is 215px wide by default
  * The other Styles tabs are <= 465px by default

Let's assume 325px and 215px are sensible defaults for the Style pane and Computed Styles pane respectively, and it's uncommon for people to change them.

My recommendation would be to set the breakpoint for switching from "split pane at the bottom" to "all tabs at the bottom" to *430px* (2x the default width of the style pane).

* This ensures the Computed Style pane, left untouched, never takes up more than half the style pane.

* It lets the Styles tab's width get smaller than its sensible default (325px) but not so small that it becomes unusable. We considered using 340px (1/2 the current breakpoint) or 325px (default width of Style tabs) as a breakpoint, but this would leave the default width of the Styles tabs at <= 125px, which is borderline unusable.

* It avoids switching too quickly between the split pane and tabs layouts. We discussed setting the breakpoint at 540px (Style tab default width + Computed Style default width), but this would leave a very narrow window in which the split pane could appear (540px <= width <= 680px).

So, when the DevTools panel is <= 415px wide:

* The Styles panel should be anchored to the bottom of the panel
* Computed Styles should become the 2nd tab of the Styles panel
* The Box Model viz should appear at the bottom of the Styles tab and the top of the Computed Styles tab

For reference: 415px wide panel

Deleted: separateComputedAt415px.png 36.7 KB

	separateComputedAt415px.png 36.7 KB View Download

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/eba1e6e57e86f481a3b5a40713a744ce3d9f2d66

commit eba1e6e57e86f481a3b5a40713a744ce3d9f2d66
Author: luoe <luoe@chromium.org>
Date: Wed May 17 00:37:56 2017

DevTools: add new mode for styles sidebar that hides computed split view

Currently, the default behavior when resizing ElementsPanel will switch from
vertical to horizontal mode when it's width is < 680px. At super small widths,
this makes the `Styles` and `Computed` views both tall and cramped for space.

This CL adds another rule when the width is < 415px, giving the `Computed` view
its own separate tab. A screenshot of DevTools at this width is in the crbug.

BUG= 619064 

Review-Url: https://codereview.chromium.org/2870163002
Cr-Commit-Position: refs/heads/master@{#472267}

[modify] https://crrev.com/eba1e6e57e86f481a3b5a40713a744ce3d9f2d66/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js