Add change-metadata-item plugin endpoint

Also update endpoints documentation.

Feature: Issue 7758
Change-Id: Id43428f1d7caeada584572d4feab65fcd1aa6227

Documentation/pg-plugin-dev.txt

@@ -42,7 +42,7 @@ Here's a recommended starter `myplugin.html`:
 
 Basically, the DOM is the API surface. Low-level API provides methods for
 decorating, replacing, and styling DOM elements exposed through a set of
-endpoints.
+link:pg-plugin-endpoints.html[endpoints].
 
 PolyGerrit provides a simple way for accessing the DOM via DOM hooks API. A DOM
 hook is a custom element that is instantiated for the plugin endpoint. In the
@@ -70,8 +70,6 @@ Gerrit.install(plugin => {
 For each endpoint, PolyGerrit provides a list of DOM properties (such as
 attributes and events) that are supported in the long-term.
 
-NOTE: TODO: Insert link to the full endpoints API.
-
 ``` js
 Gerrit.install(plugin => {
   const domHook = plugin.hook('reply-text');
@@ -159,6 +157,7 @@ Note: TODO
 === hook
 `plugin.hook(endpointName, opt_options)`
 
+See list of supported link:pg-plugin-endpoints.html[endpoints].
 Note: TODO
 
 === registerCustomComponent

Documentation/pg-plugin-endpoints.txt

@@ -0,0 +1,32 @@
+= Gerrit Code Review - PolyGerrit Plugin Styling
+
+== Plugin endpoints
+
+Plugin should be html-based and imported following PolyGerrit's
+link:pg-plugin-dev.html#loading[dev guide].
+
+Sample code for testing endpoints:
+
+``` js
+Gerrit.install(plugin => {
+  // Change endpoint below
+  const endpoint = 'change-metadata-item';
+  plugin.hook(endpoint).onAttached(element => {
+    console.log(endpoint, element);
+    const el = element.appendChild(document.createElement('div'));
+    el.textContent = 'Ah, there it is. Lovely.';
+    el.style = 'background: pink; line-height: 4em; text-align: center;';
+  });
+});
+```
+
+=== change-view-integration
+Extension point is located between `Files` and `Messages` section on the change
+view page, and it may take full page's width. Primary purpose is to enable
+plugins to display custom CI related information (build status, etc).
+
+=== change-metadata-item
+Extension point is located on the bottom of the change view left panel, under
+`Label Status` and `Links` sections. It's width is equal to the left panel's and
+primary purpose is to enable plugins to add sections of metadata to the left
+panel.

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html

@@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
 <link rel="import" href="../../../styles/shared-styles.html">
-<link rel="import" href="../../plugins/gr-external-style/gr-external-style.html">
 <link rel="import" href="../../core/gr-navigation/gr-navigation.html">
+<link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html">
+<link rel="import" href="../../plugins/gr-external-style/gr-external-style.html">
 <link rel="import" href="../../shared/gr-account-chip/gr-account-chip.html">
 <link rel="import" href="../../shared/gr-account-link/gr-account-link.html">
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
@@ -327,6 +328,8 @@ limitations under the License.
           </template>
         </span>
       </section>
+      <gr-endpoint-decorator name="change-metadata-item">
+      </gr-endpoint-decorator>
     </gr-external-style>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>