New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 608968 link

Starred by 5 users

Issue metadata

Status: Fixed
Owner:
Not on Chrome
Closed: Aug 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug

Blocking:
issue 425625



Sign in to add a comment

[MD History] Add responsive layout to hide side bar on thin screens

Project Member Reported by tsergeant@chromium.org, May 4 2016

Issue description

The side bar should disappear when the screen is sufficiently thin, with a button in the toolbar to show the sidebar in a drawer. See specs: https://goto.google.com/thxej
 
Owner: tsergeant@chromium.org
Status: Started (was: Available)
Progress update on this:

I looked into using paper-drawer-panel, but it requires fairly substantial changes to how to main page is structured, plus lots of duplicated CSS (and it's a little hacky on top of that). Settings already does this: https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/resources/settings/settings_ui/settings_ui.html&sq=package:chromium&type=cs

An alternative is to use app-drawer (https://github.com/PolymerElements/app-layout/tree/master/app-drawer), which allows us to create a standalone drawer on top of the page and open/shut it as we please. This would require us to stamp an extra <history-side-bar> element, but that's not particularly expensive.

app-drawer is in the middle of graduating from beta, so I'll wait a week or so for it to stabilize then pull it in to the repo and try that solution.
Blocking: 425625
Cc: bettes@chromium.org tbuck...@chromium.org
 Issue 620027  has been merged into this issue.
 Issue 620159  has been merged into this issue.
Project Member

Comment 5 by bugdroid1@chromium.org, Jun 30 2016

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

commit 105cabbb6d80245ba69e9097013594a03069f8cc
Author: tsergeant <tsergeant@chromium.org>
Date: Thu Jun 30 06:15:10 2016

MD History: Hide sidebar behind toolbar menu button

This hides the sidebar and displays a menu button in the toolbar which
opens it in an overlay drawer on the left side of the screen. Also
updates the sidebar menu to have better tab focusing behavior.

This causes the search field in the toolbar to appear slightly
off-center, this will be fixed in a follow-up patch.

BUG= 608968 , 620030 
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

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

[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/app.js
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/compiled_resources2.gyp
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/history_toolbar.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/shared_style.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/side_bar.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/md_history/side_bar.js
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/settings/icons.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/chrome/browser/resources/settings/settings_ui/settings_ui.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
[modify] https://crrev.com/105cabbb6d80245ba69e9097013594a03069f8cc/ui/webui/resources/cr_elements/icons.html

Project Member

Comment 6 by bugdroid1@chromium.org, Jul 29 2016

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

commit 5844d81e3382eaabda8f366eafb424050a47ec52
Author: tsergeant <tsergeant@chromium.org>
Date: Fri Jul 29 03:56:09 2016

MD History: Show sidebar next to content on wide screens

This ensures that the sidebar is always visible when the screen has
enough space, and hides it within a drawer otherwise. To achieve this,
we split <history-side-bar> apart so that it is no longer responsible
for the drawer. We also add extra capabilities to <cr-toolbar> to
support hiding the menu button and adjusting the margins.

These changes break the focus trapping inside the drawer (which already
didn't work in certain situations). This will be addressed in a follow-up.

BUG= 608968 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

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

[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/app.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/history.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/history_toolbar.html
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/history_toolbar.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/side_bar.html
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/browser/resources/md_history/side_bar.js
[add] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/test/data/webui/md_history/history_drawer_test.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/test/data/webui/md_history/history_grouped_list_test.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/test/data/webui/md_history/history_routing_test.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/test/data/webui/md_history/history_synced_tabs_test.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/chrome/test/data/webui/md_history/md_history_browsertest.js
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
[modify] https://crrev.com/5844d81e3382eaabda8f366eafb424050a47ec52/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js

Project Member

Comment 7 by bugdroid1@chromium.org, Aug 2 2016

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

commit 53f4e592b19399e8cb1d3792b5b7a441650b1b16
Author: tsergeant <tsergeant@chromium.org>
Date: Tue Aug 02 02:38:04 2016

MD History: Remove focus highlight from sidebar, add back ripples

Per feedback from UI, this removes the grey focus highlight from the
sidebar menu items. When the user explicitly uses tab to navigate the
menu, the default focus outline will still appear. Also adds back in
<paper-ripple>s on the menu items.

BUG= 608968 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

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

[modify] https://crrev.com/53f4e592b19399e8cb1d3792b5b7a441650b1b16/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/53f4e592b19399e8cb1d3792b5b7a441650b1b16/chrome/browser/resources/md_history/app.js
[modify] https://crrev.com/53f4e592b19399e8cb1d3792b5b7a441650b1b16/chrome/browser/resources/md_history/side_bar.html
[modify] https://crrev.com/53f4e592b19399e8cb1d3792b5b7a441650b1b16/chrome/browser/resources/md_history/side_bar.js

Status: Fixed (was: Started)

Sign in to add a comment