Problem/Motivation

With the initial commit #1137920-330: Fix toolbar on small screen sizes and redesign toolbar for desktop, we set the Drupal toolbar on the road to evolve from a static list of links to an application control bar that flexes to accomodate any screen size. That initial commit laid groundwork for several enabling improvements such as the introduction of hook_toolbar and lightweight orientation controls that allow a user to position the toolbar commands on the screen according to their current task's needs.

We made the initial commit with the knowledge that the toolbar will require improvements to several of its sub-systems. We will also need to address how the toolbar interacts with other Drupal core modules such as Overlay.

Please see the issue tracking sheet for specific details on followup issues: https://docs.google.com/spreadsheet/ccc?key=0AovT8xUUBWqOdGJtejlBTXNwczU...

Proposed resolution

(description of the proposed solution, the rationale behind it, and workarounds for people who cannot use the patch)

Feature Complete tasks

Improving developer experience

#1847198: Update the structure returned by hook_toolbar()
#1894964: Make the Toolbar PHP and JavaScript API more flexible so that it enables contrib to leverage it
#1860434: Refactor the Toolbar JavaScript to use Backbone; fix several poorly functioning behaviors
#1907688: Toolbar assets should be loaded before the assets of other modules
#1939884: Make the administration menu in the toolbar plugabble: don't hardcode to the 'admin' menu

Responsive Overlay behavior and its interaction with Toolbar

#1847084: Measure/track displacing elements better + provide change events for them (fix overlay + toolbar)
#787940: Generic approach for position:fixed elements like Toolbar, tableHeader

Improving user experience

#1812016: Does usability testing show any value of going more than 2 deep?
#1847574: Toolbar sets the active-trail to the last clicked menu item, not the current menu item.
#1852346: [discussion, no patch] Toolbar UI regression: shortcuts and menu not visible at same time
#1853324: Missing link descriptions in responsive toolbar.
#1854948: Default toolbar orientation overrides user choice when changing window size
#1855066: In the "menu" toolbar tray, clicking/tapping white space should show the child level
#1855884: Default toolbar breakpoints need adjustment.
#1927174: Complete the work to make the Toolbar administration menu sub tree rendering more efficient
#1800614: Improve the responsive toolbar accessibility

Code and Performance

#1805054: Cache localized, access filtered, URL resolved, and rendered menu trees
#2217985: Replace the custom menu caching strategy in Toolbar with Core's standard caching.
#1847792: Improve toolbar's front-end performance
#1849078: Replace many toolbar icon files with a single CSS sprite image
#1963886: Use HiDPI icons in the toolbar
#1927174: Complete the work to make the Toolbar administration menu sub tree rendering more efficient
#1855088: Make comment in toolbar.js match the code
#2135445: Toolbar displays Manage tab even if the user is not permitted to see it
#2314959: Optimize SVGs (Libricons)

Bugs

#1848552: Toolbar icons disappear with translated menu
#1849102: Scrolling tray content with toolbar
#1852962: Empty trays still render
#1854914: Toolbar .install and .info files should agree on dependencies.
#1855000: Missing "expand" icons in toolbar tray when resizing window
#1858576: The $toolbar variable in toolbar.js is set to an empty jQuery object after an AJAX request
#1877154: Users without the 'access toolbar' permission still see the toolbar
#1908906: Remove unused code from toolbar_pre_render_item that throws a warning on custom themed tabs
#1917816: Toolbar tabs RTL styling is not applied
#1924112: Make sure tour toolbar button has :focus styling when tabbed to.
#1939642: Reset .menu margin from system.css in toolbar.base.css. Currently, toolbar relies on Bartik style.css to do this.
#1938448: Empty toolbar sub-menu looks funny; Don't render empty trays

Test coverage

#1839514: Expand test coverage for Toolbar module: test a top-level tab without a tray

Feature Extension tasks

Responsive Overlay behavior and its interaction with Toolbar

#1829326: Convert Overlay to leverage core breakpoints and media queries to determine its presence and styling

Improving user experience

#1781422: Add search/jump/command functionality to toolbar
#1811998: Decide which local tasks to add to the toolbar menu tray — mimick D7 admin_menu?
#1847256: Optimize the size of toolbar components for small screens and desktops
#1847274: Introduce dropdown menus to menus when the tray is in a horizontal orientation
#1855208: Toolbar tray needs to fix to top of screen on scroll.
#1858728: Toolbar toggle button to be Configurable & Intelligent
#1863824: Use the temp store to remember the last state of the toolbar per user and reload it
#1869638: Make the menu shown in the administration menu tray configurable

Improving user experience - Needs Style Review

#1847304: Visually differentiate toolbar top level tab links for tabs that open a tray
#1848432: Visually Differentiate the second level of the toolbar more clearly from the content region
#1849086: Styling changes to toolbar ICONS
#1852348: Toggle to change orientation of toolbar is not easily discoverable

Code and Performance

#1847114: Use localStorage event to propagate toolbar state across tabs
#1847314: Reduce the dependency on JavaScript for the toolbar to display properly
#1849082: Implement the data URI converter for CSS images

Bugs

#1849764: "Access Denied" for localstorage in ALL IEs
#1854980: Toolbar tray shows stray border at narrow widths

User interface changes

To be determined.

API changes

To be determined. See #1847198: Update the structure returned by hook_toolbar().

Comments

jessebeach’s picture

Issue summary: View changes

filing out the issue summary.

nod_’s picture

nod_’s picture

Issue summary: View changes

shuffled issues under headings.

jessebeach’s picture

Issue summary: View changes

added 1847116

jessebeach’s picture

Issue summary: View changes

added 1847198

jessebeach’s picture

Issue summary: View changes

added #1847114

jessebeach’s picture

jessebeach’s picture

Issue summary: View changes

added 1847274

jessebeach’s picture

Issue tags: +toolbar, +toolbar-followup
jessebeach’s picture

Issue summary: View changes

added 1847304

sun’s picture

Title: [Project] Responsive toolbar module. Feature followups. » [meta] Responsive Toolbar follow-ups
Issue tags: -toolbar

1) Slightly adjusting issue title.

2) Removing "toolbar" tag. The toolbar.module component should be sufficient.

3) It's actually not exactly clear to me which of the listed issues in the summary would or will address my feedback from the original issue... I'm feeling a little bit lost in "issueitis" - any help? :-)

jessebeach’s picture

Surely, can do.

The toolbar is too large and consumes too much vertical height on desktop (in horizontal orientation; with and without opened tray).

#1847256: Optimize the size of toolbar components for small screens and desktops

I do not understand why the vertical orientation gets the benefit of sub-menu-trees but the horizontal orientation does not. This means I still have to install and use admin_menu for no good reason.

#1847274: Introduce dropdown menus to menus when the tray is in a horizontal orientation

I find it very confusing that clicking some of the tabs immediately issues a request to another page, whereas some other tabs do not and only open a tray.

#1847304: Visually differentiate toolbar top level tab links for tabs that open a tray

The structure and API of hook_toolbar() is not very optimal and cannot really be re-used by other modules (such as admin or admin_menu).

and

I do not understand why the top-level tabs can only be links and not something else; e.g., more sophisticated widgets; this artificially limits possibilities.

#1847198: Update the structure returned by hook_toolbar()

Most of (or even the entire?) toolbar's functionality depends on JavaScript, whereas large parts of it should be able to work without JS and pure CSS only.

#1847314: Reduce the dependency on JavaScript for the toolbar to display properly

jessebeach’s picture

Issue summary: View changes

added 1847314

Shyamala’s picture

Issue summary: View changes

Added issue # 1847792, Performance tests for new toolbar

eigentor’s picture

Issue summary: View changes

Added another issue to UX Issues

eigentor’s picture

Issue summary: View changes

out again with the issue

eigentor’s picture

Issue summary: View changes

Re-added UX issue to the list to reflect its changed title

eigentor’s picture

Issue summary: View changes

Accidentally moved Issue to wrong location. Corrected.

Shyamala’s picture

Issue summary: View changes

Added issue to Localize module issue

Shyamala’s picture

Issue summary: View changes

edited order

Shyamala’s picture

Issue summary: View changes

adding issue Toolbar sets the active-trail to the last clicked menu item, not the current menu item.

jessebeach’s picture

Shyamala’s picture

Issue summary: View changes

Added issues: css sprites, data uri, style changes to ICONS

Shyamala’s picture

Issue summary: View changes

adding Scrolling tray content with toolbar

jessebeach’s picture

Issue summary: View changes

change "other" to "bugs"

jhodgdon’s picture

I just saw the new toolbar for the first time today and added two new issues that don't seem to be in the list above (I'll add them to the summary):
#1852346: [discussion, no patch] Toolbar UI regression: shortcuts and menu not visible at same time
#1852348: Toggle to change orientation of toolbar is not easily discoverable

jhodgdon’s picture

Issue summary: View changes

added 1849764

jhodgdon’s picture

Issue summary: View changes

added two new issues

jessebeach’s picture

Issue summary: View changes

added 1852962

moshe weitzman’s picture

I created #1853324: Missing link descriptions in responsive toolbar. and added it to Issue Summary

moshe weitzman’s picture

benjifisher’s picture

Issue summary: View changes

Add a link to #1854914.

benjifisher’s picture

Issue summary: View changes

Add a link to #1854948.

benjifisher’s picture

Issue summary: View changes

Added links to #1854980 and #1855000.

benjifisher’s picture

I opened several new issues today, and added them to the issue summary:

#1854948: Default toolbar orientation overrides user choice when changing window size
#1855066: In the "menu" toolbar tray, clicking/tapping white space should show the child level
#1855088: Make comment in toolbar.js match the code
#1854914: Toolbar .install and .info files should agree on dependencies.
#1854980: Toolbar tray shows stray border at narrow widths
#1855000: Missing "expand" icons in toolbar tray when resizing window

I have patches for the two easiest ones.

Thanks to @Shyamala for all her work on managing these issues! The handful of issues I added today did not take advanced programming skills, but it was tedious and time-consuming.

benjifisher’s picture

Issue summary: View changes

Added links to #1855066, #1855088.

mbrett5062’s picture

Opened a new issue and added to issue summary. Sorry no patch, as I have no idea how to do this, will look into it over the weekend.

#1855208: Toolbar tray needs to fix to top of screen on scroll.

cosmicdreams’s picture

After talking with tcindie today, he convinced me that it is highly beneficial to try to provide an ability to register events for when a breakpoint is triggered.

I'm probably doing the idea injustice. You should see a working example of his idea here: http://drupal.org/sandbox/tcindie/1854442

cosmicdreams’s picture

Issue summary: View changes

Added issue to fix tray at top of screen when scrolling long pages. mbrett5062

mbrett5062’s picture

Opened another issue #1855884: Default toolbar breakpoints need adjustment. and added to issue summary.

mbrett5062’s picture

Issue summary: View changes

Added issue to improve default breakpoints. mbrett5062

jessebeach’s picture

Issue summary: View changes

added 1858576

Shyamala’s picture

Issue summary: View changes

Adding Issue Toolbar toogle button to be Configurable & Intelligent to improving user experience

Shyamala’s picture

Issue summary: View changes

Regrouping Tasks as Feature Complete and Feature Extension

Shyamala’s picture

Regrouped Toolbar follow-ups into "Feature Complete tasks" and "Feature Extension tasks" to help us prioritize and move towards The Feature Complete stage.

jessebeach’s picture

Thank you Shyamala! Last night she and I went through the list of tasks and flagged the "absolutely must be addressed" issues under the Feature complete header. The rest of the tasks fall into a nice to have bucket. I think it would be amazing to address all of these issues and I'm not opposed to that. But given realities of time and resources, there are a few of them that are more equal than the others. We should focus our energies on the feature complete issues first.

If you feel we miscategorized an issue, be vocal.

jessebeach’s picture

Issue summary: View changes

added 1860434

Shyamala’s picture

Issue summary: View changes

added 1863824

benjifisher’s picture

Issue summary: View changes

Add a link to #1869638.

YesCT’s picture

I dont know exactly what category this would fall in, but I think #1849712: Add theming template and prepare logic for rendering icons is related.

YesCT’s picture

#1891096: Users don't understand the "Plug" toolbar icon (which points to the modules page) is wondering where the original issue is that added the icons, so it can see the discussion that occurred around choosing the plug for extend.

YesCT’s picture

Issue summary: View changes

added #1877154

jessebeach’s picture

Issue summary: View changes

added #1894964

jessebeach’s picture

Issue summary: View changes

added #1907688

jessebeach’s picture

Issue summary: View changes

added #1908906

jessebeach’s picture

Issue summary: View changes

added #1917816

jessebeach’s picture

Issue summary: View changes

added #1924112

jessebeach’s picture

Issue summary: View changes

added 1927174

jessebeach’s picture

Issue summary: View changes

added 1939642 and 1939884

Shyamala’s picture

Issue summary: View changes

Identified issues that need style review

Iztok’s picture

I started working #1849086: Styling changes to toolbar ICONS and I would love to get some feedback on the proposed icon/toolbar design.

Iztok’s picture

jessebeach’s picture

Issue summary: View changes

added 1800614

jessebeach’s picture

Issue summary: View changes

added 1963886

jessebeach’s picture

Issue summary: View changes

added 1927174

jessebeach’s picture

Issue summary: View changes
jessebeach’s picture

Issue summary: View changes
Jeff Burnz’s picture

jessebeach’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes

Added 2314959

andrewmacpherson’s picture

Version: 8.0.x-dev » 8.1.x-dev

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

nod_’s picture

Status: Active » Fixed

So i'm going ahead and say that the entire toolbar queue is the follow-up these days.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.