1203281 - popup menu on contact sometimes mostly cropped at top or bottom of contact list

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P1)

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

Moving the boundingClientRect calculations to happen on the contactListWrapper may be the trick here, since it's the thing that is overflowing.

If that fails, it may be worth falling back to whatever the room list does, which doesn't crop the menu at all.

Comment 2

[Mark Banner (:standard8)]

Having looked at some of this today, I would highly suggest seeing if we could redo this with DropdownMenuMixin. That's what's used for the rooms list and in other places, and it already has some more complicated code for calculations.

It would also likely prevent the errors I'm seeing in the showcase and tests which I'm having to work around for bug 1203098.

Dave - could you base your patches off the one in there that I'll post in a bit - I'm hoping its not too far off landing.

Comment 3

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1203281 - popup menu on contact sometimes mostly cropped at top or bottom of contact list

Fix crop on popup menu in contact list for Loop

Comment 4

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8661951 [details] [diff] [review]
Attachment to Bug 1203281 - popup menu on contact sometimes mostly cropped at top or bottom of contact list

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

Please run all the tests using the run-all-loop-tests scripts and fix any issues.

In general, looks great.  Some comments inline.

::: browser/components/loop/content/css/contacts.css
@@ +333,5 @@
>    width: 4px;
>    height: 20px;
>    background-image: url("../shared/img/ellipsis-v.svg");
>    background-size: contain;
>  }

Please leave the blank line for readability.

::: browser/components/loop/content/js/contacts.jsx
@@ +158,5 @@
>        blocked: React.PropTypes.bool,
>        canEdit: React.PropTypes.bool,
> +      eventPosY: React.PropTypes.number.isRequired,
> +      handleAction: React.PropTypes.func.isRequired,
> +      getContainerCoordinates: React.PropTypes.func.isRequired

Please add comments for the props you added.

@@ +187,5 @@
> +        // Position below click area.
> +        menuNode.style.top = this.props.eventPosY + offset + "px";
> +      }
> +    },
> +

I would expect that we'll need some automated test changes; though you may be able to draw from the panel ones for inspiration.

@@ +327,3 @@
>        return (
> +        <li className={contactCSSClass}
> +            onMouseLeave={this._handleMouseOut}>

There are dragons on testing this, onMouseLeave testing has some issues until React 0.14: https://github.com/facebook/react/issues/1297

@@ +346,5 @@
>              ? <ContactDropdown blocked={this.props.contact.blocked}
>                                 canEdit={this.canEdit()}
> +                               eventPosY={this.state.eventPosY}
> +                               handleAction={this.handleAction}
> +                               ref="menu"

This can be deleted, I bet.

Comment 5

[David Critchley (:dcritch)]

Attachment: Attachment to Bug 1203281 - popup menu on contact sometimes mostly cropped at top or bottom of contact list

Fix crop on popup menu in contact list for Loop

Comment 6

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8662602 [details] [diff] [review]
Attachment to Bug 1203281 - popup menu on contact sometimes mostly cropped at top or bottom of contact list

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

Looks good, with one nit, which I'll fix.  r=dmose, assuming the tests pass.

::: browser/components/loop/content/js/contacts.jsx
@@ +194,3 @@
>      render: function() {
>        var cx = React.addons.classSet;
> +      var dropdownClasses = React.addons.classSet({

You can just use cx here, since it's been declared above.  I'll tweak this before landing.

Comment 7

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/a0bc22813c0e

Comment 8

[Dan Mosedale (:dmosedale, :dmose)]

Attachment: Fix crop on popup menu in contact list for Loop

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a0bc22813c0e