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

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}
Committed: https://chromium.googlesource.com/chromium/src/+/eba1e6e57e86f481a3b5a40713a744ce3d9f2d66

[luoe, 2017-05-09 20:11:25]

Patchset #1 (id:1) has been deleted

[luoe, 2017-05-09 20:17:12]

Description was changed from

==========
wip elem split

BUG=
==========

to

==========
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
==========

[luoe, 2017-05-09 20:18:48]

luoe@chromium.org changed reviewers:
+ lushnikov@chromium.org

[luoe, 2017-05-09 20:18:49]

I've manually tested this with the 'Panel layout' setting turned on and with
dock to bottom/left as well.

Please take a look

[luoe, 2017-05-09 20:21:55]

luoe@chromium.org changed reviewers:
+ dgozman@chromium.org

[lushnikov, 2017-05-10 21:30:53]

https://codereview.chromium.org/2870163002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
(right):

https://codereview.chromium.org/2870163002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js:841: if
(UI.inspectorView.element.offsetWidth < 415)
you have to do this only in horizontal

https://codereview.chromium.org/2870163002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js:898: if
(horizontally)
i'm having hard times understanding what's horizontally and splitMode.
You should use only either of them for your layout logic.

[luoe, 2017-05-10 23:40:53]

Ptal

https://codereview.chromium.org/2870163002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
(right):

https://codereview.chromium.org/2870163002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js:841: if
(UI.inspectorView.element.offsetWidth < 415)
On 2017/05/10 21:30:52, lushnikov wrote:
> you have to do this only in horizontal

Done.

https://codereview.chromium.org/2870163002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js:898: if
(horizontally)
On 2017/05/10 21:30:52, lushnikov wrote:
> i'm having hard times understanding what's horizontally and splitMode.
> You should use only either of them for your layout logic.

Done, just splitMode.

[lushnikov, 2017-05-16 18:25:19]

lgtm

[luoe, 2017-05-16 18:25:41]

The CQ bit was checked by luoe@chromium.org

[commit-bot: I haz the power, 2017-05-16 18:26:21]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-05-17 00:37:59]

CQ is committing da patch.

Bot data: {"patchset_id": 40001, "attempt_start_ts": 1494959141118200,
"parent_rev": "efe31a69050d5b1f0830124b172f9d323c460972", "commit_rev":
"eba1e6e57e86f481a3b5a40713a744ce3d9f2d66"}

[commit-bot: I haz the power, 2017-05-17 00:38:12]

Description was changed from

==========
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
==========

to

==========
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}
Committed:
https://chromium.googlesource.com/chromium/src/+/eba1e6e57e86f481a3b5a40713a7...
==========

[commit-bot: I haz the power, 2017-05-17 00:38:13]

Committed patchset #2 (id:40001) as
https://chromium.googlesource.com/chromium/src/+/eba1e6e57e86f481a3b5a40713a7...