Commit c758f080 authored by Jonathan Sudiaman's avatar Jonathan Sudiaman
Browse files

Bug 1892429 - Create an expanded sidebar state... 

Bug 1892429 - Create an expanded sidebar state r=sidebar-reviewers,fluent-reviewers,kcochrane,sclements,extension-reviewers,robwu

Adds an `expanded` property, which, if enabled, shows labels along with their respective icons within the sidebar menu. Currently, this property is not controllable from the UI. As I understand it, the follow-up bugs are responsible for addressing that.

https://treeherder.mozilla.org/#/jobs?repo=try&revision=f269729808eed19051bea5fe4eb41550ff94ce03

Differential Revision: https://phabricator.services.mozilla.com/D210187
parent a4aa973d

browser/components/customizableui/CustomizableWidgets.sys.mjs

+6 −2
Original line number Diff line number Diff line
@@ -281,8 +281,12 @@ export const CustomizableWidgets = [ 
    defaultArea: "nav-bar",

    _introducedByPref: "sidebar.revamp",

    onCommand(aEvent) {

      let win = aEvent.target.ownerGlobal;

      win.SidebarController.toggle();

      let { SidebarController } = aEvent.target.ownerGlobal;

      if (SidebarController.sidebarRevampEnabled) {

        SidebarController.toggleExpanded();

      } else {

        SidebarController.toggle();

      }

    },

    onCreated(aNode) {

      // Add an observer so the button is checked while the sidebar is open

browser/components/extensions/parent/ext-sidebarAction.js

+22 −7
Original line number Diff line number Diff line
@@ -122,9 +122,9 @@ this.sidebarAction = class extends ExtensionAPI { 
      return;

    }

    this.panel = details.panel;

    let { SidebarController } = window;

    let { SidebarController, devicePixelRatio } = window;

    SidebarController.registerExtension(this.id, {

      icon: this.getMenuIcon(details),

      ...this.getMenuIcon(details, devicePixelRatio),

      menuId: this.menuId,

      title: details.title,

      extensionId: this.extension.id,
@@ -137,13 +137,28 @@ this.sidebarAction = class extends ExtensionAPI { 
    });

  }



  getMenuIcon(details) {

  /**

   * Retrieve the icon to be rendered in sidebar menus.

   *

   * @param {object} details

   * @param {object} details.icon

   *   Extension icons.

   * @param {number} scale

   *   Scaling factor of the icon's size.

   * @returns {{ icon: string; iconUrl: string }}

   */

  getMenuIcon({ icon }, scale) {

    let getIcon = size =>

      IconDetails.escapeUrl(

        IconDetails.getPreferredIcon(details.icon, this.extension, size).icon

        IconDetails.getPreferredIcon(icon, this.extension, size).icon

      );



    return `image-set(url("${getIcon(16)}"), url("${getIcon(32)}") 2x)`;

    const iconUrl = getIcon(16 * scale);

    // TODO Bug 1898257 - Only return iconUrl here, remove usages of icon.

    return {

      icon: `image-set(url("${getIcon(16)}"), url("${getIcon(32)}") 2x)`,

      iconUrl,

    };

  }



  /**
@@ -155,7 +170,7 @@ this.sidebarAction = class extends ExtensionAPI { 
   *        Tab specific sidebar configuration.

   */

  updateButton(window, tabData) {

    let { document, SidebarController } = window;

    let { document, SidebarController, devicePixelRatio } = window;

    let title = tabData.title || this.extension.name;

    if (!document.getElementById(this.menuId)) {

      // Menu items are added when new windows are opened, or from onReady (when
@@ -170,7 +185,7 @@ this.sidebarAction = class extends ExtensionAPI { 
    SidebarController.setExtensionAttributes(

      this.id,

      {

        icon: this.getMenuIcon(tabData),

        ...this.getMenuIcon(tabData, devicePixelRatio),

        label: title,

      },

      urlChanged

browser/components/extensions/test/browser/browser_ext_sidebarAction.js

+45 −5
Original line number Diff line number Diff line
@@ -7,7 +7,10 @@ requestLongerTimeout(2); 
let extData = {

  manifest: {

    sidebar_action: {

      default_icon: "default.png",

      default_icon: {

        16: "icon.png",

        32: "icon@2x.png",

      },

      default_panel: "sidebar.html",

    },

  },
@@ -31,8 +34,9 @@ let extData = { 
      };

    },



    "default.png": imageBuffer,

    "1.png": imageBuffer,

    "icon.png": imageBuffer,

    "icon@2x.png": imageBuffer,

    "updated-icon.png": imageBuffer,

  },



  background: function () {
@@ -71,6 +75,13 @@ async function sendMessage(ext, msg, data = undefined) { 
  await ext.awaitMessage("done");

}



add_setup(() =>

  SpecialPowers.pushPrefEnv({

    set: [["layout.css.devPixelsPerPx", 1]],

  })

);

registerCleanupFunction(() => SpecialPowers.popPrefEnv());



add_task(async function sidebar_initial_install() {

  ok(

    document.getElementById("sidebar-box").hidden,
@@ -325,10 +336,11 @@ add_task(async function sidebar_switcher_panel_icon_update() { 
  const item = SidebarController._switcherPanel.querySelector(

    ".webextension-menuitem"

  );

  let iconUrl = `moz-extension://${extension.uuid}/default.png`;

  let iconUrl = `moz-extension://${extension.uuid}/icon.png`;

  let icon2xUrl = `moz-extension://${extension.uuid}/icon@2x.png`;

  is(

    item.style.getPropertyValue("--webextension-menuitem-image"),

    `image-set(url("${iconUrl}"), url("${iconUrl}") 2x)`,

    `image-set(url("${iconUrl}"), url("${icon2xUrl}") 2x)`,

    "Extension has the correct icon."

  );

  SidebarController.hide();
@@ -347,3 +359,31 @@ add_task(async function sidebar_switcher_panel_icon_update() { 


  await extension.unload();

});



add_task(async function sidebar_switcher_panel_hidpi_icon() {

  await SpecialPowers.pushPrefEnv({

    set: [["layout.css.devPixelsPerPx", 2]],

  });



  info("Load extension");

  const extension = ExtensionTestUtils.loadExtension(getExtData());

  await extension.startup();



  info("Test extension's sidebar is opened on install");

  await extension.awaitMessage("sidebar");

  await sendMessage(extension, "isOpen", { result: true });



  const item = SidebarController._switcherPanel.querySelector(

    ".webextension-menuitem"

  );

  let iconUrl = `moz-extension://${extension.uuid}/icon.png`;

  let icon2xUrl = `moz-extension://${extension.uuid}/icon@2x.png`;

  is(

    item.style.getPropertyValue("--webextension-menuitem-image"),

    `image-set(url("${iconUrl}"), url("${icon2xUrl}") 2x)`,

    "Extension has the correct icon for HiDPI displays."

  );



  await extension.unload();

  await SpecialPowers.popPrefEnv();

});

browser/components/sidebar/browser-sidebar.js

+31 −35
Original line number Diff line number Diff line
@@ -38,7 +38,7 @@ var SidebarController = { 
          keyId: "key_gotoHistory",

          menuL10nId: "menu-view-history-button",

          revampL10nId: "sidebar-menu-history",

          icon: `url("chrome://browser/content/firefoxview/view-history.svg")`,

          iconUrl: "chrome://browser/content/firefoxview/view-history.svg",

        }),

      ],

      [
@@ -52,7 +52,7 @@ var SidebarController = { 
          classAttribute: "sync-ui-item",

          menuL10nId: "menu-view-synced-tabs-sidebar",

          revampL10nId: "sidebar-menu-synced-tabs",

          icon: `url("chrome://browser/content/firefoxview/view-syncedtabs.svg")`,

          iconUrl: "chrome://browser/content/firefoxview/view-syncedtabs.svg",

        }),

      ],

      [
@@ -64,7 +64,7 @@ var SidebarController = { 
          keyId: "viewBookmarksSidebarKb",

          menuL10nId: "menu-view-bookmarks",

          revampL10nId: "sidebar-menu-bookmarks",

          icon: `url("chrome://browser/skin/bookmark-hollow.svg")`,

          iconUrl: "chrome://browser/skin/bookmark-hollow.svg",

          disabled: true,

        }),

      ],
@@ -89,7 +89,7 @@ var SidebarController = { 
        this.makeSidebar({

          url: "chrome://browser/content/sidebar/sidebar-customize.html",

          revampL10nId: "sidebar-menu-customize",

          icon: `url("chrome://browser/skin/preferences/category-general.svg")`,

          iconUrl: "chrome://browser/skin/preferences/category-general.svg",

        })

      );

    }
@@ -184,6 +184,7 @@ var SidebarController = { 
      await import("chrome://browser/content/sidebar/sidebar-main.mjs");

      document.getElementById("sidebar-main").hidden = false;

      document.getElementById("sidebar-header").hidden = true;

      this._sidebarMain = document.querySelector("sidebar-main");

    } else {

      this._switcherTarget.addEventListener("command", () => {

        this.toggleSwitcherPanel();
@@ -580,6 +581,13 @@ var SidebarController = { 
    return this.show(commandID, triggerNode);

  },



  /**

   * Toggle the expansion state of the sidebar.

   */

  toggleExpanded() {

    this._sidebarMain.expanded = !this._sidebarMain.expanded;

  },



  _loadSidebarExtension(commandID) {

    let sidebar = this.sidebars.get(commandID);

    if (typeof sidebar.onload === "function") {
@@ -608,6 +616,7 @@ var SidebarController = { 
      // Update existing extension

      let extensionToUpdate = this.toolsAndExtensions.get(commandID);

      extensionToUpdate.icon = extension.icon;

      extensionToUpdate.iconUrl = extension.iconUrl;

      extensionToUpdate.tooltiptext = extension.label;

      window.dispatchEvent(new CustomEvent("SidebarItemChanged"));

    } else {
@@ -616,6 +625,7 @@ var SidebarController = { 
        view: commandID,

        extensionId: extension.extensionId,

        icon: extension.icon,

        iconUrl: extension.iconUrl,

        tooltiptext: extension.label,

        disabled: false,

      });
@@ -639,6 +649,7 @@ var SidebarController = { 
      keyId: `ext-key-id-${commandID}`,

      label: props.title,

      icon: props.icon,

      iconUrl: props.iconUrl,

      classAttribute: "menuitem-iconic webextension-menuitem",

      // The following properties are specific to extensions

      extensionId: props.extensionId,
@@ -662,7 +673,7 @@ var SidebarController = { 
    }

    this._setExtensionAttributes(

      commandID,

      { icon: props.icon, label: props.title },

      { icon: props.icon, iconUrl: props.iconUrl, label: props.title },

      sidebar

    );

  },
@@ -697,6 +708,7 @@ var SidebarController = { 
   * @param {string} commandID

   * @param {object} attributes

   * @param {string} attributes.icon

   * @param {string} attributes.iconUrl

   * @param {string} attributes.label

   * @param {boolean} needsRefresh

   */
@@ -708,11 +720,12 @@ var SidebarController = { 


  _setExtensionAttributes(

    commandID,

    { icon, label },

    { icon, iconUrl, label },

    sidebar,

    needsRefresh = false

  ) {

    sidebar.icon = icon;

    sidebar.iconUrl = iconUrl;

    sidebar.label = label;



    const updateAttributes = el => {
@@ -746,8 +759,9 @@ var SidebarController = { 
      if (Object.hasOwn(sidebar, "extensionId")) {

        extensions.push({

          commandID,

          view: commandID,

          extensionId: sidebar.extensionId,

          icon: sidebar.icon,

          iconUrl: sidebar.iconUrl,

          tooltiptext: sidebar.label,

          disabled: false,

        });
@@ -762,39 +776,21 @@ var SidebarController = { 
   * @returns {Array}

   */

  getTools() {

    const tools = [];

    const toolIds = [

      "viewHistorySidebar",

      "viewTabsSidebar",

      "viewBookmarksSidebar",

    ];

    for (const [commandID, sidebar] of this.sidebars.entries()) {

      if (toolIds.includes(commandID)) {

        tools.push({

    return toolIds.map(commandID => {

      const sidebar = this.sidebars.get(commandID);

      return {

        commandID,

        view: commandID,

          icon: sidebar.icon,

        iconUrl: sidebar.iconUrl,

        l10nId: sidebar.revampL10nId,

        disabled: sidebar.disabled ?? false,

      };

    });

      }

    }

    return tools;

  },



  /**

   * Retrieve the customize sidebar entry

   *

   * @returns {object}

   */

  getCustomize() {

    let customize = [];

    for (const [commandID, sidebar] of this.sidebars.entries()) {

      if (commandID === "viewCustomizeSidebar") {

        customize.push({ commandID, ...sidebar });

      }

    }

    return customize;

  },



  /**

browser/components/sidebar/sidebar-customize.css

+0 −11
Original line number Diff line number Diff line
@@ -42,21 +42,14 @@ 
      gap: var(--space-small);

      font-size: 0.9em;

    }



    .icon {

      background-image: var(--tool-icon);

    }

  }

}



.icon {

  -moz-context-properties: fill;

  fill: currentColor;

  background-size: var(--icon-size-default);

  width: var(--icon-size-default);

  height: var(--icon-size-default);

  background-position: center;

  background-repeat: no-repeat;

}



.customize-extensions {
@@ -71,9 +64,5 @@ 
    gap: var(--space-medium);

    align-items: center;

    font-size: 0.9em;



    .icon {

      background-image: var(--extension-icon);

    }

  }

}