Change gr-styled-table to be css template

Previously, gr-styled-table was include in the list view only, which
handled styling the content passed to the list view (which were always
tables of varying content).

Because Polymer2 does not allow for reaching into <slot> to style
content as was done before, the styles have to be imported to the
element that originally creates the content.

Change-Id: I7136f8ccbea00e532d2a8e1a63f6874eb418906e

polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list.html

@@ -18,6 +18,7 @@ limitations under the License.
 
 <link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
 <link rel="import" href="../../../bower_components/iron-input/iron-input.html">
+<link rel="import" href="../../../styles/gr-table-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
 <link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
@@ -28,6 +29,7 @@ limitations under the License.
 <dom-module id="gr-admin-group-list">
   <template>
     <style include="shared-styles"></style>
+    <style include="gr-table-styles"></style>
     <gr-list-view
         create-new="[[_createNewCapability]]"
         filter="[[_filter]]"
@@ -37,7 +39,7 @@ limitations under the License.
         offset="[[_offset]]"
         on-create-clicked="_handleCreateClicked"
         path="[[_path]]">
-      <table id="list">
+      <table id="list" class="genericList">
         <tr class="headerRow">
           <th class="name topHeader">Group Name</th>
           <th class="description topHeader">Group Description</th>

polygerrit-ui/app/elements/admin/gr-admin-plugin-list/gr-admin-plugin-list.html

@@ -13,40 +13,38 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../shared/gr-list-view/gr-styled-table.html">
-<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
-
+<link rel="import" href="../../../styles/gr-table-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
 <dom-module id="gr-admin-plugin-list">
   <template>
     <style include="shared-styles"></style>
-    <gr-styled-table>
-      <table id="list">
-        <tr class="headerRow">
-          <th class="name topHeader">Plugin Name</th>
-          <th class="version topHeader">Version</th>
-          <th class="status topHeader">Status</th>
-        </tr>
-        <tr id="loading" class$="loadingMsg [[computeLoadingClass(_loading)]]">
-          <td>Loading...</td>
-        </tr>
-        <tbody class$="[[computeLoadingClass(_loading)]]">
-          <template is="dom-repeat" items="[[_plugins]]">
-            <tr class="table">
-              <td class="name">
-                <a href$="[[_computePluginUrl(item.index_url)]]">[[item.id]]</a>
-              </td>
-              <td class="version">[[item.version]]</td>
-              <td class="status">[[_status(item)]]</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </gr-styled-table>
+    <style include="gr-table-styles"></style>
+    <table id="list" class="genericList">
+      <tr class="headerRow">
+        <th class="name topHeader">Plugin Name</th>
+        <th class="version topHeader">Version</th>
+        <th class="status topHeader">Status</th>
+      </tr>
+      <tr id="loading" class$="loadingMsg [[computeLoadingClass(_loading)]]">
+        <td>Loading...</td>
+      </tr>
+      <tbody class$="[[computeLoadingClass(_loading)]]">
+        <template is="dom-repeat" items="[[_plugins]]">
+          <tr class="table">
+            <td class="name">
+              <a href$="[[_computePluginUrl(item.index_url)]]">[[item.id]]</a>
+            </td>
+            <td class="version">[[item.version]]</td>
+            <td class="status">[[_status(item)]]</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-admin-plugin-list.js"></script>

polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list.html

@@ -17,6 +17,7 @@ limitations under the License.
 
 <link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
 <link rel="import" href="../../../bower_components/iron-input/iron-input.html">
+<link rel="import" href="../../../styles/gr-table-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
 <link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
@@ -28,6 +29,7 @@ limitations under the License.
 <dom-module id="gr-admin-project-list">
   <template>
     <style include="shared-styles"></style>
+    <style include="gr-table-styles"></style>
     <gr-list-view
         create-new=[[_createNewCapability]]
         filter="[[_filter]]"
@@ -37,7 +39,7 @@ limitations under the License.
         offset="[[_offset]]"
         on-create-clicked="_handleCreateClicked"
         path="[[_path]]">
-      <table id="list">
+      <table id="list" class="genericList">
         <tr class="headerRow">
           <th class="name topHeader">Project Name</th>
           <th class="description topHeader">Project Description</th>

polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.html

@@ -19,7 +19,6 @@ limitations under the License.
 <link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
-<link rel="import" href="gr-styled-table.html">
 
 <dom-module id="gr-list-view">
   <template>
@@ -69,9 +68,7 @@ limitations under the License.
         </gr-button>
       </div>
     </div>
-    <gr-styled-table>
-      <content></content>
-    </gr-styled-table>
+    <content></content>
     <nav>
       <a id="prevArrow"
           href$="[[_computeNavLink(offset, -1, itemsPerPage, filter)]]"

polygerrit-ui/app/styles/gr-table-styles.html

@@ -14,64 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../styles/shared-styles.html">
-
-<dom-module id="gr-styled-table">
+<dom-module id="gr-table-styles">
   <template>
-    <style include="shared-styles">
-      ::content {
-        display: flex;
-        flex-direction: column;
-      }
-      ::content .loading {
+    <style>
+      .genericList .loading {
         display: none;
       }
-      ::content #list {
+      .genericList {
         border-collapse: collapse;
         width: 100%;
       }
-      ::content #list tr.table {
+      .genericList tr.table {
         border-bottom: 1px solid #eee;
       }
-      ::content #list td {
+      .genericList td {
         flex-shrink: 0;
         padding: .3em .5em;
       }
-      ::content #list th {
+      .genericList th {
         background-color: #ddd;
         border-bottom: 1px solid #eee;
         font-weight: bold;
         padding: .3em .5em;
         text-align: left;
       }
-      ::content #list a {
+      .genericList a {
         color: var(--default-text-color);
         text-decoration: none;
       }
-      ::content #list a:hover {
+      .genericList a:hover {
         text-decoration: underline;
       }
-      ::content #list .description {
+      .genericList .description {
         width: 70%;
       }
-      ::content #list .loadingMsg {
+      .genericList .loadingMsg {
         color: #666;
         display: block;
         padding: 1em var(--default-horizontal-margin);
       }
-      ::content #list .loadingMsg:not(.loading) {
+      .genericList .loadingMsg:not(.loading) {
         display: none;
       }
     </style>
-    <content></content>
   </template>
-   <script>
-    (function() {
-      'use strict';
-      Polymer({
-        is: 'gr-styled-table',
-      });
-    })();
-  </script>
 </dom-module>