Commit f475940c authored by Cristian Tuns's avatar Cristian Tuns
Browse files

Backed out changeset b6894cf5a5c7 (bug 1767473) for causing mochitest failures...

Backed out changeset b6894cf5a5c7 (bug 1767473) for causing mochitest failures on browser_firefoxview_tab.js CLOSED TREE
parent e9a52cef
Loading
Loading
Loading
Loading
+6 −28
Original line number Diff line number Diff line
@@ -6,13 +6,12 @@ body {
  display: flex;
  align-items: stretch;
  padding-block: 40px 80px;
  font: message-box;
  font-size: 1.5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif;
}

h1 {
  font-weight: 500;
  font-size: 1.5em;
  font-size: 24px;
  font-weight: 700;
}

body > nav {
@@ -78,7 +77,6 @@ body > main > aside {

.page-section-header > .section-description {
  grid-area: desc;
  color: var(--in-content-deemphasized-text)
}

.setup-step > h2 {
@@ -103,7 +101,7 @@ body > main > aside {

.closed-tab-li {
  display: grid;
  grid-template-columns: min-content repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
  column-gap: 16px;
  padding: 8px;
  cursor: pointer;
@@ -121,7 +119,6 @@ body > main > aside {
.closed-tab-li-title {
  grid-column: span 5;
  padding-inline-start: 2px;
  font-weight: 500;
}

.closed-tab-li-url {
@@ -133,23 +130,14 @@ body > main > aside {
  text-align: end;
}

.closed-tab-li-url, .closed-tab-li-time {
  color: var(--in-content-deemphasized-text);
  font-weight: 400;
}

.closed-tab-li-title, .closed-tab-li-url {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  -moz-context-properties: fill;
  fill: currentColor;
  height: 16px;
  width: 16px;
  margin-top: 10px;
}

@@ -164,13 +152,3 @@ body > main > aside {
.icon.history {
  background-image: url('chrome://browser/skin/history.svg');
}

.favicon {
  background-size: cover;
  margin: 2px;
}

.favicon, .icon {
  width: 16px;
  height: 16px;
}
+1 −1
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'; img-src data: chrome:;">
    <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'">
    <meta name="color-scheme" content="light dark">
    <title data-l10n-id="firefoxview-page-title"></title>
    <link rel="localization" href="branding/brand.ftl">
+0 −1
Original line number Diff line number Diff line
@@ -29,5 +29,4 @@ window.addEventListener("load", () => {

window.addEventListener("unload", () => {
  tabsSetupFlowManager?.uninit();
  document.getElementById("recently-closed-tabs-container").cleanup();
});
+47 −184
Original line number Diff line number Diff line
@@ -14,19 +14,8 @@ XPCOMUtils.defineLazyModuleGetters(globalThis, {
});

const relativeTimeFormat = new Services.intl.RelativeTimeFormat(undefined, {});
const SS_NOTIFY_CLOSED_OBJECTS_CHANGED = "sessionstore-closed-objects-changed";

function getWindow() {
  return window.browsingContext.embedderWindowGlobal.browsingContext.window;
}

class RecentlyClosedTabsList extends HTMLElement {
  constructor() {
    super();
    this.maxTabsLength = 25;
    this.closedTabsData = [];
  }

  get tabsList() {
    return this.querySelector("ol");
  }
@@ -40,16 +29,18 @@ class RecentlyClosedTabsList extends HTMLElement {

  connectedCallback() {
    this.addEventListener("click", this);
    this.addEventListener("keydown", this);
  }

  handleEvent(event) {
    if (
      event.type == "click" ||
      (event.type == "keydown" && event.keyCode == KeyEvent.DOM_VK_RETURN)
    ) {
      this.openTabAndUpdate(event);
    if (event.type == "click") {
      const item = event.target.closest(".closed-tab-li");
      event.preventDefault();
      this.openTab(item.dataset.targetURI);
    }
  }

  getWindow() {
    return window.windowRoot.ownerGlobal;
  }

  convertTimestamp(timestamp) {
@@ -88,145 +79,66 @@ class RecentlyClosedTabsList extends HTMLElement {
    return displayHost.length ? displayHost : uriString;
  }

  getTabStateValue(tab, key) {
    let value = "";
  getTargetURI(tab) {
    let targetURI = "";
    const tabEntries = tab.state.entries;
    const activeIndex = tabEntries.length - 1;

    if (activeIndex >= 0 && tabEntries[activeIndex]) {
      value = tabEntries[activeIndex][key];
      targetURI = tabEntries[activeIndex].url;
    }

    return value;
    return targetURI;
  }

  openTabAndUpdate(event) {
    event.preventDefault();
    const item = event.target.closest(".closed-tab-li");
    const index = [...this.tabsList.children].indexOf(item);

    SessionStore.undoCloseTab(getWindow(), index);
    this.tabsList.removeChild(item);
  openTab(targetURI) {
    window.open(targetURI, "_blank");
  }

  initiateTabsList() {
    let closedTabs = SessionStore.getClosedTabData(getWindow());
    closedTabs = closedTabs.slice(0, this.maxTabsLength);
    this.closedTabsData = closedTabs;
  generateTabs() {
    let closedTabs = SessionStore.getClosedTabData(this.getWindow());
    closedTabs = closedTabs.slice(0, 25);

    for (const tab of closedTabs) {
      const li = this.generateListItem(tab);
      this.tabsList.append(li);
    }
    this.tabsList.hidden = false;
  }

  updateTabsList() {
    let newClosedTabs = SessionStore.getClosedTabData(getWindow());
    newClosedTabs = newClosedTabs.slice(0, this.maxTabsLength);

    if (this.closedTabsData.length && !newClosedTabs.length) {
      // if a user purges history, clear the list
      [...this.tabsList.children].forEach(node =>
        this.tabsList.removeChild(node)
      );
      document
        .getElementById("recently-closed-tabs-container")
        .togglePlaceholderVisibility(true);
      this.tabsList.hidden = true;
      this.closedTabsData = [];
      return;
    }

    const tabsToAdd = newClosedTabs.filter(
      newTab =>
        !this.closedTabsData.some(tab => {
          return (
            this.getTabStateValue(tab, "ID") ==
            this.getTabStateValue(newTab, "ID")
          );
        })
    );

    if (!tabsToAdd.length) {
      return;
    }

    for (let tab of tabsToAdd.reverse()) {
      if (this.tabsList.children.length == this.maxTabsLength) {
        this.tabsList.lastChild.remove();
      }
      let li = this.generateListItem(tab);
      this.tabsList.prepend(li);
    }

    this.closedTabsData = newClosedTabs;

    // for situations where the tab list will initially be empty (such as
    // with new profiles or automatic session restore is disabled) and
    // this.initiateTabsList won't be called
    if (this.tabsList.hidden) {
      this.tabsList.hidden = false;
      document
        .getElementById("recently-closed-tabs-container")
        .togglePlaceholderVisibility(false);
    }
  }

  setFavicon(tab) {
    const imageUrl = tab.image
      ? PlacesUIUtils.getImageURL(tab)
      : "chrome://global/skin/icons/defaultFavicon.svg";
    let favicon = document.createElement("div");
      let li = document.createElement("li");
      li.classList.add("closed-tab-li");

    favicon.style.backgroundImage = `url('${imageUrl}')`;
    favicon.classList.add("favicon");
    favicon.setAttribute("role", "presentation");
    return favicon;
      if (tab.image) {
        // TODO - figure out how to render this properly
        PlacesUIUtils.setImage(tab, li);
      }

  generateListItem(tab) {
    const li = document.createElement("li");
    li.classList.add("closed-tab-li");
    li.setAttribute("tabindex", 0);
    li.setAttribute("role", "button");

    const title = document.createElement("span");
      let title = document.createElement("span");
      title.textContent = `${tab.title}`;
      title.classList.add("closed-tab-li-title");

    const favicon = this.setFavicon(tab);
    li.append(favicon);

    const targetURI = this.getTabStateValue(tab, "url");
      const targetURI = this.getTargetURI(tab);
      li.dataset.targetURI = targetURI;
      document.l10n.setAttributes(li, "firefoxview-closed-tabs-tab-button", {
        targetURI,
      });

    const url = document.createElement("span");
      let url = document.createElement("span");

      if (targetURI) {
        url.textContent = this.formatURIForDisplay(targetURI);
        url.classList.add("closed-tab-li-url");
      }

    const time = document.createElement("span");
      let time = document.createElement("span");
      time.textContent = this.convertTimestamp(tab.closedAt);
      time.classList.add("closed-tab-li-time");

      li.append(title, url, time);
    return li;
      this.tabsList.appendChild(li);
    }
    this.tabsList.hidden = false;
  }
}
customElements.define("recently-closed-tabs-list", RecentlyClosedTabsList);

class RecentlyClosedTabsContainer extends HTMLElement {
  constructor() {
    super();
    this.observerAdded = false;
    this.boundObserve = (...args) => this.observe(...args);
  }
  getWindow = () => window.windowRoot.ownerGlobal;

  connectedCallback() {
    this.noTabsElement = this.querySelector(
@@ -237,77 +149,28 @@ class RecentlyClosedTabsContainer extends HTMLElement {
      "#collapsible-tabs-container"
    );
    this.collapsibleButton = this.querySelector("#collapsible-tabs-button");
    this.collapsibleButton.addEventListener("click", this);

    getWindow().gBrowser.tabContainer.addEventListener("TabSelect", this);
  }

  cleanup() {
    getWindow().gBrowser.tabContainer.removeEventListener("TabSelect", this);

    if (this.observerAdded) {
      Services.obs.removeObserver(
        this.boundObserve,
        SS_NOTIFY_CLOSED_OBJECTS_CHANGED
      );
    }
  }

  // we observe when a tab closes but since this notification fires more frequently and on
  // all windows, we remove the observer when another tab is selected; we check for changes
  // to the session store once the user return to this tab.
  handleObservers(contentDocument) {
    if (
      !this.observerAdded &&
      contentDocument &&
      contentDocument.URL == "about:firefoxview"
    ) {
      Services.obs.addObserver(
        this.boundObserve,
        SS_NOTIFY_CLOSED_OBJECTS_CHANGED
      );
      this.observerAdded = true;
      this.list.updateTabsList();
    } else if (this.observerAdded) {
      Services.obs.removeObserver(
        this.boundObserve,
        SS_NOTIFY_CLOSED_OBJECTS_CHANGED
      );
      this.observerAdded = false;
    }
    this.collapsibleButton.addEventListener("click", this);
  }

  observe = () => this.list.updateTabsList();

  onLoad() {
    if (this.getClosedTabCount() == 0) {
      this.togglePlaceholderVisibility(true);
      this.noTabsElement.hidden = false;
      this.collapsibleContainer.classList.add("empty-container");
    } else {
      this.list.initiateTabsList();
      this.list.generateTabs();
    }
    Services.obs.addObserver(
      this.boundObserve,
      SS_NOTIFY_CLOSED_OBJECTS_CHANGED
    );
    this.observerAdded = true;
  }

  handleEvent(event) {
    if (event.type == "click" && event.target == this.collapsibleButton) {
      this.toggleTabs();
    } else if (event.type == "TabSelect") {
      this.handleObservers(event.target.linkedBrowser.contentDocument);
    }
    }

  togglePlaceholderVisibility(visible) {
    this.noTabsElement.toggleAttribute("hidden", !visible);
    this.collapsibleContainer.classList.toggle("empty-container", visible);
  }

  getClosedTabCount = () => {
    try {
      return SessionStore.getClosedTabCount(getWindow());
      return SessionStore.getClosedTabCount(this.getWindow());
    } catch (ex) {
      return 0;
    }
+0 −3
Original line number Diff line number Diff line
[DEFAULT]
run-if = nightly_build # about:firefoxview is only enabled on Nightly

support-files = head.js

[browser_firefoxview.js]
[browser_firefoxview_tab.js]
[browser_recently_closed_tabs.js]
[browser_setup_state.js]
Loading