chrome/browser/resources/settings/device_page/storage.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="drive_cache_dialog.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-storage">
  <template>
    <style include="settings-shared">
      progress {
        -webkit-appearance: none;
        display: block;
        height: 28px;
        width: 100%;
      }

      progress::-webkit-progress-bar {
        background-color: rgba(0, 0, 0, 0.06);
        border-radius: 2px;
      }

      progress::-webkit-progress-value {
        background-color: rgb(0, 175, 255);
        border-radius: 2px;
      }

      progress.space-low::-webkit-progress-value {
        background-color: rgb(255, 176, 0);
      }

      progress.space-critically-low::-webkit-progress-value {
        background-color: var(--google-red-500);
      }

      iron-icon {
        --iron-icon-fill-color: rgb(255, 176, 0);
        --iron-icon-height: 32px;
        --iron-icon-width: 32px;
      }

      #criticallyLowMessage iron-icon {
        --iron-icon-fill-color: var(--google-red-500);
      }

      .storage-size {
        color: var(--cr-secondary-text-color);
      }

      .message-area {
        -webkit-padding-end: 48px;
        -webkit-padding-start: 16px;
        background-color: var(--google-grey-100);
        border-radius: 2px;
        display: flex;
        margin: 14px 0 16px;
        padding-bottom: 12px;
        padding-top: 16px;
        width: 100%;
      }

      .message-area > iron-icon {
        -webkit-padding-end: 16px;
        flex: none;
      }

      .message-title {
        font-size: 115%;
      }

      .message-description {
        color: rgb(90, 90, 90);
        font-size: 92%;
        line-height: 1.6em;
        margin: 1em 0;
      }

      #barArea {
        display: flex;
        flex-direction: column;
        margin: 24px 0 54px;
        width: 100%;
      }

      #barLabels {
        display: flex;
      }

      .bar-label {
        display: flex;
        flex-direction: column;
      }

      .bar-label .vertical-line {
        align-self: center;
        background-color: rgba(0, 0, 0, 0.17);
        height: 8px;
        margin-bottom: 4px;
        width: 1px;
      }

      .bar-label .wrapper {
        color: rgb(51, 51, 51);
        text-align: center;
        white-space: nowrap;
      }

      /* If the "Available" part in the ber is too small, the label "Available"
       * and a label for its size can overstep the right edge of bar area.
       * To prevent it, we invert the direction to put the text labels here.
       * We restore the direction for inner span elements not to change how to
       * render the text contents. */
      .end-aligned .wrapper {
        direction: rtl;
      }

      :host-context([dir=rtl]) .end-aligned .wrapper {
        direction: ltr;
      }

      .end-aligned .wrapper span {
        direction: initial;
        unicode-bidi: embed;
      }

      #deleteButton {
        display: none;
      }

      [actionable] #deleteButton {
        display: block;
      }

      button > iron-icon {
        --iron-icon-fill-color: var(--paper-grey-400);
        --iron-icon-height: 24px;
        --iron-icon-width: 24px;
      }
    </style>
    <template is="dom-if" if="[[isSpaceLow_(sizeStat_.spaceState)]]">
      <div class="settings-box first">
        <div class="message-area">
          <iron-icon icon="cr:warning"></iron-icon>
          <div class="message">
            <div class="message-title">$i18n{storageSpaceLowMessageTitle}</div>
            <div class="message-description">
              <span>$i18n{storageSpaceLowMessageLine1}</span>
              <span>$i18n{storageSpaceLowMessageLine2}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template is="dom-if" if="[[isSpaceCriticallyLow_(sizeStat_.spaceState)]]">
      <div class="settings-box first">
        <div id="criticallyLowMessage" class="message-area">
          <iron-icon icon="cr:warning"></iron-icon>
          <div class="message">
            <div class="message-title">
              $i18n{storageSpaceCriticallyLowMessageTitle}
            </div>
            <div class="message-description">
              <span>$i18n{storageSpaceCriticallyLowMessageLine1}</span>
              <span>$i18n{storageSpaceCriticallyLowMessageLine2}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="settings-box first">
      <div id="barArea">
        <progress id="bar" class$="[[getBarClass_(sizeStat_.spaceState)]]"
            value="[[sizeStat_.usedRatio]]"></progress>
        <div id="barLabels">
          <div id="inUseLabelArea" class="bar-label">
            <div class="vertical-line"></div>
            <div class="wrapper"><span>$i18n{storageItemInUse}</span></div>
            <div class="wrapper">
              <span class="storage-size">[[sizeStat_.usedSize]]</span>
            </div>
          </div>
          <div id="availableLabelArea" class="bar-label end-aligned">
            <div class="vertical-line"></div>
            <div class="wrapper"><span>$i18n{storageItemAvailable}</span></div>
            <div class="wrapper">
              <span class="storage-size">[[sizeStat_.availableSize]]</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="settings-box two-line" on-click="onDownloadsTap_" actionable>
      <div class="start">
        $i18n{storageItemDownloads}
        <div id="downloadsSize" class="secondary">
          $i18n{storageSizeComputing}
        </div>
      </div>
      <paper-icon-button-light class="icon-external">
        <button aria-label="$i18n{storageItemDownloads}"
            aria-describedby="downloadsSize"></button>
      </paper-icon-button-light>
    </div>
    <template is="dom-if" if="[[driveEnabled_]]">
      <div class="settings-box two-line" on-click="onDriveCacheTap_"
          actionable$="[[hasDriveCache_]]" >
        <div class="start">
          $i18n{storageItemDriveCache}
          <div id="driveCacheSize" class="secondary">
            $i18n{storageSizeComputing}
          </div>
        </div>
        <paper-icon-button-light class="icon-delete-gray">
          <button id="deleteButton" aria-label="$i18n{storageItemDriveCache}"
              aria-describedby="driveSizeCache">
          </button>
        </paper-icon-button-light>
      </div>
    </template>
    <div class="settings-box two-line" on-click="onBrowsingDataTap_" actionable>
      <div class="start">
        $i18n{storageItemBrowsingData}
        <div id="browsingDataSize" class="secondary">
          $i18n{storageSizeComputing}
        </div>
      </div>
      <paper-icon-button-light class="subpage-arrow">
        <button aria-label="$i18n{storageItemBrowsingData}"
            aria-describedby="browsingDataSize"></button>
      </paper-icon-button-light>
    </div>
    <template is="dom-if" if="[[androidEnabled_]]">
      <div class="settings-box two-line" on-click="onAndroidTap_" actionable>
        <div class="start">
          $i18n{storageItemAndroid}
          <div id="androidSize" class="secondary">
            $i18n{storageSizeComputing}
          </div>
        </div>
        <paper-icon-button-light class="icon-external">
          <button aria-label="$i18n{storageItemAndroid}"
              aria-describedby="androidSize"></button>
        </paper-icon-button-light>
      </div>
    </template>
    <template is="dom-if" if="[[showCrostiniStorage_]]">
      <div class="settings-box two-line" on-click="onCrostiniTap_" actionable>
        <div class="start">
          $i18n{storageItemCrostini}
          <div id="crostiniSize" class="secondary">
            $i18n{storageSizeComputing}
          </div>
        </div>
        <paper-icon-button-light class="subpage-arrow">
          <button aria-label="$i18n{storageItemCrostini}"
              aria-describedby="crostiniSize"></button>
        </paper-icon-button-light>
      </div>
    </template>
    <template is="dom-if" if="[[!isGuest_]]">
      <div class="settings-box two-line" on-click="onOtherUsersTap_" actionable>
        <div class="start">
          $i18n{storageItemOtherUsers}
          <div id="otherUsersSize" class="secondary">
            $i18n{storageSizeComputing}
          </div>
        </div>
        <paper-icon-button-light class="subpage-arrow">
          <button aria-label="$i18n{storageItemOtherUsers}"
              aria-describedby="otherUsersSize"></button>
        </paper-icon-button-light>
      </div>
    </template>

    <settings-drive-cache-dialog id="storageDriveCache"
        on-close="onCloseDriveCacheDialog_">
    </settings-drive-cache-dialog>
  </template>
  <script src="storage.js"></script>
</dom-module>