chrome/browser/resources/bookmarks/toolbar.ts

// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.js';
import 'chrome://resources/cr_elements/icons.m.js';
import './shared_style.js';
import './strings.m.js';
import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.js';
import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js';

import {CrToolbarElement} from 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.js';
import {CrToolbarSearchFieldElement} from 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {StoreObserver} from 'chrome://resources/js/cr/ui/store.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {deselectItems, setSearchTerm} from './actions.js';
import {BookmarksCommandManagerElement} from './command_manager.js';
import {Command, MenuSource} from './constants.js';
import {BookmarksStoreClientInterface, StoreClient} from './store_client.js';
import {BookmarksPageState} from './types.js';

const BookmarksToolbarElementBase =
    mixinBehaviors([StoreClient], PolymerElement) as {
  new (): PolymerElement & BookmarksStoreClientInterface &
      StoreObserver<BookmarksPageState>
}

export class BookmarksToolbarElement extends BookmarksToolbarElementBase {
  static get is() {
    return 'bookmarks-toolbar';
  }

  static get template() {
    return html`{__html_template__}`;
  }

  static get properties() {
    return {
      sidebarWidth: {
        type: String,
        observer: 'onSidebarWidthChanged_',
      },

      showSelectionOverlay: {
        type: Boolean,
        computed: 'shouldShowSelectionOverlay_(selectedItems_, globalCanEdit_)',
        readOnly: true,
      },

      narrow_: {
        type: Boolean,
        reflectToAttribute: true,
      },

      searchTerm_: {
        type: String,
        observer: 'onSearchTermChanged_',
      },

      selectedItems_: Object,

      globalCanEdit_: Boolean,
    };
  }

  sidebarWidth: string;
  showSelectionOverlay: boolean;
  private narrow_: boolean;
  private searchTerm_: string;
  private selectedItems_: Set<string>;
  private globalCanEdit_: boolean;

  connectedCallback() {
    super.connectedCallback();
    this.watch('searchTerm_', function(state: BookmarksPageState) {
      return state.search.term;
    });
    this.watch('selectedItems_', function(state: BookmarksPageState) {
      return state.selection.items;
    });
    this.watch('globalCanEdit_', function(state: BookmarksPageState) {
      return state.prefs.canEdit;
    });
    this.updateFromStore();
  }

  get searchField(): CrToolbarSearchFieldElement {
    return this.shadowRoot!.querySelector<CrToolbarElement>('cr-toolbar')!
        .getSearchField();
  }

  private onMenuButtonOpenTap_(e: Event) {
    this.dispatchEvent(new CustomEvent('open-command-menu', {
      bubbles: true,
      composed: true,
      detail: {
        targetElement: e.target,
        source: MenuSource.TOOLBAR,
      }
    }));
  }

  private onDeleteSelectionTap_() {
    const selection = this.selectedItems_;
    const commandManager = BookmarksCommandManagerElement.getInstance();
    assert(commandManager.canExecute(Command.DELETE, selection));
    commandManager.handle(Command.DELETE, selection);
  }

  private onClearSelectionTap_() {
    const commandManager = BookmarksCommandManagerElement.getInstance();
    assert(
        commandManager.canExecute(Command.DESELECT_ALL, this.selectedItems_));
    commandManager.handle(Command.DESELECT_ALL, this.selectedItems_);
  }

  private onSearchChanged_(e: CustomEvent<string>) {
    if (e.detail !== this.searchTerm_) {
      this.dispatch(setSearchTerm(e.detail));
    }
  }

  private onSidebarWidthChanged_() {
    this.style.setProperty('--sidebar-width', this.sidebarWidth);
  }

  private onSearchTermChanged_() {
    this.searchField.setValue(this.searchTerm_ || '');
  }

  private shouldShowSelectionOverlay_(): boolean {
    return this.selectedItems_.size > 1 && this.globalCanEdit_;
  }

  private canDeleteSelection_(): boolean {
    return this.showSelectionOverlay &&
        BookmarksCommandManagerElement.getInstance().canExecute(
            Command.DELETE, this.selectedItems_);
  }

  private getItemsSelectedString_(): string {
    return loadTimeData.getStringF('itemsSelected', this.selectedItems_.size);
  }
}

customElements.define(BookmarksToolbarElement.is, BookmarksToolbarElement);