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

Issue 638377 link

Starred by 1 user

Issue metadata

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



Sign in to add a comment

MD Settings: Consistent scrolling list behavior

Project Member Reported by steve...@chromium.org, Aug 16 2016

Issue description

Settings needs the following behaviors consistent across embedded scrolling lists of items (e.g. networks, search engines, certificates, site settings, bluetooth, languages and input methods):

* The scrolling list should show hide a header / footer line similar to paper-dialog-scrollable: https://elements.polymer-project.org/elements/paper-dialog-scrollable?view=demo:demo/index.html&active=paper-dialog-scrollable
* Keyboard focus should navigate to and then past the scrolling list, with arrow keys navigating up/down within the list, and tab selecting any action buttons once a list item is selected (by mouse/touch or an arrow key)

 
The following pattern appears to work well (CL pending):

    <div id="container" class="scrollable layout vertical">
      <iron-list items="[[items]]" scroll-target="container">
        <template>
          <custom-item actionable item="[[item]]" on-tap="onTap_" tabindex$="[[tabIndex]]">
          </custom-item>
        </template>
      </iron-list>
    </div>

Where <custom-item> might look something like:

    <div>[[getText_(item)]]</div>
      <paper-icon-button icon="cr:menu" tabindex$="[[tabindex]]">
      </paper-icon-button>
    </div>

Note: Not all of the lists above are necessarily scrollable, so I am separating this into two parts:
a) Styling for selectable elements in an iron-list. This includes keyboard focus.
b) Scrollable list behavior.

CL for (a) is here:
https://codereview.chromium.org/2249873007/

Project Member

Comment 3 by bugdroid1@chromium.org, Aug 18 2016

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

commit fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331
Author: stevenjb <stevenjb@chromium.org>
Date: Thu Aug 18 18:35:13 2016

Settings: Introduce selectable styling and apply to search engines

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

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

[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/chrome/test/data/webui/settings/search_engines_page_test.js
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/ui/webui/resources/cr_elements/shared_style_css.html
[modify] https://crrev.com/fd2573b67e03eb3cc60ba6b5dbfadf77a08bd331/ui/webui/resources/cr_elements/shared_vars_css.html

Project Member

Comment 4 by bugdroid1@chromium.org, Aug 19 2016

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

commit feeb114ee91d6bb97f162f2c05f66f6d3ef84c15
Author: stevenjb <stevenjb@chromium.org>
Date: Fri Aug 19 02:15:21 2016

MD Settings: Introduce CrScrollableBehavior

This CL:
* Defines a pattern for using <iron-list> for scrollable lists to get
  correct keyboard focus behavior.
* Introduces styling for scrolling containers.
* Introduces CrScrollableBehavior to set styling and update <iron-list>
* Converts startup-urls-page to use CrScrollableBehavior and <iron-list>

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

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

[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/chrome/browser/resources/settings/settings_vars_css.html
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/ui/webui/resources/cr_elements/compiled_resources2.gyp
[add] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/ui/webui/resources/cr_elements/cr_scrollable_behavior.html
[add] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/ui/webui/resources/cr_elements/cr_scrollable_behavior.js
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/ui/webui/resources/cr_elements/shared_style_css.html
[modify] https://crrev.com/feeb114ee91d6bb97f162f2c05f66f6d3ef84c15/ui/webui/resources/cr_elements_resources.grdp

Status: Fixed (was: Started)
Labels: VerifyIn-54

Comment 7 by dchan@chromium.org, Oct 7 2016

Labels: VerifyIn-55
Status: Verified (was: Fixed)

Sign in to add a comment