Bug 1359137 - update UITour to highlight in new panel where appropriate, r?MattN draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 31 May 2017 13:41:07 +0100
changeset 588982 843b4eb59b9c44e027f88bc1bd2285d55337d67b
parent 588945 275588f4d852d7dc183a9dcc70a311413dc7a063
child 588983 fed312704085858ce6dfa5a22a764d57168db77a
push id62208
push usergijskruitbosch@gmail.com
push dateMon, 05 Jun 2017 10:41:48 +0000
reviewersMattN
bugs1359137
milestone55.0a1
Bug 1359137 - update UITour to highlight in new panel where appropriate, r?MattN MozReview-Commit-ID: Asigfu41hTv
browser/components/uitour/UITour.jsm
browser/components/uitour/test/browser_UITour.js
browser/components/uitour/test/browser_UITour_availableTargets.js
browser/components/uitour/test/browser_UITour_detach_tab.js
browser/components/uitour/test/browser_fxa.js
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -28,16 +28,18 @@ XPCOMUtils.defineLazyModuleGetter(this, 
   "resource://gre/modules/UITelemetry.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "BrowserUITelemetry",
   "resource:///modules/BrowserUITelemetry.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "PrivateBrowsingUtils",
   "resource://gre/modules/PrivateBrowsingUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "ReaderParent",
   "resource:///modules/ReaderParent.jsm");
 
+XPCOMUtils.defineLazyPreferenceGetter(this, "gPhotonStructure", "browser.photon.structure.enabled");
+
 // See LOG_LEVELS in Console.jsm. Common examples: "All", "Info", "Warn", & "Error".
 const PREF_LOG_LEVEL      = "browser.uitour.loglevel";
 const PREF_SEENPAGEIDS    = "browser.uitour.seenPageIDs";
 
 const BACKGROUND_PAGE_ACTIONS_ALLOWED = new Set([
   "forceShowReaderIcon",
   "getConfiguration",
   "getTreatmentTag",
@@ -91,75 +93,116 @@ this.UITour = {
   },
 
   _annotationPanelMutationObservers: new WeakMap(),
 
   highlightEffects: ["random", "wobble", "zoom", "color"],
   targets: new Map([
     ["accountStatus", {
       query: (aDocument) => {
+        let prefix = gPhotonStructure ? "appMenu" : "PanelUI"
         // If the user is logged in, use the avatar element.
-        let fxAFooter = aDocument.getElementById("PanelUI-fxa-container");
+        let fxAFooter = aDocument.getElementById(prefix + "-fxa-container");
         if (fxAFooter.getAttribute("fxastatus")) {
-          return aDocument.getElementById("PanelUI-fxa-avatar");
+          return aDocument.getElementById(prefix + "-fxa-avatar");
         }
 
         // Otherwise use the sync setup icon.
-        let statusButton = aDocument.getElementById("PanelUI-fxa-label");
+        let statusButton = aDocument.getElementById(prefix + "-fxa-label");
         return aDocument.getAnonymousElementByAttribute(statusButton,
                                                         "class",
                                                         "toolbarbutton-icon");
       },
-      // This is a fake widgetName starting with the "PanelUI-" prefix so we know
+      // This is a fake widgetName starting with the "PanelUI-"/"appMenu-" prefix so we know
       // to automatically open the appMenu when annotating this target.
-      widgetName: "PanelUI-fxa-label",
+      get widgetName() {
+        return gPhotonStructure ? "appMenu-fxa-label" : "PanelUI-fxa-label";
+      },
     }],
-    ["addons",      {query: "#add-ons-button"}],
+    ["addons", {
+      query(aDocument) {
+        let buttonId = gPhotonStructure ? "appMenu-addons-button" : "add-ons-button";
+        return aDocument.getElementById(buttonId);
+      }
+    }],
     ["appMenu",     {
       addTargetListener: (aDocument, aCallback) => {
-        let panelPopup = aDocument.getElementById("PanelUI-popup");
+        let panelPopup = aDocument.defaultView.PanelUI.panel;
         panelPopup.addEventListener("popupshown", aCallback);
       },
       query: "#PanelUI-button",
       removeTargetListener: (aDocument, aCallback) => {
-        let panelPopup = aDocument.getElementById("PanelUI-popup");
+        let panelPopup = aDocument.defaultView.PanelUI.panel;
         panelPopup.removeEventListener("popupshown", aCallback);
       },
     }],
     ["backForward", {
       query: "#back-button",
       widgetName: "urlbar-container",
     }],
     ["bookmarks",   {query: "#bookmarks-menu-button"}],
     ["controlCenter-trackingUnblock", controlCenterTrackingToggleTarget(true)],
     ["controlCenter-trackingBlock", controlCenterTrackingToggleTarget(false)],
     ["customize",   {
       query: (aDocument) => {
+        if (gPhotonStructure) {
+          return aDocument.getElementById("appMenu-customize-button");
+        }
         let customizeButton = aDocument.getElementById("PanelUI-customize");
         return aDocument.getAnonymousElementByAttribute(customizeButton,
                                                         "class",
                                                         "toolbarbutton-icon");
       },
-      widgetName: "PanelUI-customize",
+      get widgetName() {
+        return gPhotonStructure ? "appMenu-customize-button" : "PanelUI-customize";
+      },
     }],
-    ["devtools",    {query: "#developer-button"}],
-    ["help",        {query: "#PanelUI-help"}],
+    ["devtools", {
+      query(aDocument) {
+        let button = aDocument.getElementById("developer-button");
+        if (button || !gPhotonStructure) {
+          return button;
+        }
+        return aDocument.getElementById("appMenu-developer-button");
+      },
+      get widgetName() {
+        return gPhotonStructure ? "appMenu-developer-button" : "developer-button";
+      },
+    }],
+    ["help", {
+      query: (aDocument) => {
+        let buttonId = gPhotonStructure ? "appMenu-help-button" : "PanelUI-help";
+        return aDocument.getElementById(buttonId);
+      }
+    }],
     ["home",        {query: "#home-button"}],
     ["forget", {
       allowAdd: true,
       query: "#panic-button",
       widgetName: "panic-button",
     }],
     ["pocket", {
       allowAdd: true,
       query: "#pocket-button",
       widgetName: "pocket-button",
     }],
-    ["privateWindow",  {query: "#privatebrowsing-button"}],
-    ["quit",        {query: "#PanelUI-quit"}],
+    ["privateWindow", {
+      query(aDocument) {
+        let buttonId = gPhotonStructure ? "appMenu-private-window-button"
+                                        : "privatebrowsing-button";
+        return aDocument.getElementById(buttonId);
+      }
+    }],
+    ["quit", {
+      query(aDocument) {
+        let buttonId = gPhotonStructure ? "appMenu-quit-button"
+                                        : "PanelUI-quit";
+        return aDocument.getElementById(buttonId);
+      }
+    }],
     ["readerMode-urlBar", {query: "#reader-mode-button"}],
     ["search",      {
       infoPanelOffsetX: 18,
       infoPanelPosition: "after_start",
       query: "#searchbar",
       widgetName: "search-container",
     }],
     ["searchIcon", {
@@ -939,17 +982,18 @@ this.UITour = {
 
     let targetElement = aTarget.node;
     // Use the widget for filtering if it exists since the target may be the icon inside.
     if (aTarget.widgetName) {
       targetElement = aTarget.node.ownerDocument.getElementById(aTarget.widgetName);
     }
 
     // Handle the non-customizable buttons at the bottom of the menu which aren't proper widgets.
-    return targetElement.id.startsWith("PanelUI-")
+    let prefix = gPhotonStructure ? "appMenu-" : "PanelUI-";
+    return targetElement.id.startsWith(prefix)
              && targetElement.id != "PanelUI-button";
   },
 
   /**
    * Called before opening or after closing a highlight or info panel to see if
    * we need to open or close the appMenu to see the annotation's anchor.
    */
   _setAppMenuStateForAnnotation(aWindow, aAnnotationType, aShouldOpenForHighlight, aCallback = null) {
--- a/browser/components/uitour/test/browser_UITour.js
+++ b/browser/components/uitour/test/browser_UITour.js
@@ -115,17 +115,17 @@ var tests = [
       is(Math.round(highlightRect.height), maxDimension, "The height of the highlight should be equal to the largest dimension of the target");
       is(Math.round(highlightRect.height), Math.round(highlightRect.width), "The height and width of the highlight should be the same to create a circle");
       is(highlight.style.borderRadius, "100%", "The border-radius should be 100% to create a circle");
       done();
     }
     let highlight = document.getElementById("UITourHighlight");
     is_element_hidden(highlight, "Highlight should initially be hidden");
 
-    gContentAPI.showHighlight("addons");
+    gContentAPI.showHighlight("home");
     waitForElementToBeVisible(highlight, check_highlight_size, "Highlight should be shown after showHighlight()");
   },
   function test_highlight_customize_auto_open_close(done) {
     let highlight = document.getElementById("UITourHighlight");
     gContentAPI.showHighlight("customize");
     waitForElementToBeVisible(highlight, function checkPanelIsOpen() {
       isnot(PanelUI.panel.state, "closed", "Panel should have opened");
 
--- a/browser/components/uitour/test/browser_UITour_availableTargets.js
+++ b/browser/components/uitour/test/browser_UITour_availableTargets.js
@@ -1,15 +1,17 @@
 "use strict";
 
 var gTestTab;
 var gContentAPI;
 var gContentWindow;
 
 var hasPocket = Services.prefs.getBoolPref("extensions.pocket.enabled");
+var hasQuit = !Services.prefs.getBoolPref("browser.photon.structure.enabled") ||
+              false; // Update this with AppConstants.platform != "macosx" after bug 1368734 lands;
 
 requestLongerTimeout(2);
 add_task(setup_UITourTest);
 
 add_UITour_task(async function test_availableTargets() {
   let data = await getConfigurationPromise("availableTargets");
   ok_targets(data, [
     "accountStatus",
@@ -18,17 +20,17 @@ add_UITour_task(async function test_avai
     "backForward",
     "bookmarks",
     "customize",
     "help",
     "home",
     "devtools",
       ...(hasPocket ? ["pocket"] : []),
     "privateWindow",
-    "quit",
+      ...(hasQuit ? ["quit"] : []),
     "readerMode-urlBar",
     "search",
     "searchIcon",
     "trackingProtection",
     "urlbar",
   ]);
 
   ok(UITour.availableTargetsCache.has(window),
@@ -46,17 +48,17 @@ add_UITour_task(async function test_avai
     "appMenu",
     "backForward",
     "customize",
     "help",
     "devtools",
     "home",
       ...(hasPocket ? ["pocket"] : []),
     "privateWindow",
-    "quit",
+      ...(hasQuit ? ["quit"] : []),
     "readerMode-urlBar",
     "search",
     "searchIcon",
     "trackingProtection",
     "urlbar",
   ]);
 
   ok(UITour.availableTargetsCache.has(window),
@@ -79,17 +81,17 @@ add_UITour_task(async function test_avai
     "backForward",
     "bookmarks",
     "customize",
     "help",
     "home",
     "devtools",
       ...(hasPocket ? ["pocket"] : []),
     "privateWindow",
-    "quit",
+      ...(hasQuit ? ["quit"] : []),
     "readerMode-urlBar",
     "trackingProtection",
     "urlbar",
   ]);
 
   CustomizableUI.reset();
 });
 
--- a/browser/components/uitour/test/browser_UITour_detach_tab.js
+++ b/browser/components/uitour/test/browser_UITour_detach_tab.js
@@ -76,17 +76,19 @@ var tests = [
     // reasons.
     gTestTab = gContentWindow.gBrowser.selectedTab;
 
     let shownPromise = promisePanelShown(gContentWindow);
     gContentAPI.showMenu("appMenu");
     await shownPromise;
 
     isnot(gContentWindow.PanelUI.panel.state, "closed", "Panel should be open");
-    ok(gContentWindow.PanelUI.contents.children.length > 0, "Panel contents should have children");
+    if (!gContentWindow.gPhotonStructure) {
+      ok(gContentWindow.PanelUI.contents.children.length > 0, "Panel contents should have children");
+    }
     gContentAPI.hideHighlight();
     gContentAPI.hideMenu("appMenu");
     gTestTab = null;
 
     Services.obs.addObserver(onDOMWindowDestroyed, "dom-window-destroyed");
     gContentWindow.close();
 
     await windowDestroyedDeferred.promise;
--- a/browser/components/uitour/test/browser_fxa.js
+++ b/browser/components/uitour/test/browser_fxa.js
@@ -34,17 +34,19 @@ var tests = [
   taskify(async function test_highlight_accountStatus_loggedIn() {
     await setSignedInUser();
     let userData = await fxAccounts.getSignedInUser();
     isnot(userData, null, "Logged in now");
     gSync.updateAllUI(UIState.get());
     await showMenuPromise("appMenu");
     await showHighlightPromise("accountStatus");
     let highlight = document.getElementById("UITourHighlightContainer");
-    is(highlight.popupBoxObject.anchorNode.id, "PanelUI-fxa-avatar", "Anchored on avatar");
+    let photon = Services.prefs.getBoolPref("browser.photon.structure.enabled");
+    let expectedTarget = photon ? "appMenu-fxa-avatar" : "PanelUI-fxa-avatar";
+    is(highlight.popupBoxObject.anchorNode.id, expectedTarget, "Anchored on avatar");
     is(highlight.getAttribute("targetName"), "accountStatus", "Correct highlight target");
   }),
 ];
 
 // Helpers copied from browser_aboutAccounts.js
 // watch out - these will fire observers which if you aren't careful, may
 // interfere with the tests.
 function setSignedInUser(data) {