Bug 1451242 - Use this.$ instead of this.document.getElementById in CustomizeMode.jsm r=Gijs
authorui.manish <1991manish.kumar@gmail.com>
Thu, 05 Apr 2018 10:48:04 +0200
changeset 777897 2fc4f5aef58f3a1552b66221197ccc9c909de0f6
parent 777896 739f1e73cac0bec6df02cd62f9067c31b15851b9
child 777898 404bbf763428f34cc5d20fbc0c634eb02c5cceab
push id105320
push userbmo:dharvey@mozilla.com
push dateThu, 05 Apr 2018 13:17:43 +0000
reviewersGijs
bugs1451242
milestone61.0a1
Bug 1451242 - Use this.$ instead of this.document.getElementById in CustomizeMode.jsm r=Gijs
browser/components/customizableui/CustomizeMode.jsm
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -161,17 +161,17 @@ CustomizeMode.prototype = {
     if (this._customizing) {
       this.exit();
     } else {
       this.enter();
     }
   },
 
   _updateLWThemeButtonIcon() {
-    let lwthemeButton = this.document.getElementById("customization-lwtheme-button");
+    let lwthemeButton = this.$("customization-lwtheme-button");
     let lwthemeIcon = this.document.getAnonymousElementByAttribute(lwthemeButton,
                         "class", "button-icon");
     lwthemeIcon.style.backgroundImage = LightweightThemeManager.currentTheme ?
       "url(" + LightweightThemeManager.currentTheme.iconURL + ")" : "";
   },
 
   setTab(aTab) {
     if (gTab == aTab) {
@@ -257,17 +257,17 @@ CustomizeMode.prototype = {
 
     let window = this.window;
     let document = this.document;
 
     this._handler.isEnteringCustomizeMode = true;
 
     // Always disable the reset button at the start of customize mode, it'll be re-enabled
     // if necessary when we finish entering:
-    let resetButton = this.document.getElementById("customization-reset-button");
+    let resetButton = this.$("customization-reset-button");
     resetButton.setAttribute("disabled", "true");
 
     (async () => {
       // We shouldn't start customize mode until after browser-delayed-startup has finished:
       if (!this.window.gBrowserInit.delayedStartupFinished) {
         await new Promise(resolve => {
           let delayedStartupObserver = aSubject => {
             if (aSubject == this.window) {
@@ -393,18 +393,18 @@ CustomizeMode.prototype = {
     this.document.removeEventListener("keypress", this);
 
     let window = this.window;
     let document = this.document;
 
     this.togglePong(false);
 
     // Disable the reset and undo reset buttons while transitioning:
-    let resetButton = this.document.getElementById("customization-reset-button");
-    let undoResetButton = this.document.getElementById("customization-undo-reset-button");
+    let resetButton = this.$("customization-reset-button");
+    let undoResetButton = this.$("customization-undo-reset-button");
     undoResetButton.hidden = resetButton.disabled = true;
 
     this._transitioning = true;
 
     (async () => {
       await this.depopulatePalette();
 
       await this._doTransition(false);
@@ -648,17 +648,17 @@ CustomizeMode.prototype = {
     if (widgetAnimationPromise) {
       if (aNode.parentNode && aNode.parentNode.id.startsWith("wrapper-")) {
         aNode.parentNode.classList.remove("animate-out");
       } else {
         aNode.classList.remove("animate-out");
       }
     }
     if (gCosmeticAnimationsEnabled) {
-      let overflowButton = this.document.getElementById("nav-bar-overflow-button");
+      let overflowButton = this.$("nav-bar-overflow-button");
       BrowserUtils.setToolbarButtonHeightProperty(overflowButton).then(() => {
         overflowButton.setAttribute("animate", "true");
         overflowButton.addEventListener("animationend", function onAnimationEnd(event) {
           if (event.animationName.startsWith("overflow-animation")) {
             this.setAttribute("fade", "true");
           } else if (event.animationName == "overflow-fade") {
             this.removeEventListener("animationend", onAnimationEnd);
             this.removeAttribute("animate");
@@ -944,17 +944,17 @@ CustomizeMode.prototype = {
       toolbarItem.checked = true;
     }
 
     if (aWrapper.hasAttribute("itemcommand")) {
       let commandID = aWrapper.getAttribute("itemcommand");
       toolbarItem.setAttribute("command", commandID);
 
       // XXX Bug 309953 - toolbarbuttons aren't in sync with their commands after customizing
-      let command = this.document.getElementById(commandID);
+      let command = this.$(commandID);
       if (command && command.hasAttribute("disabled")) {
         toolbarItem.setAttribute("disabled", command.getAttribute("disabled"));
       }
     }
 
     let wrappedContext = toolbarItem.getAttribute("wrapped-context");
     if (wrappedContext) {
       let contextAttrName = toolbarItem.getAttribute("wrapped-contextAttrName");
@@ -1012,17 +1012,17 @@ CustomizeMode.prototype = {
     for (let area of CustomizableUI.areas) {
       await this._wrapToolbarItem(area);
     }
   },
 
   _addDragHandlers(aTarget) {
     // Allow dropping on the padding of the arrow panel.
     if (aTarget.id == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL) {
-      aTarget = this.document.getElementById("customization-panelHolder");
+      aTarget = this.$("customization-panelHolder");
     }
     aTarget.addEventListener("dragstart", this, true);
     aTarget.addEventListener("dragover", this, true);
     aTarget.addEventListener("dragexit", this, true);
     aTarget.addEventListener("drop", this, true);
     aTarget.addEventListener("dragend", this, true);
   },
 
@@ -1033,17 +1033,17 @@ CustomizeMode.prototype = {
       }
     }
   },
 
   _removeDragHandlers(aTarget) {
     // Remove handler from different target if it was added to
     // allow dropping on the padding of the arrow panel.
     if (aTarget.id == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL) {
-      aTarget = this.document.getElementById("customization-panelHolder");
+      aTarget = this.$("customization-panelHolder");
     }
     aTarget.removeEventListener("dragstart", this, true);
     aTarget.removeEventListener("dragover", this, true);
     aTarget.removeEventListener("dragexit", this, true);
     aTarget.removeEventListener("drop", this, true);
     aTarget.removeEventListener("dragend", this, true);
   },
 
@@ -1080,17 +1080,17 @@ CustomizeMode.prototype = {
       // Persist the currentset attribute directly on hardcoded toolbars.
       document.persist(toolbar.id, "currentset");
     }
   },
 
   reset() {
     this.resetting = true;
     // Disable the reset button temporarily while resetting:
-    let btn = this.document.getElementById("customization-reset-button");
+    let btn = this.$("customization-reset-button");
     BrowserUITelemetry.countCustomizationEvent("reset");
     btn.disabled = true;
     return (async () => {
       await this.depopulatePalette();
       await this._unwrapToolbarItems();
 
       CustomizableUI.reset();
 
@@ -1195,27 +1195,27 @@ CustomizeMode.prototype = {
       if (widget.provider == CustomizableUI.PROVIDER_API) {
         let paletteItem = this.makePaletteItem(widget, "palette");
         this.visiblePalette.appendChild(paletteItem);
       }
     }
   },
 
   onWidgetDestroyed(aWidgetId) {
-    let wrapper = this.document.getElementById("wrapper-" + aWidgetId);
+    let wrapper = this.$("wrapper-" + aWidgetId);
     if (wrapper) {
       wrapper.remove();
     }
   },
 
   onWidgetAfterCreation(aWidgetId, aArea) {
     // If the node was added to an area, we would have gotten an onWidgetAdded notification,
     // plus associated DOM change notifications, so only do stuff for the palette:
     if (!aArea) {
-      let widgetNode = this.document.getElementById(aWidgetId);
+      let widgetNode = this.$(aWidgetId);
       if (widgetNode) {
         this.wrapToolbarItem(widgetNode, "palette");
       } else {
         let widget = CustomizableUI.getWidget(aWidgetId);
         this.visiblePalette.appendChild(this.makePaletteItem(widget, "palette"));
       }
     }
   },
@@ -1457,18 +1457,18 @@ CustomizeMode.prototype = {
         panel.insertBefore(button, footer);
       }
       let hideRecommendedLabel = (footer.previousSibling == recommendedLabel);
       recommendedLabel.hidden = hideRecommendedLabel;
     });
   },
 
   _clearLWThemesMenu(panel) {
-    let footer = this.document.getElementById("customization-lwtheme-menu-footer");
-    let recommendedLabel = this.document.getElementById("customization-lwtheme-menu-recommended");
+    let footer = this.$("customization-lwtheme-menu-footer");
+    let recommendedLabel = this.$("customization-lwtheme-menu-recommended");
     for (let element of [footer, recommendedLabel]) {
       while (element.previousSibling &&
              element.previousSibling.localName == "toolbarbutton") {
         element.previousSibling.remove();
       }
     }
 
     // Workaround for bug 1059934
@@ -1482,34 +1482,34 @@ CustomizeMode.prototype = {
       this._updateUndoResetButton();
       this._updateEmptyPaletteNotice();
     }
     CustomizableUI.dispatchToolboxEvent("customizationchange");
   },
 
   _updateEmptyPaletteNotice() {
     let paletteItems = this.visiblePalette.getElementsByTagName("toolbarpaletteitem");
-    let whimsyButton = this.document.getElementById("whimsy-button");
+    let whimsyButton = this.$("whimsy-button");
 
     if (paletteItems.length == 1 &&
         paletteItems[0].id.includes("wrapper-customizableui-special-spring")) {
       whimsyButton.hidden = false;
     } else {
       this.togglePong(false);
       whimsyButton.hidden = true;
     }
   },
 
   _updateResetButton() {
-    let btn = this.document.getElementById("customization-reset-button");
+    let btn = this.$("customization-reset-button");
     btn.disabled = CustomizableUI.inDefaultState;
   },
 
   _updateUndoResetButton() {
-    let undoResetButton =  this.document.getElementById("customization-undo-reset-button");
+    let undoResetButton =  this.$("customization-undo-reset-button");
     undoResetButton.hidden = !CustomizableUI.canUndoReset;
   },
 
   handleEvent(aEvent) {
     switch (aEvent.type) {
       case "toolbarvisibilitychange":
         this._onToolbarVisibilityChange(aEvent);
         break;
@@ -1551,36 +1551,36 @@ CustomizeMode.prototype = {
    */
   _setupPaletteDragging() {
     this._addDragHandlers(this.visiblePalette);
 
     this.paletteDragHandler = (aEvent) => {
       let originalTarget = aEvent.originalTarget;
       if (this._isUnwantedDragDrop(aEvent) ||
           this.visiblePalette.contains(originalTarget) ||
-          this.document.getElementById("customization-panelHolder").contains(originalTarget)) {
+          this.$("customization-panelHolder").contains(originalTarget)) {
         return;
       }
       // We have a dragover/drop on the palette.
       if (aEvent.type == "dragover") {
         this._onDragOver(aEvent, this.visiblePalette);
       } else {
         this._onDragDrop(aEvent, this.visiblePalette);
       }
     };
-    let contentContainer = this.document.getElementById("customization-content-container");
+    let contentContainer = this.$("customization-content-container");
     contentContainer.addEventListener("dragover", this.paletteDragHandler, true);
     contentContainer.addEventListener("drop", this.paletteDragHandler, true);
   },
 
   _teardownPaletteDragging() {
     DragPositionManager.stop();
     this._removeDragHandlers(this.visiblePalette);
 
-    let contentContainer = this.document.getElementById("customization-content-container");
+    let contentContainer = this.$("customization-content-container");
     contentContainer.removeEventListener("dragover", this.paletteDragHandler, true);
     contentContainer.removeEventListener("drop", this.paletteDragHandler, true);
     delete this.paletteDragHandler;
   },
 
   observe(aSubject, aTopic, aData) {
     switch (aTopic) {
       case "nsPref:changed":
@@ -2108,17 +2108,17 @@ CustomizeMode.prototype = {
       let draggedItem = window.document.getElementById(aDraggedItemId);
       if (aAreaType == "palette") {
         this._setGridDragActive(aItem, draggedItem, aValue);
       } else {
         let targetArea = this._getCustomizableParent(aItem);
         let makeSpaceImmediately = false;
         if (!gDraggingInToolbars.has(targetArea.id)) {
           gDraggingInToolbars.add(targetArea.id);
-          let draggedWrapper = this.document.getElementById("wrapper-" + aDraggedItemId);
+          let draggedWrapper = this.$("wrapper-" + aDraggedItemId);
           let originArea = this._getCustomizableParent(draggedWrapper);
           makeSpaceImmediately = originArea == targetArea;
         }
         let propertyToMeasure = aAreaType == "toolbar" ? "width" : "height";
         // Calculate width/height of the item when it'd be dropped in this position.
         let borderWidth = this._getDragItemSize(aItem, draggedItem)[propertyToMeasure];
         let layoutSide = aAreaType == "toolbar" ? "Inline" : "Block";
         let prop, otherProp;
@@ -2179,17 +2179,17 @@ CustomizeMode.prototype = {
       // Otherwise, clear everything out:
       let positionManager = DragPositionManager.getManagerForArea(currentArea);
       positionManager.clearPlaceholders(currentArea, aNoTransition);
     }
   },
 
   _setGridDragActive(aDragOverNode, aDraggedItem, aValue) {
     let targetArea = this._getCustomizableParent(aDragOverNode);
-    let draggedWrapper = this.document.getElementById("wrapper-" + aDraggedItem.id);
+    let draggedWrapper = this.$("wrapper-" + aDraggedItem.id);
     let originArea = this._getCustomizableParent(draggedWrapper);
     let positionManager = DragPositionManager.getManagerForArea(targetArea);
     let draggedSize = this._getDragItemSize(aDragOverNode, aDraggedItem);
     positionManager.insertPlaceholder(targetArea, aDragOverNode, draggedSize,
                                       originArea == targetArea);
   },
 
   _getDragItemSize(aDragOverNode, aDraggedItem) {
@@ -2357,23 +2357,23 @@ CustomizeMode.prototype = {
 
   _checkForDownloadsClick(event) {
     if (event.target.closest("#wrapper-downloads-button") && event.button == 0) {
       event.view.gCustomizeMode._showDownloadsAutoHidePanel();
     }
   },
 
   _setupDownloadAutoHideToggle() {
-    this.document.getElementById(kDownloadAutohidePanelId).removeAttribute("hidden");
+    this.$(kDownloadAutohidePanelId).removeAttribute("hidden");
     this.window.addEventListener("click", this._checkForDownloadsClick, true);
   },
 
   _teardownDownloadAutoHideToggle() {
     this.window.removeEventListener("click", this._checkForDownloadsClick, true);
-    this.document.getElementById(kDownloadAutohidePanelId).hidePopup();
+    this.$(kDownloadAutohidePanelId).hidePopup();
   },
 
   _maybeMoveDownloadsButtonToNavBar() {
     // If the user toggled the autohide checkbox while the item was in the
     // palette, and hasn't moved it since, move the item to the default
     // location in the navbar for them.
     if (!CustomizableUI.getPlacementOfWidget("downloads-button") &&
         this._moveDownloadsButtonToNavBar &&
@@ -2453,17 +2453,17 @@ CustomizeMode.prototype = {
     // Ensure we move the button (back) after the user leaves customize mode.
     event.view.gCustomizeMode._moveDownloadsButtonToNavBar = checkbox.checked;
   },
 
   togglePong(enabled) {
     // It's possible we're toggling for a reason other than hitting
     // the button (we might be exiting, for example), so make sure that
     // the state and checkbox are in sync.
-    let whimsyButton = this.document.getElementById("whimsy-button");
+    let whimsyButton = this.$("whimsy-button");
     whimsyButton.checked = enabled;
 
     if (enabled) {
       this.visiblePalette.setAttribute("whimsypong", "true");
       this.pongArena.hidden = false;
       if (!this.uninitWhimsy) {
         this.uninitWhimsy = this.whimsypong();
       }