summaryrefslogtreecommitdiff
path: root/chromium/chrome/browser/resources/md_extensions/sidebar.html
blob: 32cfa03491ccab9e56b25750a04c9d21d6bfcc2b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="navigation_helper.html">

<dom-module id="extensions-sidebar">
  <template>
    <style include="cr-icons">
      :host {
        color: #5a5a5a;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: auto;
        width: 256px;
      }

      iron-selector .iron-selected {
        color: var(--google-blue-700);
      }

      #sectionMenu {
        padding-top: 8px;
        user-select: none;
      }

      .section-item {
        align-items: center;
        color: inherit;
        display: flex;
        font-weight: 500;
        /* Ensure the focus outline appears correctly (crbug.com/655503). */
        margin-inline-end: 4px;
        min-height: 40px;
        padding-inline-start: 24px;
        position: relative;
        text-decoration: none;
      }

      .separator {
        border-top: var(--cr-separator-line);
        margin: 8px 0;
      }

      #more-extensions {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
      }

      .cr-icon {
        margin-inline-end: calc(
            var(--cr-section-padding) - var(--cr-icon-ripple-padding));
      }
    </style>
    <iron-selector id="sectionMenu">
      <!-- Values for "data-path" attribute must match the "Page" enum. -->
      <a class="section-item" id="sections-extensions" href="/"
          on-click="onLinkTap_" data-path="items-list">
        $i18n{sidebarExtensions}
        <paper-ripple></paper-ripple>
      </a>
      <a class="section-item" id="sections-shortcuts" href="/shortcuts"
          on-click="onLinkTap_" data-path="keyboard-shortcuts">
        $i18n{keyboardShortcuts}
        <paper-ripple></paper-ripple>
      </a>
    </iron-selector>
    <div hidden="[[isSupervised]]">
      <div class="separator"></div>
      <a class="section-item" id="more-extensions" target="_blank"
          href="$i18n{getMoreExtensionsUrl}" on-click="onMoreExtensionsTap_">
        <span>$i18n{openChromeWebStore}</span>
        <div class="cr-icon icon-external"></div>
        <paper-ripple></paper-ripple>
      </a>
    </div>
  </template>
  <script src="sidebar.js"></script>
</dom-module>