fix(list): fix overflow for ng-click and fix firefox click issues

* restores a firefox fix and made it compatible with the other list fixes.
*  fixes the text overflow for multiline items with ng-click.

Fixes #7490. Fixes #7499. Closes #7503

src/components/list/list.js

@@ -138,9 +138,9 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         } else {
           // Element which holds the default list-item content.
           container = angular.element(
-            '<button class="md-button _md-no-style">'+
+            '<div class="md-button _md-no-style">'+
             '   <div class="_md-list-item-inner"></div>'+
-            '</button>'
+            '</div>'
           );
 
           // Button which shows ripple and executes primary action.

src/components/list/list.scss

@@ -132,14 +132,21 @@ md-list-item {
   &._md-button-wrap {
     position: relative;
 
-    > .md-button:first-child {
+    > div.md-button:first-child {
+      // Vertically align the item content.
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
       padding: 0;
       margin: 0;
+
       font-weight: 400;
       background-color: inherit;
       @include rtl(text-align, left, right);
       border: medium none;
 
+      // The button executor should fill the whole list item.
       > .md-button:first-child {
         position: absolute;
         top: 0;
@@ -151,8 +158,8 @@ md-list-item {
       }
 
       ._md-list-item-inner {
-        width: 100%;
-        height: 100%;
+        // The list item content should fill the complete width.
+        flex: 1 1 auto;
         padding: 0 16px;
       }
 
@@ -327,7 +334,7 @@ md-list-item {
         flex: 1;
         margin: auto;
         text-overflow: ellipsis;
-    overflow: hidden;
+        overflow: hidden;
 
         &.md-offset {
         @include rtl-prop(margin-left, margin-right, $list-item-primary-width);

src/components/list/list.spec.js

@@ -165,7 +165,7 @@ describe('mdListItem directive', function() {
     var listItem = setup('<md-list-item ng-click="sayHello()"><p>Hello World</p><md-icon class="md-secondary" ng-click="goWild()"></md-icon></md-list-item>');
     // First child is our button and content holder
     var firstChild = listItem.children().eq(0);
-    expect(firstChild[0].nodeName).toBe('BUTTON');
+    expect(firstChild[0].nodeName).toBe('DIV');
     // It should contain two elements, the button overlay and the actual content
     expect(firstChild.children().length).toBe(2);
     var secondChild = listItem.children().eq(1);
@@ -177,7 +177,7 @@ describe('mdListItem directive', function() {
     var listItem = setup('<md-list-item ng-click="sayHello()"><p>Hello World</p><md-icon class="md-secondary" ng-click="goWild()"><md-icon class="md-secondary" ng-click="goWild2()"></md-icon></md-list-item>');
     // First child is our button and content holder
     var firstChild = listItem.children().eq(0);
-    expect(firstChild[0].nodeName).toBe('BUTTON');
+    expect(firstChild[0].nodeName).toBe('DIV');
     // It should contain two elements, the button overlay and the actual content
     expect(firstChild.children().length).toBe(2);
     var secondChild = listItem.children().eq(1);
@@ -253,8 +253,7 @@ describe('mdListItem directive', function() {
 
       // There should only be 1 md-button (the wrapper) and one button (the unwrapped one)
       expect(listItem.find('md-button').length).toBe(1);
-      // There will be two buttons, because of the button.md-no-style.md-button wrapper.
-      expect(listItem.find('button').length).toBe(2);
+      expect(listItem.find('button').length).toBe(1);
 
       // Check that we didn't wrap the button in an md-button
       expect(listItem[0].querySelector('md-button button.md-secondary')).toBeFalsy();