Commit 00883a56 authored by Michael Checo's avatar Michael Checo Committed by Commit Bot

Printer settings: Fix flickering UI issue when loading printers

• Wait for printers to load before rendering
  nearby/add printer sections.

Bug:1108294
Test:manual inspection

Change-Id: I098fcc5307993c14866bcadab81096ea09dbd041
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2364189
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: default avatarJimmy Gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#804575}
parent aea61592
...@@ -114,45 +114,46 @@ ...@@ -114,45 +114,46 @@
</settings-cups-saved-printers> </settings-cups-saved-printers>
</div> </div>
</template> </template>
<template is="dom-if" if="[[attemptedLoadingPrinters_]]">
<div class="padded first" id="nearbyPrinters"> <div class="padded first" id="nearbyPrinters">
<div aria-label$="[[nearbyPrintersAriaLabel_]]"> <div aria-label$="[[nearbyPrintersAriaLabel_]]">
$i18n{nearbyPrintersListTitle} $i18n{nearbyPrintersListTitle}
</div> </div>
<settings-localized-link class="secondary" <settings-localized-link class="secondary"
localized-string="$i18n{nearbyPrintersListDescription}" localized-string="$i18n{nearbyPrintersListDescription}"
link-url="$i18n{printingCUPSPrintLearnMoreUrl}"> link-url="$i18n{printingCUPSPrintLearnMoreUrl}">
</settings-localized-link> </settings-localized-link>
<template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter, <template is="dom-if" if="[[!addPrinterButtonActive_(canAddPrinter,
prefs.native_printing.user_native_printers_allowed.value)]]"> prefs.native_printing.user_native_printers_allowed.value)]]">
<cr-policy-pref-indicator <cr-policy-pref-indicator
pref="[[prefs.native_printing.user_native_printers_allowed]]" pref="[[prefs.native_printing.user_native_printers_allowed]]"
icon-aria-label="$i18n{printingPageTitle}"> icon-aria-label="$i18n{printingPageTitle}">
</cr-policy-pref-indicator> </cr-policy-pref-indicator>
</template> </template>
</div> </div>
<div id="addPrinterSection" class="list-frame"> <div id="addPrinterSection" class="list-frame">
<div class="layout horizontal center custom-list-item"> <div class="layout horizontal center custom-list-item">
<div id="addPrinterText" aria-hidden="true"> <div id="addPrinterText" aria-hidden="true">
$i18n{addCupsPrinter} $i18n{addCupsPrinter}
</div>
<cr-icon-button class="action-button" id="addManualPrinterIcon"
iron-icon="settings20:printer-add"
on-click="onAddPrinterTap_"
disabled="[[!addPrinterButtonActive_(canAddPrinter,
prefs.native_printing.user_native_printers_allowed.value)]]"
title="$i18n{addCupsPrinter}"
deep-link-focus-id$="[[Setting.kAddPrinter]]">
</cr-icon-button>
</div> </div>
<cr-icon-button class="action-button" id="addManualPrinterIcon"
iron-icon="settings20:printer-add"
on-click="onAddPrinterTap_"
disabled="[[!addPrinterButtonActive_(canAddPrinter,
prefs.native_printing.user_native_printers_allowed.value)]]"
title="$i18n{addCupsPrinter}"
deep-link-focus-id$="[[Setting.kAddPrinter]]">
</cr-icon-button>
</div> </div>
</div>
<template is="dom-if" if="[[canAddPrinter]]" restamp> <template is="dom-if" if="[[canAddPrinter]]" restamp>
<settings-cups-nearby-printers search-term="[[searchTerm]]" <settings-cups-nearby-printers search-term="[[searchTerm]]"
active-printer="{{activePrinter}}" active-printer="{{activePrinter}}"
printers-count="{{nearbyPrinterCount_}}"> printers-count="{{nearbyPrinterCount_}}">
</settings-cups-nearby-printers> </settings-cups-nearby-printers>
</template>
</template> </template>
<settings-cups-add-printer-dialog id="addPrinterDialog" <settings-cups-add-printer-dialog id="addPrinterDialog"
......
...@@ -59,6 +59,12 @@ Polymer({ ...@@ -59,6 +59,12 @@ Polymer({
value: () => [], value: () => [],
}, },
/** @private */
attemptedLoadingPrinters_: {
type: Boolean,
value: false,
},
/** @private */ /** @private */
showCupsEditPrinterDialog_: Boolean, showCupsEditPrinterDialog_: Boolean,
...@@ -283,6 +289,9 @@ Polymer({ ...@@ -283,6 +289,9 @@ Polymer({
printer => /** @type {!PrinterListEntry} */ ( printer => /** @type {!PrinterListEntry} */ (
{printerInfo: printer, printerType: PrinterType.SAVED})); {printerInfo: printer, printerType: PrinterType.SAVED}));
this.entryManager_.setSavedPrintersList(this.savedPrinters_); this.entryManager_.setSavedPrintersList(this.savedPrinters_);
// Used to delay rendering nearby and add printer sections to prevent
// "Add Printer" flicker when clicking "Printers" in settings page.
this.attemptedLoadingPrinters_ = true;
}, },
/** @private */ /** @private */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment