800996 - Work - Implement Context App Bar buttons

Status: RESOLVED FIXED

(Firefox for Metro Graveyard :: Firefox Start, defect)

Comment 1

[Matt Brubeck (:mbrubeck)]

I think we'll want this for functionality on start screen tiles, like pinning/removing/editing items from the various start screen grids.  The same applies to other "tile" UI like the download manager.

It should work like a standard Metro tile view (for example, the Windows start screen):

* A short vertical swipe or a right-click selects or de-selects a tile.
* Selected tiles are visually highlighted with a border and a check icon.
* While any tile(s) are selected, the appbar appears, offering contextual actions for the selected items.

Comment 2

[Asa Dotzler [:asa]]

The context app bar is an app bar that's used to manage selected or otherwise active content. This group of stories covers the primary use cases for the context app bar which are not covered in other feature specific stories.

Comment 3

[Sam Foster [:sfoster] (he/him)]

I've removed most of the depends and blocks; in practice we want to land this independent of the various awesome screen behaviors that will use it. Provided those publish/notify and listen for the right events they can be worked without this, with just a final integration ticket needed to verify the user interaction

Comment 4

[Sam Foster [:sfoster] (he/him)]

Making this a work item rather than an epic - as it is a feature that is a part of a several other stories, rather than the other way around. 

The tile selection behavior is specified elsewhere (#831915). 

Will need UX eventually for button icons and tray design/behavior

Comment 5

[Sam Foster [:sfoster] (he/him)]

Some of this landed in https://hg.mozilla.org/projects/elm/rev/35e219b514cc, as a part of #834190. The buttons and container are temporarily hidden in browser.xul to avoid confusion (as they don't yet do anything). Also, because of this ticket. 

We need icons/button treatment for several contextual actions, such as:  

* pin the selected tile(s) at their current position in the grid (e.g. top sites)
* unpin the selected tile(s) (e.g. top-sites)
* block (effectively remove/delete) the selected tile(s) (e.g. top-sites)
* remove the selected tile(s) (e.g. bookmark, history)

These have their own user stories, for this work we need a general button treament, any behavior and animation when we show/hidden buttons, and what should happen when there are no matching contextual actions for the current selection.

Comment 6

[Sam Foster [:sfoster] (he/him)]

There are new icons on https://bugzilla.mozilla.org/show_bug.cgi?id=836387, which include new unpin states, a clear selection icon and restore icon. 

Also, talked with Shorlander about transitions. The windows start screen fades in/out the icons as you select different tiles. We'll shoot to emulate that.

Comment 7

[Sam Foster [:sfoster] (he/him)]

Attachment: Clear selection, button transitions and refactored context-actions handling

* Update contextual action images with new states
* Add clear-selection action when > 1 tiles are selected
* Moved context-actions event handler out of TopSites and into richgrid binding, controller.doActionOnSelectedTiles is called where it exists
* Added first-pass at show/hide transitions for the icons as selections change, emulating Windows start screen behavior

Comment 8

[Matt Brubeck (:mbrubeck)]

Comment on attachment 734672 [details] [diff] [review]
Clear selection, button transitions and refactored context-actions handling

Review of attachment 734672 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/metro/base/content/Util.js
@@ +138,5 @@
> +    // accept single node or a collection of nodes
> +    aNodes = aNodes.length ? aNodes : [aNodes];
> +    let defd = Promise.defer();
> +    let pending = 0;
> +    Array.forEach(aNodes, function(aNode){

nit: add a space before '{'

@@ +155,5 @@
> +        if (!pending){
> +          defd.resolve(true);
> +        }
> +      }, false);
> +      pending++;

I was going to suggest using join() here instead of a counter, but it looks like our promise implementation doesn't implement join. :(

Comment 9

[Sam Foster [:sfoster] (he/him)]

Landed on inbound: https://hg.mozilla.org/integration/mozilla-inbound/rev/56ceb60c5d0b

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/56ceb60c5d0b