Asana custom list view: Automatically set filter to "just my tasks," make columns narrower, make rows shorter, and hide assignee and enum fields

asana-custom-view.js

// intended as a Violentmonkey script (you'll need "// @grant    GM_addStyle") so that it automatically runs

// update: now re-runs even as you click around other tabs and projects within Asana
// update: now auto-scrolls to the subtasks section and adds a back button there for easier task hierarchy navigation
// update: a second back button also appears at the bottom for convenience. it breaks the "Add Subtask" button, but
//         as a workaround you can just click in the last subtask and hit Enter

// fix: back button also works after drilling until there are no more subtasks
// fix: escaping out of a task and going back into the same task scrolls to subtasks
// fix: work with apparent change from 'small' to 'medium' buttons 2020Dec10 (but backwards-compatible)
// fix: work with "Blocked script execution" errors (Chrome security tightening?) that were preventing back buttons from firing

// customize to your liking!

(function() {

  let tried_steps = 0;
  let made_back_button = false;
  let task_path_details = ''; // a way of checking whether the task path pane is done loading (otherwise triggers while the old one is still loaded)
  let subtasks_details = ''; // same for the subtasks pane
  let previous_url = ''; // an additional check, since window.location.href doesn't always change when expected
  const back_link_selector = '#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.SingleTaskPaneSpreadsheet-resizeListenerContainer > div.TaskAncestry > div.TaskAncestry-taskNames > div:last-child > a';
  const go_back = () => {
    document.querySelector(back_link_selector).click();
  };
  const add_back_button = (...parents) => {
    if (document.querySelector(back_link_selector)) {
      for (let parent_element of parents) {
        let new_back_button = document.createElement('span');
        new_back_button.classList.add('custom-back-button');
        new_back_button.innerHTML = 'Back';
        new_back_button.addEventListener('click', go_back);
        parent_element.appendChild(new_back_button);
      }
      made_back_button = true;
    }
  };
  const check_now_filtered = (a,b) => {
    // if (window.location.href.startsWith('https://app.asana.com/-/page_load_cookies')) return;
    if (previous_url === window.location.href) return;
    if (window.location.href.endsWith('/list')) {
      const already_filtered = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-mainContent > div.PageToolbarStructure--withSeparatorDots.PageToolbarStructure--withoutBottomBorder.PageToolbarStructure.ProjectSpreadsheetGridPageToolbar > div.PageToolbarStructure-rightChildren > div.AbstractThemeableRectangularButton--isEnabled.AbstractThemeableRectangularButton.SubtleToggleButton--isPressed.SubtleToggleButton.FilterMenu');
      if (already_filtered) tried_steps = 2;
      if (!tried_steps) {
        const filter_button = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-mainContent > div.PageToolbarStructure--withSeparatorDots.PageToolbarStructure--withoutBottomBorder.PageToolbarStructure.ProjectSpreadsheetGridPageToolbar > div.PageToolbarStructure-rightChildren > div.AbstractThemeableRectangularButton--isEnabled.AbstractThemeableRectangularButton.SubtleToggleButton--isNotPressed.SubtleToggleButton.FilterMenu');
        if (!filter_button) return;
        filter_button.click();
        tried_steps++;
      } else if (tried_steps === 1) {
        const tasks_button = document.getElementById('view_options_filter_Just\ my\ tasks');
        if (!tasks_button) return;
        tasks_button.click();
        tried_steps++;
      }
    } else if (!made_back_button) {
      const task_path = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.SingleTaskPaneSpreadsheet-resizeListenerContainer');
      const new_task_path_html = task_path && (task_path_details !== task_path.innerHTML);
      const subtasks_pane = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.TaskPaneSubtasks');
      const new_subtasks_html = subtasks_pane && (subtasks_details !== subtasks_pane.innerHTML);
      if (new_task_path_html && new_subtasks_html) { // the details pane has been loaded (checking its whole HTML was resulting in false positives)
        const subtasks = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.TaskPaneSubtasks--hasSubtasks.TaskPaneSubtasks');
        if (subtasks) {
          const subtasks_parent = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.TaskPaneSubtasks--hasSubtasks.TaskPaneSubtasks > div.LabeledRowStructure.TaskPaneSubtasks-label');
          const new_row = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.DropTargetAddSubtaskButton.SingleTaskPaneSpreadsheet-addSubtaskButton--addMarginBottom.SingleTaskPaneSpreadsheet-addSubtaskButton');
          if (!subtasks_parent || !new_row) return;
          subtasks.scrollIntoView();
          add_back_button(subtasks_parent, new_row);
          subtasks_details = subtasks_pane.innerHTML;
        } else {
          const assignee_row = document.querySelector('#asana_main_page > div.ProjectPage > div.ProjectPage-list > div > div > div > div.FullWidthPageStructureWithDetailsOverlay-detailsOverlay > div > div > div.DropTargetAttachment.SingleTaskPaneSpreadsheet-attachmentDropTarget > div.Scrollable--withCompositingLayer.Scrollable.Scrollable--vertical.ShadowScrollable-body.SingleTaskPaneSpreadsheet-body.SingleTaskPaneSpreadsheet-body--notIE > div.SingleTaskPaneSpreadsheet-premiumFeaturesSection > div > div.LabeledRowStructure.SingleTaskPaneFields-assigneeRow');
          if (!assignee_row) return;
          add_back_button(assignee_row);
          task_path_details = task_path.innerHTML;
        }
      }
    }
    if ((tried_steps > 1) || made_back_button) {
      previous_url = window.location.href;
      tried_steps = 0;
      made_back_button = false;
      task_path_details = '';
      subtasks_details = '';
      bootstrap_observer.disconnect();
    }
  };

  const bootstrap_observer = new MutationObserver(check_now_filtered);

  const reset_check = (a,b) => {
    check_now_filtered(); 
    bootstrap_observer.observe(document.body, { childList: true, subtree: true });
  };
  
  const H = window.history;
  const oldPushState = H.pushState;
  H.pushState = function (state) {
    if (typeof H.onpushstate == "function") {
        H.onpushstate({state: state} );
    }
    return oldPushState.apply(H, arguments);
  };
  window.onpopstate = history.onpushstate = reset_check;
  reset_check();

  GM_addStyle(`
    .SpreadsheetProjectFieldsHeader-fieldHeading--assignee,
    .SpreadsheetAssigneeCell-cell.SpreadsheetTaskRow-assigneeCell,
    .SpreadsheetProjectFieldsHeader-fieldHeading--enum,
    .SpreadsheetCustomPropertyEnumCell-spreadsheetCell
    {
      display: none !important;
    }

    .SpreadsheetFieldHeading,
    .SpreadsheetCell.SpreadsheetCell--isCompact
    {
      width: 80px !important;
    }

    .TaskGroupHeader-placeholderAndHeaderContainer,
    .TaskGroupHeader.TaskGroupHeader--draggable.TaskGroupHeader--withSpreadsheetGridEnabled.TaskGroup-header,
    .TaskGroupHeader-toggleButton
    {
      max-height: 34px !important;
    }
    .custom-back-button {
      align-items: center;
      border: 1px solid;
      border-radius: 6px;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-flex;
      flex-shrink: 0;
      justify-content: center;
      overflow: hidden;
      transition-duration: .2s;
      transition-property: background,border,box-shadow,color,fill;
      user-select: none;
    }
    .custom-back-button:hover {
      background: lightgrey;
    }
  `);
})();