chrome/browser/resources/print_preview/ui/preview_area.html

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

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../native_layer.html">
<link rel="import" href="../dark_mode_behavior.html">
<link rel="import" href="../data/coordinate2d.html">
<link rel="import" href="../data/destination.html">
<link rel="import" href="../data/destination_match.html">
<link rel="import" href="../data/margins.html">
<link rel="import" href="../data/model.html">
<link rel="import" href="../data/printable_area.html">
<link rel="import" href="../data/size.html">
<link rel="import" href="../data/state.html">
<link rel="import" href="margin_control_container.html">
<link rel="import" href="plugin_proxy.html">
<link rel="import" href="print_preview_vars_css.html">
<link rel="import" href="settings_behavior.html">
<link rel="import" href="strings.html">

<dom-module id="print-preview-preview-area">
  <template>
    <style include="cr-hidden-style">
      @keyframes dancing-dots-jump {
        0% { top: 0; }
        55% { top: 0; }
        60% { top: -10px; }
        80% { top: 3px; }
        90% { top: -2px; }
        95% { top: 1px; }
        100% { top: 0; }
      }

      span.jumping-dots > span {
        animation: dancing-dots-jump 1800ms infinite;
        padding: 1px;
        position: relative;
      }

      span.jumping-dots > span:nth-child(2) {
        animation-delay: 100ms;
      }

      span.jumping-dots > span:nth-child(3) {
        animation-delay: 300ms;
      }

      :host {
        display: block;
        height: 100%;
        overflow: hidden;
        position: relative;
        user-select: none;
      }

      .preview-area-plugin-wrapper {
        height: 100%;
      }

      .preview-area-plugin {
        border: none;
        cursor: inherit;
        height: 100%;
        opacity: 1;
        /* pluginFadeInTransitionDuration = 200ms */
        transition: opacity 200ms linear;
        /* pluginFadeInTransitionDelay =
           overlayFadeOutTransitionDuration = 100ms */
        transition-delay: 100ms;
        width: 100%;
      }

      .preview-area-overlay-layer {
        background: var(--preview-area-background-color);
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        margin: 0;
        opacity: 1;
        position: absolute;
        transition: opacity 200ms linear;
        /* overlayFadeInTransitionDelay = pluginFadeOutTransitionDelay +
         *     pluginFadeOutTransitionDuration = 350ms */
        transition-delay: 350ms;
        user-select: none;
        width: 100%;
        z-index: 1;
      }

      :host([new-print-preview-layout]) .preview-area-overlay-layer {
        background: var(--preview-area-background-color-new);
      }

      .preview-area-overlay-layer.invisible {
        opacity: 0;
        pointer-events: none;
        /* overlayFadeOutTransitionDuration = 100ms */
        transition: opacity 100ms linear;
      }

      .preview-area-message {
        color: var(--google-grey-900);  /* Same in light and dark. */
        line-height: 20px;
        margin: 0 10px;
        position: relative;
        text-align: center;
      }

      :host([new-print-preview-layout]) .preview-area-message {
        color: var(--cr-primary-text-color);
      }
    </style>
    <div class$="preview-area-overlay-layer [[getInvisible_(previewState)]]"
        aria-hidden$="[[getAriaHidden_(previewState)]]">
      <div class="preview-area-message">
        <div>
          <span inner-h-t-m-l="[[currentMessage_(previewState)]]"></span>
          <span class$="preview-area-loading-message-jumping-dots
                        [[getJumpingDots_(previewState)]]"
              hidden$="[[!isPreviewLoading_(previewState)]]">
              <span>.</span><span>.</span><span>.</span>
          </span>
          <a href="$i18n{gcpCertificateErrorLearnMoreURL}"
              target="_blank" class="learn-more-link"
              hidden$="[[!shouldShowLearnMoreLink_(error)]]">
            $i18n{learnMore}
          </a>
        </div>
      </div>
    </div>
    <div class="preview-area-plugin-wrapper">
      <object class="preview-area-compatibility-object-out-of-process"
          type="application/x-google-chrome-pdf"
          data="chrome://print/dummy.pdf"></object>
    </div>
    <print-preview-margin-control-container id="marginControlContainer"
        page-size="[[pageSize]]" settings="[[settings]]"
        document-margins="[[margins]]"
        measurement-system="[[measurementSystem]]" state="[[state]]"
        preview-loaded="[[previewLoaded_]]"
        on-text-focus-position="onTextFocusPosition_"
        on-margin-drag-changed="onMarginDragChanged_">
    </print-preview-margin-control-container>
  </template>
  <script src="preview_area.js"></script>
</dom-module>