New issue
Advanced search Search tips

Issue 598805 link

Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 632893
Owner:
Closed: Jul 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

In DevTools, "device mode" shouldn't be centered

Reported by broc.s...@gmail.com, Mar 29 2016

Issue description

Chrome Version       : 49.0.2623.108
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)

What steps will reproduce the problem?
1. Open dev tools
2. Toggle Device Mode "on" (Ctrl + Shift + M)
3. Select a small mobile device, like iPhone4
4. The subject page is centered horizontally

What is the expected result?
The subject page should stay anchored to the left.

What happens instead of that?
The subject page is centered horizontally, which causes some usability problems.

All the details and screen shots have been shared in a public Gist, here:

  https://gist.github.com/bseib/be0718842f4c7b31074300f7368e3694


UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.108 Safari/537.36



 

Comment 1 by broc.s...@gmail.com, Mar 29 2016

The key arguments against an always-centered subject are:

1) There's no fixed point of reference when resizing width
     - you can't see subtle dom changes clearly

2) The "dead space" around the centered subject disrupts our window placement and can force unnecessary navigation among windows.

There are three other items of feedback in the writeup that probably deserve separate issues to be filed.
centered-device-mode-2.PNG
446 KB View Download
Components: Platform>DevTools>Mobile
Owner: dgozman@chromium.org
Status: Assigned (was: Unconfirmed)
Cc: dgozman@chromium.org
 Issue 599337  has been merged into this issue.
Cc: -dgozman@chromium.org maxwalker@chromium.org jonathan.garbee@chromium.org
Components: Platform>DevTools
Labels: -OS-Windows OS-All
This also loops back into  issue 582815 .

I think that with mobile device art landing, centered makes sense for that. You have space to see how things should look on a device as a whole. But, responsive mode does introduce its own issues with the dynamic sizing as pointed out in this thread.

Could the middle-ground here be, left-align responsive mode so it reflows better but with *devices* being specifically selected do a center-align for device art to look better?

CCing in Max on the UX aspect here.This also loops back into  issue 582815 .

Comment 5 by broc.s...@gmail.com, Mar 31 2016

re #c4: 

Rather than left-align for responsive, probably better to have just "one mode" with all the features and behaviors available. That is, regardless of which device you pick from the drop-down, you are offered the same buttons, resize bars, etc.

I would go for a separate preference setting to do align-left. As Paul B suggested elsewhere (https://bugs.chromium.org/p/chromium/issues/detail?id=582815#c7), just bury that option in the three-dot menu. That checkbox also becomes a measurable metric in terms of determining how developers are actually using it.

In general, I see this as a responsive-design tool, and the mobile "presets" are incidental. They conveniently move my responsive design tool into the dimensions of a mobile device. That's how I would frame my design perspective on this topic.

FYI, I filed a new, related issue where you can't hover over a DOM element to see its CSS :hover style: https://bugs.chromium.org/p/chromium/issues/detail?id=600180

I mention it here, to make sure it is part of this broader usability conversation. It relates to the larger issue at hand: I'm expecting Device Mode to let me target desktop apps as well as mobile apps, whereas the new Device MOde (v49) is really just presenting everything as "mobile device", or "touchscreen device" and leaving out "desktop" devices.

Cc: dgozman@chromium.org pfeldman@chromium.org
 Issue 598818  has been merged into this issue.
Mergedinto: 632893
Status: Duplicate (was: Assigned)

Sign in to add a comment