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
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
Comment #0.0
jessebeach CreditAttribution: jessebeach commentedfiling out the issue summary.
Comment #1
nod_#1847114: Use localStorage event to propagate toolbar state across tabs
Comment #1.0
nod_shuffled issues under headings.
Comment #1.1
jessebeach CreditAttribution: jessebeach commentedadded 1847116
Comment #1.2
jessebeach CreditAttribution: jessebeach commentedadded 1847198
Comment #1.3
jessebeach CreditAttribution: jessebeach commentedadded #1847114
Comment #1.4
jessebeach CreditAttribution: jessebeach commentedadded #1847256: Optimize the size of toolbar components for small screens and desktops
Comment #1.5
jessebeach CreditAttribution: jessebeach commentedadded 1847274
Comment #2
jessebeach CreditAttribution: jessebeach commentedComment #2.0
jessebeach CreditAttribution: jessebeach commentedadded 1847304
Comment #3
sun1) 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? :-)
Comment #4
jessebeach CreditAttribution: jessebeach commentedSurely, can do.
#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
#1847304: Visually differentiate toolbar top level tab links for tabs that open a tray
and
#1847198: Update the structure returned by hook_toolbar()
#1847314: Reduce the dependency on JavaScript for the toolbar to display properly
Comment #4.0
jessebeach CreditAttribution: jessebeach commentedadded 1847314
Comment #4.1
Shyamala CreditAttribution: Shyamala commentedAdded issue # 1847792, Performance tests for new toolbar
Comment #4.2
eigentor CreditAttribution: eigentor commentedAdded another issue to UX Issues
Comment #4.3
eigentor CreditAttribution: eigentor commentedout again with the issue
Comment #4.4
eigentor CreditAttribution: eigentor commentedRe-added UX issue to the list to reflect its changed title
Comment #4.5
eigentor CreditAttribution: eigentor commentedAccidentally moved Issue to wrong location. Corrected.
Comment #4.6
Shyamala CreditAttribution: Shyamala commentedAdded issue to Localize module issue
Comment #4.7
Shyamala CreditAttribution: Shyamala commentededited order
Comment #4.8
Shyamala CreditAttribution: Shyamala commentedadding issue Toolbar sets the active-trail to the last clicked menu item, not the current menu item.
Comment #4.9
jessebeach CreditAttribution: jessebeach commentedadded https://docs.google.com/spreadsheet/ccc?key=0AovT8xUUBWqOdGJtejlBTXNwczU...
Comment #4.10
Shyamala CreditAttribution: Shyamala commentedAdded issues: css sprites, data uri, style changes to ICONS
Comment #4.11
Shyamala CreditAttribution: Shyamala commentedadding Scrolling tray content with toolbar
Comment #4.12
jessebeach CreditAttribution: jessebeach commentedchange "other" to "bugs"
Comment #5
jhodgdonI 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
Comment #5.0
jhodgdonadded 1849764
Comment #5.1
jhodgdonadded two new issues
Comment #5.2
jessebeach CreditAttribution: jessebeach commentedadded 1852962
Comment #6
moshe weitzman CreditAttribution: moshe weitzman commentedI created #1853324: Missing link descriptions in responsive toolbar. and added it to Issue Summary
Comment #6.0
moshe weitzman CreditAttribution: moshe weitzman commentedAdded #1853324: Missing link descriptions in responsive toolbar. to UI section
Comment #6.1
benjifisherAdd a link to #1854914.
Comment #6.2
benjifisherAdd a link to #1854948.
Comment #6.3
benjifisherAdded links to #1854980 and #1855000.
Comment #7
benjifisherI 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.
Comment #7.0
benjifisherAdded links to #1855066, #1855088.
Comment #8
mbrett5062 CreditAttribution: mbrett5062 commentedOpened 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.
Comment #9
cosmicdreams CreditAttribution: cosmicdreams commentedAfter 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
Comment #9.0
cosmicdreams CreditAttribution: cosmicdreams commentedAdded issue to fix tray at top of screen when scrolling long pages. mbrett5062
Comment #10
mbrett5062 CreditAttribution: mbrett5062 commentedOpened another issue #1855884: Default toolbar breakpoints need adjustment. and added to issue summary.
Comment #10.0
mbrett5062 CreditAttribution: mbrett5062 commentedAdded issue to improve default breakpoints. mbrett5062
Comment #10.1
jessebeach CreditAttribution: jessebeach commentedadded 1858576
Comment #10.2
Shyamala CreditAttribution: Shyamala commentedAdding Issue Toolbar toogle button to be Configurable & Intelligent to improving user experience
Comment #10.3
Shyamala CreditAttribution: Shyamala commentedRegrouping Tasks as Feature Complete and Feature Extension
Comment #11
Shyamala CreditAttribution: Shyamala commentedRegrouped Toolbar follow-ups into "Feature Complete tasks" and "Feature Extension tasks" to help us prioritize and move towards The Feature Complete stage.
Comment #12
jessebeach CreditAttribution: jessebeach commentedThank 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.
Comment #12.0
jessebeach CreditAttribution: jessebeach commentedadded 1860434
Comment #12.1
Shyamala CreditAttribution: Shyamala commentedadded 1863824
Comment #12.2
benjifisherAdd a link to #1869638.
Comment #13
YesCT CreditAttribution: YesCT commentedI dont know exactly what category this would fall in, but I think #1849712: Add theming template and prepare logic for rendering icons is related.
Comment #14
YesCT CreditAttribution: YesCT commented#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.
Comment #14.0
YesCT CreditAttribution: YesCT commentedadded #1877154
Comment #14.1
jessebeach CreditAttribution: jessebeach commentedadded #1894964
Comment #14.2
jessebeach CreditAttribution: jessebeach commentedadded #1907688
Comment #14.3
jessebeach CreditAttribution: jessebeach commentedadded #1908906
Comment #14.4
jessebeach CreditAttribution: jessebeach commentedadded #1917816
Comment #14.5
jessebeach CreditAttribution: jessebeach commentedadded #1924112
Comment #14.6
jessebeach CreditAttribution: jessebeach commentedadded 1927174
Comment #14.7
jessebeach CreditAttribution: jessebeach commentedadded 1939642 and 1939884
Comment #14.8
Shyamala CreditAttribution: Shyamala commentedIdentified issues that need style review
Comment #15
Iztok CreditAttribution: Iztok commentedI started working #1849086: Styling changes to toolbar ICONS and I would love to get some feedback on the proposed icon/toolbar design.
Comment #15.0
Iztok CreditAttribution: Iztok commentedRemoved #1847116: Provide users with an easy-to-access action to create content from the toolbar
Comment #15.1
jessebeach CreditAttribution: jessebeach commentedadded 1800614
Comment #15.2
jessebeach CreditAttribution: jessebeach commentedadded 1963886
Comment #15.3
jessebeach CreditAttribution: jessebeach commentedadded 1927174
Comment #16
jessebeach CreditAttribution: jessebeach commentedComment #17
jessebeach CreditAttribution: jessebeach commentedComment #18
Jeff Burnz CreditAttribution: Jeff Burnz commented#2149783: Toolbar CSS styles are too weak; common theme styles unintentionally distort it
Comment #19
jessebeach CreditAttribution: jessebeach commentedComment #20
jwilson3Added 2314959
Comment #21
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #31
nod_So i'm going ahead and say that the entire toolbar queue is the follow-up these days.