Bug 1634048, lazify UI Tour panels by placing in templates r=Gijs

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

browser/base/content/browser.xhtml

@@ -326,40 +326,42 @@
       </panel>
     </html:template>
 
-    <!-- UI tour experience -->
-    <panel id="UITourTooltip"
-           type="arrow"
-           hidden="true"
-           noautofocus="true"
-           noautohide="true"
-           align="start"
-           orient="vertical"
-           role="alert">
-     <vbox>
-      <hbox id="UITourTooltipBody">
-        <image id="UITourTooltipIcon"/>
-        <vbox flex="1">
-          <hbox id="UITourTooltipTitleContainer">
-            <label id="UITourTooltipTitle" flex="1"/>
-            <toolbarbutton id="UITourTooltipClose" class="close-icon"
-                           tooltiptext="&uiTour.infoPanel.close;"/>
-          </hbox>
-          <description id="UITourTooltipDescription" flex="1"/>
-        </vbox>
-      </hbox>
-      <hbox id="UITourTooltipButtons" flex="1" align="center"/>
-     </vbox>
-    </panel>
-    <!-- type="default" forces frames to be created so that the panel's size can be determined -->
-    <panel id="UITourHighlightContainer"
-           type="default"
-           hidden="true"
-           noautofocus="true"
-           noautohide="true"
-           flip="none"
-           consumeoutsideclicks="false">
-      <box id="UITourHighlight"></box>
-    </panel>
+    <html:template id="UITourTooltipTemplate">
+      <!-- UI tour experience -->
+      <panel id="UITourTooltip"
+             type="arrow"
+             noautofocus="true"
+             noautohide="true"
+             align="start"
+             orient="vertical"
+             role="alert">
+       <vbox>
+        <hbox id="UITourTooltipBody">
+          <image id="UITourTooltipIcon"/>
+          <vbox flex="1">
+            <hbox id="UITourTooltipTitleContainer">
+              <label id="UITourTooltipTitle" flex="1"/>
+              <toolbarbutton id="UITourTooltipClose" class="close-icon"
+                             tooltiptext="&uiTour.infoPanel.close;"/>
+            </hbox>
+            <description id="UITourTooltipDescription" flex="1"/>
+          </vbox>
+        </hbox>
+        <hbox id="UITourTooltipButtons" flex="1" align="center"/>
+       </vbox>
+      </panel>
+    </html:template>
+    <html:template id="UITourHighlightTemplate">
+      <!-- type="default" forces frames to be created so that the panel's size can be determined -->
+      <panel id="UITourHighlightContainer"
+             type="default"
+             noautofocus="true"
+             noautohide="true"
+             flip="none"
+             consumeoutsideclicks="false">
+        <box id="UITourHighlight"></box>
+      </panel>
+    </html:template>
 
     <panel id="sidebarMenu-popup"
            class="cui-widget-panel"

browser/components/uitour/UITour.jsm

@@ -1165,9 +1165,7 @@ var UITour = {
    */
   async showHighlight(aChromeWindow, aTarget, aEffect = "none", aOptions = {}) {
     let showHighlightElement = aAnchorEl => {
-      let highlighter = aChromeWindow.document.getElementById(
-        "UITourHighlight"
-      );
+      let highlighter = this.getHighlightAndMaybeCreate(aChromeWindow.document);
 
       let effect = aEffect;
       if (effect == "random") {
@@ -1254,7 +1252,7 @@ var UITour = {
   },
 
   _hideHighlightElement(aWindow) {
-    let highlighter = aWindow.document.getElementById("UITourHighlight");
+    let highlighter = this.getHighlightAndMaybeCreate(aWindow.document);
     this._removeAnnotationPanelMutationObserver(highlighter.parentElement);
     highlighter.parentElement.hidePopup();
     highlighter.removeAttribute("active");
@@ -1292,7 +1290,7 @@ var UITour = {
       aAnchorEl.focus();
 
       let document = aChromeWindow.document;
-      let tooltip = document.getElementById("UITourTooltip");
+      let tooltip = this.getTooltipAndMaybeCreate(document);
       let tooltipTitle = document.getElementById("UITourTooltipTitle");
       let tooltipDesc = document.getElementById("UITourTooltipDescription");
       let tooltipIcon = document.getElementById("UITourTooltipIcon");
@@ -1375,7 +1373,7 @@ var UITour = {
       );
 
       tooltip.setAttribute("targetName", aAnchor.targetName);
-      tooltip.hidden = false;
+
       let alignment = "bottomcenter topright";
       if (aAnchor.infoPanelPosition) {
         alignment = aAnchor.infoPanelPosition;
@@ -1405,9 +1403,42 @@ var UITour = {
     }
   },
 
+  getHighlightContainerAndMaybeCreate(document) {
+    let highlightContainer = document.getElementById(
+      "UITourHighlightContainer"
+    );
+    if (!highlightContainer) {
+      let wrapper = document.getElementById("UITourHighlightTemplate");
+      wrapper.replaceWith(wrapper.content);
+      highlightContainer = document.getElementById("UITourHighlightContainer");
+    }
+
+    return highlightContainer;
+  },
+
+  getTooltipAndMaybeCreate(document) {
+    let tooltip = document.getElementById("UITourTooltip");
+    if (!tooltip) {
+      let wrapper = document.getElementById("UITourTooltipTemplate");
+      wrapper.replaceWith(wrapper.content);
+      tooltip = document.getElementById("UITourTooltip");
+    }
+    return tooltip;
+  },
+
+  getHighlightAndMaybeCreate(document) {
+    let highlight = document.getElementById("UITourHighlight");
+    if (!highlight) {
+      let wrapper = document.getElementById("UITourHighlightTemplate");
+      wrapper.replaceWith(wrapper.content);
+      highlight = document.getElementById("UITourHighlight");
+    }
+    return highlight;
+  },
+
   isInfoOnTarget(aChromeWindow, aTargetName) {
     let document = aChromeWindow.document;
-    let tooltip = document.getElementById("UITourTooltip");
+    let tooltip = this.getTooltipAndMaybeCreate(document);
     return (
       tooltip.getAttribute("targetName") == aTargetName &&
       tooltip.state != "closed"
@@ -1416,7 +1447,7 @@ var UITour = {
 
   _hideInfoElement(aWindow) {
     let document = aWindow.document;
-    let tooltip = document.getElementById("UITourTooltip");
+    let tooltip = this.getTooltipAndMaybeCreate(document);
     this._removeAnnotationPanelMutationObserver(tooltip);
     tooltip.hidePopup();
     let tooltipButtons = document.getElementById("UITourTooltipButtons");
@@ -1567,10 +1598,10 @@ var UITour = {
     let annotationElements = new Map([
       // [annotationElement (panel), method to hide the annotation]
       [
-        win.document.getElementById("UITourHighlightContainer"),
+        this.getHighlightContainerAndMaybeCreate(win.document),
         hideHighlightMethod,
       ],
-      [win.document.getElementById("UITourTooltip"), hideInfoMethod],
+      [this.getTooltipAndMaybeCreate(win.document), hideInfoMethod],
     ]);
     annotationElements.forEach((hideMethod, annotationElement) => {
       if (annotationElement.state != "closed") {

browser/components/uitour/test/browser_UITour_annotation_size_attributes.js

@@ -7,8 +7,8 @@
 var gTestTab;
 var gContentAPI;
 var gContentWindow;
-var highlight = document.getElementById("UITourHighlightContainer");
-var tooltip = document.getElementById("UITourTooltip");
+var highlight = UITour.getHighlightContainerAndMaybeCreate(document);
+var tooltip = UITour.getTooltipAndMaybeCreate(document);
 
 add_task(setup_UITourTest);
 

browser/components/uitour/test/browser_UITour_detach_tab.js

@@ -74,8 +74,8 @@ var tests = [
     await browserStartupDeferred.promise;
 
     // This highlight should be shown thanks to the pageshow listener.
-    let newWindowHighlight = gContentWindow.document.getElementById(
-      "UITourHighlight"
+    let newWindowHighlight = UITour.getHighlightAndMaybeCreate(
+      gContentWindow.document
     );
     await elementVisiblePromise(newWindowHighlight, "new window highlight");
 

browser/components/uitour/test/browser_UITour_panel_close_annotation.js

@@ -10,8 +10,8 @@
 var gTestTab;
 var gContentAPI;
 var gContentWindow;
-var highlight = document.getElementById("UITourHighlight");
-var tooltip = document.getElementById("UITourTooltip");
+var highlight = UITour.getHighlightContainerAndMaybeCreate(document);
+var tooltip = UITour.getTooltipAndMaybeCreate(document);
 
 function test() {
   registerCleanupFunction(() => {

browser/components/uitour/test/head.js

@@ -463,6 +463,9 @@ function UITourTest(usingAddTask = false) {
     Services.perms.ALLOW_ACTION
   );
 
+  UITour.getHighlightContainerAndMaybeCreate(window.document);
+  UITour.getTooltipAndMaybeCreate(window.document);
+
   // If a test file is using add_task, we don't need to have a test function or
   // call `waitForExplicitFinish`.
   if (!usingAddTask) {