Bug 1418757 - new tab button isn't adjacent to the last tab when customizing in customize mode, r=jaws a=gchang
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 22 Nov 2017 13:49:07 +0000
changeset 445066 0bedbe646132065972b6c95bac1a411ecec8e10c
parent 445065 f40c3dc51eb391a100a82db630d252ee0ededc92
child 445067 5be79b1b3deb680b309fb99717a82c9737211ce0
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, gchang
bugs1418757
milestone58.0
Bug 1418757 - new tab button isn't adjacent to the last tab when customizing in customize mode, r=jaws a=gchang MozReview-Commit-ID: bQoNfDD2sX
browser/base/content/tabbrowser.xml
browser/components/customizableui/test/browser.ini
browser/components/customizableui/test/browser_newtab_button_customizemode.js
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -5855,20 +5855,33 @@
               break;
             }
           }
         ]]></body>
       </method>
 
       <method name="_updateNewTabVisibility">
         <body><![CDATA[
+          let isCustomizing = this.tabContainer.parentNode.getAttribute("customizing") == "true";
+
+          // Confusingly, the <tabs> are never wrapped in <toolbarpaletteitem>s in customize mode,
+          // but the other items will be.
           let sib = this.tabContainer.nextElementSibling;
+          if (isCustomizing) {
+            sib = sib && sib.firstElementChild;
+          }
           while (sib && sib.hidden) {
-            sib = sib.nextElementSibling;
-          }
+            if (isCustomizing) {
+              sib = sib.parentNode.nextElementSibling;
+              sib = sib && sib.firstElementChild;
+            } else {
+              sib = sib.nextElementSibling;
+            }
+          }
+
           const kAttr = "hasadjacentnewtabbutton";
           if (sib && sib.id == "new-tab-button") {
             this.tabContainer.setAttribute(kAttr, "true");
           } else {
             this.tabContainer.removeAttribute(kAttr);
           }
         ]]></body>
       </method>
--- a/browser/components/customizableui/test/browser.ini
+++ b/browser/components/customizableui/test/browser.ini
@@ -155,12 +155,13 @@ tags = fullscreen
 [browser_remove_customized_specials.js]
 [browser_switch_to_customize_mode.js]
 [browser_synced_tabs_menu.js]
 [browser_backfwd_enabled_post_customize.js]
 [browser_check_tooltips_in_navbar.js]
 [browser_editcontrols_update.js]
 subsuite = clipboard
 [browser_customization_context_menus.js]
+[browser_newtab_button_customizemode.js]
 [browser_open_from_popup.js]
 [browser_sidebar_toggle.js]
 [browser_remote_tabs_button.js]
 [browser_widget_animation.js]
new file mode 100644
--- /dev/null
+++ b/browser/components/customizableui/test/browser_newtab_button_customizemode.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests in this file check that user customizations to the tabstrip show
+ * the correct type of new tab button while the tabstrip isn't overflowing.
+ */
+
+const kGlobalNewTabButton = document.getElementById("new-tab-button");
+const kInnerNewTabButton = document.getAnonymousElementByAttribute(gBrowser.tabContainer, "anonid", "tabs-newtab-button");
+
+function assertNewTabButton(which) {
+  if (which == "global") {
+    isnot(kGlobalNewTabButton.getBoundingClientRect().width, 0,
+      "main new tab button should be visible");
+    is(kInnerNewTabButton.getBoundingClientRect().width, 0,
+      "inner new tab button should be hidden");
+  } else if (which == "inner") {
+    is(kGlobalNewTabButton.getBoundingClientRect().width, 0,
+      "main new tab button should be hidden");
+    isnot(kInnerNewTabButton.getBoundingClientRect().width, 0,
+      "inner new tab button should be visible");
+  } else {
+    ok(false, "Unexpected button: " + which);
+  }
+}
+
+/**
+ * Add and remove items *after* the new tab button in customize mode.
+ */
+add_task(async function addremove_after_newtab_customizemode() {
+  await startCustomizing();
+  simulateItemDrag(document.getElementById("home-button"),
+                   kGlobalNewTabButton.parentNode.nextElementSibling);
+  ok(gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should have the adjacent newtab attribute");
+  await endCustomizing();
+  assertNewTabButton("inner");
+
+  await startCustomizing();
+  simulateItemDrag(document.getElementById("home-button"),
+    document.getElementById("stop-reload-button").parentNode.nextElementSibling);
+  ok(gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should still have the adjacent newtab attribute");
+  await endCustomizing();
+  assertNewTabButton("inner");
+  ok(CustomizableUI.inDefaultState, "Should be in default state");
+});
+
+/**
+ * Add and remove items *before* the new tab button in customize mode.
+ */
+add_task(async function addremove_before_newtab_customizemode() {
+  await startCustomizing();
+  simulateItemDrag(document.getElementById("home-button"), kGlobalNewTabButton);
+  ok(!gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should no longer have the adjacent newtab attribute");
+  await endCustomizing();
+  assertNewTabButton("global");
+  await startCustomizing();
+  simulateItemDrag(document.getElementById("home-button"),
+    document.getElementById("stop-reload-button").parentNode.nextElementSibling);
+  ok(gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should have the adjacent newtab attribute again");
+  await endCustomizing();
+  assertNewTabButton("inner");
+  ok(CustomizableUI.inDefaultState, "Should be in default state");
+});
+
+/**
+ * Add and remove items *after* the new tab button outside of customize mode.
+ */
+add_task(async function addremove_after_newtab_api() {
+  CustomizableUI.addWidgetToArea("home-button", "TabsToolbar");
+  ok(gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should have the adjacent newtab attribute");
+  assertNewTabButton("inner");
+
+  CustomizableUI.reset();
+  ok(gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should still have the adjacent newtab attribute");
+  assertNewTabButton("inner");
+  ok(CustomizableUI.inDefaultState, "Should be in default state");
+
+});
+
+/**
+ * Add and remove items *before* the new tab button outside of customize mode.
+ */
+add_task(async function addremove_before_newtab_api() {
+  let index = CustomizableUI.getWidgetIdsInArea("TabsToolbar").indexOf("new-tab-button");
+  CustomizableUI.addWidgetToArea("home-button", "TabsToolbar", index);
+  ok(!gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should no longer have the adjacent newtab attribute");
+  assertNewTabButton("global");
+
+  CustomizableUI.removeWidgetFromArea("home-button");
+  ok(gBrowser.tabContainer.hasAttribute("hasadjacentnewtabbutton"),
+    "tabs should have the adjacent newtab attribute again");
+  assertNewTabButton("inner");
+
+  CustomizableUI.reset();
+  ok(CustomizableUI.inDefaultState, "Should be in default state");
+});