Bug 1600228, lazy load the edit bookmark panel by storing in an HTML template r=Gijs
authorEmma Malysz <emalysz@mozilla.com>
Fri, 13 Mar 2020 02:22:42 +0000
changeset 518530 1dde34e3f3854334cf95f128c64b7edbe3906ba7
parent 518529 8a45a038284e21d6246510b55b7f3c1e38993446
child 518531 9d6c366e7cde369c65ddb85b258dbacbf396e65e
push id37211
push usermalexandru@mozilla.com
push dateFri, 13 Mar 2020 09:53:22 +0000
treeherdermozilla-central@b5c4cdbb59c9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1600228
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1600228, lazy load the edit bookmark panel by storing in an HTML template r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D66143
browser/base/content/browser-places.js
browser/base/content/browser.xhtml
browser/base/content/test/general/browser_bug432599.js
browser/base/content/test/general/browser_star_hsts.js
browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
browser/components/customizableui/test/browser_1484275_PanelMultiView_toggle_with_other_popup.js
browser/components/newtab/test/browser/browser_asrouter_bookmarkpanel.js
browser/components/places/tests/browser/browser_bookmarkProperties_folderSelection.js
browser/components/places/tests/browser/browser_bookmarkProperties_newFolder.js
browser/components/places/tests/browser/browser_bookmarkProperties_no_user_actions.js
browser/components/places/tests/browser/browser_bookmarkProperties_remember_folders.js
browser/components/places/tests/browser/browser_bookmark_add_tags.js
browser/components/places/tests/browser/browser_bookmark_popup.js
browser/components/places/tests/browser/browser_bookmark_private_window.js
browser/components/places/tests/browser/browser_bookmark_remove_tags.js
browser/components/places/tests/browser/browser_bookmarks_change_title.js
browser/components/places/tests/browser/browser_bug427633_no_newfolder_if_noip.js
browser/components/places/tests/browser/browser_bug631374_tags_selector_scroll.js
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -37,16 +37,17 @@ var StarUI = {
     return Services.prefs.getBoolPref(
       "browser.bookmarks.editDialog.showForNewBookmarks"
     );
   },
 
   // Edit-bookmark panel
   get panel() {
     delete this.panel;
+    this._createPanelIfNeeded();
     var element = this._element("editBookmarkPanel");
     // initially the panel is hidden
     // to avoid impacting startup / new window performance
     element.hidden = false;
     element.addEventListener("keypress", this, { mozSystemGroup: true });
     element.addEventListener("mousedown", this);
     element.addEventListener("mouseout", this);
     element.addEventListener("mousemove", this);
@@ -294,16 +295,25 @@ var StarUI = {
       onPanelReady,
       hiddenRows: ["location", "keyword"],
       focusedElement: "preferred",
     });
 
     this.panel.openPopup(this._anchorElement, "bottomcenter topright");
   },
 
+  _createPanelIfNeeded() {
+    // Lazy load the editBookmarkPanel the first time we need to display it.
+    if (!this._element("editBookmarkPanel")) {
+      let template = this._element("editBookmarkPanelTemplate");
+      let clone = template.content.cloneNode(true);
+      template.replaceWith(clone);
+    }
+  },
+
   _setIconAndPreviewImage() {
     let faviconImage = this._element("editBookmarkPanelFavicon");
     faviconImage.removeAttribute("iconloadingprincipal");
     faviconImage.removeAttribute("src");
 
     let tab = gBrowser.selectedTab;
     if (tab.hasAttribute("image") && !tab.hasAttribute("busy")) {
       faviconImage.setAttribute(
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -251,69 +251,71 @@
         />
     </menulist>
 
     <!-- for invalid form error message -->
     <panel id="invalid-form-popup" type="arrow" orient="vertical" noautofocus="true" hidden="true" level="parent">
       <description/>
     </panel>
 
-    <panel id="editBookmarkPanel"
-           class="panel-no-padding"
-           type="arrow"
-           orient="vertical"
-           ignorekeys="true"
-           hidden="true"
-           tabspecific="true"
-           aria-labelledby="editBookmarkPanelTitle">
-      <box class="panel-header">
-        <label id="editBookmarkPanelTitle"/>
-        <toolbarbutton tabindex="0" id="editBookmarkPanelInfoButton" class="panel-info-button" oncommand="StarUI.toggleRecommendation();" >
-          <image/>
-        </toolbarbutton>
-      </box>
-      <html:div id="editBookmarkPanelInfoArea">
-        <html:div id="editBookmarkPanelRecommendation"></html:div>
-        <html:div id="editBookmarkPanelFaviconContainer">
-          <html:img id="editBookmarkPanelFavicon"/>
+    <html:template id="editBookmarkPanelTemplate"> 
+      <panel id="editBookmarkPanel"
+             class="panel-no-padding"
+             type="arrow"
+             orient="vertical"
+             ignorekeys="true"
+             hidden="true"
+             tabspecific="true"
+             aria-labelledby="editBookmarkPanelTitle">
+        <box class="panel-header">
+          <label id="editBookmarkPanelTitle"/>
+          <toolbarbutton tabindex="0" id="editBookmarkPanelInfoButton" class="panel-info-button" oncommand="StarUI.toggleRecommendation();" >
+            <image/>
+          </toolbarbutton>
+        </box>
+        <html:div id="editBookmarkPanelInfoArea">
+          <html:div id="editBookmarkPanelRecommendation"></html:div>
+          <html:div id="editBookmarkPanelFaviconContainer">
+            <html:img id="editBookmarkPanelFavicon"/>
+          </html:div>
+          <html:div id="editBookmarkPanelImage"></html:div>
         </html:div>
-        <html:div id="editBookmarkPanelImage"></html:div>
-      </html:div>
 #include ../../components/places/content/editBookmarkPanel.inc.xhtml
-      <vbox id="editBookmarkPanelBottomContent"
-            flex="1">
-        <checkbox id="editBookmarkPanel_showForNewBookmarks"
-                  data-l10n-id="bookmark-panel-show-editor-checkbox"
-                  oncommand="StarUI.onShowForNewBookmarksCheckboxCommand();"/>
-      </vbox>
-      <hbox id="editBookmarkPanelBottomButtons"
-            class="panel-footer"
-            data-l10n-id="bookmark-panel"
-            data-l10n-attrs="style">
+          <vbox id="editBookmarkPanelBottomContent"
+                flex="1">
+            <checkbox id="editBookmarkPanel_showForNewBookmarks"
+                      data-l10n-id="bookmark-panel-show-editor-checkbox"
+                      oncommand="StarUI.onShowForNewBookmarksCheckboxCommand();"/>
+          </vbox>
+          <hbox id="editBookmarkPanelBottomButtons"
+                class="panel-footer"
+                data-l10n-id="bookmark-panel"
+                data-l10n-attrs="style">
 #ifndef XP_UNIX
-        <button id="editBookmarkPanelDoneButton"
-                class="editBookmarkPanelBottomButton"
-                data-l10n-id="bookmark-panel-done-button"
-                default="true"
-                oncommand="StarUI.panel.hidePopup();"/>
-        <button id="editBookmarkPanelRemoveButton"
-                class="editBookmarkPanelBottomButton"
-                oncommand="StarUI.removeBookmarkButtonCommand();"/>
+            <button id="editBookmarkPanelDoneButton"
+                    class="editBookmarkPanelBottomButton"
+                    data-l10n-id="bookmark-panel-done-button"
+                    default="true"
+                    oncommand="StarUI.panel.hidePopup();"/>
+            <button id="editBookmarkPanelRemoveButton"
+                    class="editBookmarkPanelBottomButton"
+                    oncommand="StarUI.removeBookmarkButtonCommand();"/>
 #else
-        <button id="editBookmarkPanelRemoveButton"
-                class="editBookmarkPanelBottomButton"
-                oncommand="StarUI.removeBookmarkButtonCommand();"/>
-        <button id="editBookmarkPanelDoneButton"
-                class="editBookmarkPanelBottomButton"
-                data-l10n-id="bookmark-panel-done-button"
-                default="true"
-                oncommand="StarUI.panel.hidePopup();"/>
+            <button id="editBookmarkPanelRemoveButton"
+                    class="editBookmarkPanelBottomButton"
+                    oncommand="StarUI.removeBookmarkButtonCommand();"/>
+            <button id="editBookmarkPanelDoneButton"
+                    class="editBookmarkPanelBottomButton"
+                    data-l10n-id="bookmark-panel-done-button"
+                    default="true"
+                    oncommand="StarUI.panel.hidePopup();"/>
 #endif
-      </hbox>
-    </panel>
+          </hbox>
+      </panel>
+    </html:template>
 
     <!-- UI tour experience -->
     <panel id="UITourTooltip"
            type="arrow"
            hidden="true"
            noautofocus="true"
            noautohide="true"
            align="start"
--- a/browser/base/content/test/general/browser_bug432599.js
+++ b/browser/base/content/test/general/browser_bug432599.js
@@ -70,16 +70,17 @@ add_task(async function() {
       );
     }
   }
 });
 
 var initialValue;
 var initialRemoveHidden;
 function checkBookmarksPanel(phase) {
+  StarUI._createPanelIfNeeded();
   let popupElement = document.getElementById("editBookmarkPanel");
   let titleElement = document.getElementById("editBookmarkPanelTitle");
   let removeElement = document.getElementById("editBookmarkPanelRemoveButton");
   switch (phase) {
     case 1:
     case 3:
       return promisePopupShown(popupElement);
     case 2:
--- a/browser/base/content/test/general/browser_star_hsts.js
+++ b/browser/base/content/test/general/browser_star_hsts.js
@@ -26,16 +26,17 @@ add_task(async function test_star_redire
   let tab = (gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser));
   // This will add the page to the HSTS cache.
   await promiseTabLoadEvent(tab, secureURL, secureURL);
   // This should transparently be redirected to the secure page.
   await promiseTabLoadEvent(tab, unsecureURL, secureURL);
 
   await promiseStarState(BookmarkingUI.STATUS_UNSTARRED);
 
+  StarUI._createPanelIfNeeded();
   let bookmarkPanel = document.getElementById("editBookmarkPanel");
   let shownPromise = promisePopupShown(bookmarkPanel);
   BookmarkingUI.star.click();
   await shownPromise;
 
   is(BookmarkingUI.status, BookmarkingUI.STATUS_STARRED, "The star is starred");
 });
 
--- a/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
+++ b/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
@@ -222,16 +222,17 @@ add_task(async function testSidebarsButt
 // This is an image with a click handler on its parent and no command handler,
 // but the toolbar keyboard navigation code should handle keyboard activation.
 add_task(async function testBookmarkButtonPress() {
   await BrowserTestUtils.withNewTab("https://example.com", async function(
     aBrowser
   ) {
     let button = document.getElementById("star-button");
     forceFocus(button);
+    StarUI._createPanelIfNeeded();
     let panel = document.getElementById("editBookmarkPanel");
     let focused = BrowserTestUtils.waitForEvent(panel, "focus", true);
     // The button ignores activation while the bookmarked status is being
     // updated. So, wait for it to finish updating.
     await TestUtils.waitForCondition(
       () => BookmarkingUI.status != BookmarkingUI.STATUS_UPDATING
     );
     EventUtils.synthesizeKey(" ");
--- a/browser/components/customizableui/test/browser_1484275_PanelMultiView_toggle_with_other_popup.js
+++ b/browser/components/customizableui/test/browser_1484275_PanelMultiView_toggle_with_other_popup.js
@@ -48,16 +48,17 @@ add_task(async function test_PanelMultiV
       gBrowser,
       url: TEST_URL,
     },
     async function(browser) {
       // 1. Open the main menu.
       await gCUITestUtils.openMainMenu();
 
       // 2. Open another popup not managed by PanelMultiView.
+      StarUI._createPanelIfNeeded();
       let bookmarkPanel = document.getElementById("editBookmarkPanel");
       let shown = BrowserTestUtils.waitForEvent(bookmarkPanel, "popupshown");
       let hidden = BrowserTestUtils.waitForEvent(bookmarkPanel, "popuphidden");
       EventUtils.synthesizeKey("D", { accelKey: true });
       await shown;
 
       // 3. Click the button to which the main menu is anchored. We need a native
       // mouse event to simulate the exact platform behavior with popups.
--- a/browser/components/newtab/test/browser/browser_asrouter_bookmarkpanel.js
+++ b/browser/components/newtab/test/browser/browser_asrouter_bookmarkpanel.js
@@ -11,16 +11,18 @@ add_task(async function test_fxa_message
   registerCleanupFunction(async () => {
     await clearHistoryAndBookmarks();
     BrowserTestUtils.removeTab(tab);
   });
 
   const testURL = "data:text/plain,test cfr fxa bookmark panel message";
   const browser = gBrowser.selectedBrowser;
 
+  StarUI._createPanelIfNeeded();
+
   BrowserTestUtils.loadURI(browser, testURL);
   await BrowserTestUtils.browserLoaded(browser, false, testURL);
 
   const [msg] = PanelTestProvider.getMessages();
   const response = BookmarkPanelHub.onResponse(
     msg,
     {
       container: document.getElementById("editBookmarkPanelRecommendation"),
--- a/browser/components/places/tests/browser/browser_bookmarkProperties_folderSelection.js
+++ b/browser/components/places/tests/browser/browser_bookmarkProperties_folderSelection.js
@@ -16,16 +16,17 @@ add_task(async function setup() {
     opening: TEST_URL,
     waitForStateStop: true,
   });
 
   let oldTimeout = win.StarUI._autoCloseTimeout;
   // Make the timeout something big, so it doesn't iteract badly with tests.
   win.StarUI._autoCloseTimeout = 6000000;
 
+  win.StarUI._createPanelIfNeeded();
   bookmarkPanel = win.document.getElementById("editBookmarkPanel");
   bookmarkPanel.setAttribute("animate", false);
 
   registerCleanupFunction(async () => {
     bookmarkPanel = null;
     win.StarUI._autoCloseTimeout = oldTimeout;
     // BrowserTestUtils.removeTab(tab);
     await BrowserTestUtils.closeWindow(win);
--- a/browser/components/places/tests/browser/browser_bookmarkProperties_newFolder.js
+++ b/browser/components/places/tests/browser/browser_bookmarkProperties_newFolder.js
@@ -1,13 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/
  */
 
 const TEST_URL = "about:robots";
+StarUI._createPanelIfNeeded();
 const bookmarkPanel = document.getElementById("editBookmarkPanel");
 let folders;
 
 add_task(async function setup() {
   await PlacesUtils.bookmarks.eraseEverything();
 
   bookmarkPanel.setAttribute("animate", false);
 
--- a/browser/components/places/tests/browser/browser_bookmarkProperties_no_user_actions.js
+++ b/browser/components/places/tests/browser/browser_bookmarkProperties_no_user_actions.js
@@ -19,16 +19,17 @@ add_task(async function test_change_titl
     waitForStateStop: true,
   });
 
   registerCleanupFunction(async () => {
     BrowserTestUtils.removeTab(tab);
     await PlacesUtils.bookmarks.eraseEverything();
   });
 
+  StarUI._createPanelIfNeeded();
   let bookmarkPanel = document.getElementById("editBookmarkPanel");
   let shownPromise = promisePopupShown(bookmarkPanel);
 
   let bookmarkStar = BookmarkingUI.star;
   bookmarkStar.click();
 
   await shownPromise;
 
--- a/browser/components/places/tests/browser/browser_bookmarkProperties_remember_folders.js
+++ b/browser/components/places/tests/browser/browser_bookmarkProperties_remember_folders.js
@@ -3,16 +3,17 @@
  */
 
 "use strict";
 
 /**
  * Tests that multiple tags can be added to a bookmark using the star-shaped button, the library and the sidebar.
  */
 
+StarUI._createPanelIfNeeded();
 const bookmarkPanel = document.getElementById("editBookmarkPanel");
 let folders;
 
 async function openPopupAndSelectFolder(guid, newBookmark = false) {
   await clickBookmarkStar();
 
   let notificationPromise;
   if (!newBookmark) {
--- a/browser/components/places/tests/browser/browser_bookmark_add_tags.js
+++ b/browser/components/places/tests/browser/browser_bookmark_add_tags.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 /**
  * Tests that multiple tags can be added to a bookmark using the star-shaped button, the library and the sidebar.
  */
 
+StarUI._createPanelIfNeeded();
 const bookmarkPanel = document.getElementById("editBookmarkPanel");
 const bookmarkStar = BookmarkingUI.star;
 
 async function clickBookmarkStar() {
   let shownPromise = promisePopupShown(bookmarkPanel);
   bookmarkStar.click();
   await shownPromise;
 }
--- a/browser/components/places/tests/browser/browser_bookmark_popup.js
+++ b/browser/components/places/tests/browser/browser_bookmark_popup.js
@@ -4,16 +4,17 @@
 /* eslint-disable mozilla/no-arbitrary-setTimeout */
 
 "use strict";
 
 /**
  * Test opening and closing the bookmarks panel.
  */
 
+StarUI._createPanelIfNeeded();
 let bookmarkPanel = document.getElementById("editBookmarkPanel");
 let bookmarkStar = BookmarkingUI.star;
 let bookmarkPanelTitle = document.getElementById("editBookmarkPanelTitle");
 let bookmarkRemoveButton = document.getElementById(
   "editBookmarkPanelRemoveButton"
 );
 let editBookmarkPanelRemoveButtonRect;
 
--- a/browser/components/places/tests/browser/browser_bookmark_private_window.js
+++ b/browser/components/places/tests/browser/browser_bookmark_private_window.js
@@ -19,16 +19,17 @@ add_task(async function test_add_bookmar
   let tab = await BrowserTestUtils.openNewForegroundTab(win.gBrowser, TEST_URL);
 
   registerCleanupFunction(async () => {
     BrowserTestUtils.removeTab(tab);
     await BrowserTestUtils.closeWindow(win);
   });
 
   // Open the bookmark panel.
+  win.StarUI._createPanelIfNeeded();
   let bookmarkPanel = win.document.getElementById("editBookmarkPanel");
   let shownPromise = promisePopupShown(bookmarkPanel);
   let bookmarkStar = win.BookmarkingUI.star;
   bookmarkStar.click();
   await shownPromise;
 
   // Check if the bookmark star changes its state after click.
   Assert.equal(
--- a/browser/components/places/tests/browser/browser_bookmark_remove_tags.js
+++ b/browser/components/places/tests/browser/browser_bookmark_remove_tags.js
@@ -39,16 +39,17 @@ add_task(async function test_remove_tags
     opening: TEST_URL,
     waitForStateStop: true,
   });
 
   registerCleanupFunction(async () => {
     BrowserTestUtils.removeTab(tab);
   });
 
+  StarUI._createPanelIfNeeded();
   let bookmarkPanel = document.getElementById("editBookmarkPanel");
   let shownPromise = promisePopupShown(bookmarkPanel);
   let bookmarkStar = BookmarkingUI.star;
   bookmarkStar.click();
   await shownPromise;
 
   // Check if the "Edit This Bookmark" panel is open.
   let bookmarkPanelTitle = document.getElementById("editBookmarkPanelTitle");
--- a/browser/components/places/tests/browser/browser_bookmarks_change_title.js
+++ b/browser/components/places/tests/browser/browser_bookmarks_change_title.js
@@ -47,16 +47,17 @@ add_task(async function test_change_titl
     opening: TEST_URL,
     waitForStateStop: true,
   });
 
   registerCleanupFunction(async () => {
     BrowserTestUtils.removeTab(tab);
   });
 
+  StarUI._createPanelIfNeeded();
   let bookmarkPanel = document.getElementById("editBookmarkPanel");
   let shownPromise = promisePopupShown(bookmarkPanel);
 
   let bookmarkStar = BookmarkingUI.star;
   bookmarkStar.click();
 
   await shownPromise;
 
--- a/browser/components/places/tests/browser/browser_bug427633_no_newfolder_if_noip.js
+++ b/browser/components/places/tests/browser/browser_bug427633_no_newfolder_if_noip.js
@@ -15,16 +15,17 @@ add_task(async function() {
   });
 
   registerCleanupFunction(async () => {
     bookmarkPanel.removeAttribute("animate");
     await BrowserTestUtils.removeTab(tab);
     await PlacesUtils.bookmarks.eraseEverything();
   });
 
+  StarUI._createPanelIfNeeded();
   let bookmarkPanel = document.getElementById("editBookmarkPanel");
   bookmarkPanel.setAttribute("animate", false);
 
   let shownPromise = promisePopupShown(bookmarkPanel);
 
   let bookmarkStar = BookmarkingUI.star;
   bookmarkStar.click();
 
--- a/browser/components/places/tests/browser/browser_bug631374_tags_selector_scroll.js
+++ b/browser/components/places/tests/browser/browser_bug631374_tags_selector_scroll.js
@@ -58,16 +58,17 @@ add_task(async function() {
   });
 
   registerCleanupFunction(async () => {
     bookmarkPanel.removeAttribute("animate");
     await BrowserTestUtils.removeTab(tab);
     await PlacesUtils.bookmarks.eraseEverything();
   });
 
+  StarUI._createPanelIfNeeded();
   let bookmarkPanel = document.getElementById("editBookmarkPanel");
   bookmarkPanel.setAttribute("animate", false);
   let shownPromise = promisePopupShown(bookmarkPanel);
 
   let bookmarkStar = BookmarkingUI.star;
   bookmarkStar.click();
 
   await shownPromise;