Bug 1797650 - Restore change indicator for event title. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D163255

--HG--
extra : moz-landing-system : lando

calendar/base/content/widgets/calendar-invitation-panel.js

@@ -82,7 +82,10 @@
       if (this.item && this.mode) {
         let template = document.getElementById(`calendarInvitationPanel`);
         this.shadowRoot.appendChild(template.content.cloneNode(true));
-        this.shadowRoot.getElementById("title").textContent = this.item.title;
+
+        let title = this.shadowRoot.querySelector("calendar-invitation-panel-title");
+        title.foundItem = this.foundItem;
+        title.item = this.item;
 
         let statusBar = this.shadowRoot.querySelector("calendar-invitation-panel-status-bar");
         statusBar.status = this.mode;
@@ -96,10 +99,41 @@
   }
   customElements.define("calendar-invitation-panel", InvitationPanel);
 
+  /**
+   * InvitationPanelTitle displays the title of the event in a header element.
+   */
+  class InvitationPanelTitle extends HTMLElement {
+    /**
+     * A previous copy of the event, if specified it is used to determine if
+     * the title of the invitation has changed.
+     *
+     * @type {calIEvent?}
+     */
+    foundItem;
+
+    /**
+     * Setting this value will render the title as well as a change indicator
+     * if a change in title is detected.
+     *
+     * @type {calIEvent}
+     */
+    set item(value) {
+      let node = document.getElementById("calendarInvitationPanelTitle").content.cloneNode(true);
+      if (this.foundItem && this.foundItem.title != value.title) {
+        let indicator = node.querySelector("calendar-invitation-change-indicator");
+        indicator.status = PROPERTY_MODIFIED;
+        indicator.hidden = false;
+      }
+
+      node.querySelector("h1").textContent = value.title;
+      this.append(node);
+    }
+  }
+  customElements.define("calendar-invitation-panel-title", InvitationPanelTitle);
+
   /**
    * Object used to describe relevant arguments to MozElements.NotificationBox.
    * appendNotification().
-   *
    * @type {Object} InvitationStatusBarDescriptor
    * @property {string} label - An l10n id used used to generate the notification
    *   bar text.

calendar/base/content/widgets/calendar-invitation-panel.xhtml

@@ -10,17 +10,20 @@
       <calendar-minidate/>
     </div>
     <div class="calendar-invitation-panel-details">
-      <div class="calendar-invitation-panel-details-header">
-        <calendar-invitation-change-indicator hidden="hidden"/>
-        <h1 id="title"
-            class="calendar-invitation-panel-title"></h1>
-      </div>
+      <calendar-invitation-panel-title/>
       <calendar-invitation-panel-properties/>
     </div>
   </div>
   <calendar-invitation-panel-footer/>
 </template>
 
+<!-- Template for <calendar-invitation-panel-title/> -->
+<template id="calendarInvitationPanelTitle" xmlns="http://www.w3.org/1999/xhtml">
+  <div class="calendar-invitation-panel-title">
+    <calendar-invitation-change-indicator hidden="hidden"/><h1></h1>
+  </div>
+</template>
+
 <!-- Template for <calendar-invitation-panel-properties/> -->
 <template id="calendarInvitationPanelProperties" xmlns="http://www.w3.org/1999/xhtml">
   <table class="calendar-invitation-panel-props">

calendar/base/themes/common/widgets/calendar-invitation-panel.css

@@ -29,18 +29,16 @@
   flex-direction: column;
 }
 
-.calendar-invitation-panel-details-header {
+.calendar-invitation-panel-title {
   margin-bottom: 5px;
-  text-align: center;
+  display: flex;
+  justify-content: center;
 }
 
-.calendar-invitation-panel-title {
+.calendar-invitation-panel-title > h1 {
   font-size: 1.4rem;
   font-weight: 800;
-  margin: 0 1em;
-  flex-grow: 2;
-  align-self: flex-end;
-  display: inline-block;
+  margin: 0;
 }
 
 .calendar-invitation-panel-response-buttons {