scanning: Use observer for AppState changes

Using an observer + boolean attributes to reduce the number of
unnecessary function calls from the HTML whenever AppState changes.

Bug: 1059779
Change-Id: I20f92489adcc351dace224d0fc33f4c95478f472
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2544751
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828436}

chromeos/components/scanning/resources/scanning_app.html

@@ -84,26 +84,26 @@
           progress-percent="[[progressPercent_]]"></scan-preview>
     </div>
     <div class="right-panel">
-      <template is="dom-if" if="[[!shouldShowDoneSection_(appState_)]]">
+      <template is="dom-if" if="[[!showDoneSection_]]">
         <h1 id="appTitle">[[i18n('appTitle')]]</h1>
         <scanner-select id="scannerSelect" scanners="[[scanners_]]"
-            loaded="[[areScannersLoaded_(appState_)]]"
-            settings-disabled="[[areSettingsDisabled_(appState_)]]"
+            loaded="[[scannersLoaded_]]"
+            settings-disabled="[[settingsDisabled_]]"
             selected-scanner-id="{{selectedScannerId}}"></scanner-select>
         <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
-            settings-disabled="[[areSettingsDisabled_(appState_)]]"
+            settings-disabled="[[settingsDisabled_]]"
             selected-source="{{selectedSource}}"></source-select>
         <scan-to-select id="scanToSelect"
-            settings-disabled="[[areSettingsDisabled_(appState_)]]"
+            settings-disabled="[[settingsDisabled_]]"
             selected-file-path="{{selectedFilePath}}">
         </scan-to-select>
         <file-type-select id="fileTypeSelect"
-            settings-disabled="[[areSettingsDisabled_(appState_)]]"
+            settings-disabled="[[settingsDisabled_]]"
             selected-file-type="{{selectedFileType}}"></file-type-select>
         <div id="more-settings-line-separator"></div>
         <cr-button id="moreSettingsButton" on-click="toggleClicked_"
             aria-expanded$="[[opened]]"
-            disabled="[[areSettingsDisabled_(appState_)]]">
+            disabled="[[settingsDisabled_]]">
           <span>[[i18n('moreSettings')]]</span>
           <iron-icon icon="[[getArrowIcon_(opened)]]">
           </iron-icon>
@@ -111,34 +111,34 @@
         <iron-collapse id="collapse" opened="{{opened}}">
           <color-mode-select id="colorModeSelect"
               color-modes="[[capabilities_.colorModes]]"
-              settings-disabled="[[areSettingsDisabled_(appState_)]]"
+              settings-disabled="[[settingsDisabled_]]"
               selected-color-mode="{{selectedColorMode}}">
           </color-mode-select>
           <page-size-select id="pageSizeSelect"
               page-sizes="[[selectedSourcePageSizes_]]"
-              settings-disabled="[[areSettingsDisabled_(appState_)]]"
+              settings-disabled="[[settingsDisabled_]]"
               selected-page-size="{{selectedPageSize}}">
           </page-size-select>
           <resolution-select id="resolutionSelect"
               resolutions="[[capabilities_.resolutions]]"
-              settings-disabled="[[areSettingsDisabled_(appState_)]]"
+              settings-disabled="[[settingsDisabled_]]"
               selected-resolution="{{selectedResolution}}">
           </resolution-select>
         </iron-collapse>
         <div class="scan-button-container">
           <cr-button id="scanButton" class="action-button" on-click="onScanClick_"
-              disabled$="[[areSettingsDisabled_(appState_)]]"
-              hidden$="[[shouldShowCancelButton_(appState_)]]">
+              disabled$="[[settingsDisabled_]]"
+              hidden$="[[showCancelButton_]]">
             [[i18n('scanButtonText')]]
           </cr-button>
           <cr-button id="cancelButton" on-click="onCancelClick_"
-              hidden$="[[!shouldShowCancelButton_(appState_)]]">
+              hidden$="[[!showCancelButton_]]">
             [[i18n('cancelButtonText')]]
           </cr-button>
         </div>
         <p id="statusText">[[statusText_]]</p>
       </template>
-      <template is="dom-if" if="[[shouldShowDoneSection_(appState_)]]">
+      <template is="dom-if" if="[[showDoneSection_]]">
         <scan-done-section page-number="[[pageNumber_]]"
             on-change-app-state="onChangeAppState_"></scan-done-section>
       </template>

chromeos/components/scanning/resources/scanning_app.js

@@ -101,6 +101,7 @@ Polymer({
     appState_: {
       type: Number,
       value: AppState.GETTING_SCANNERS,
+      observer: 'onAppStateChange_',
     },
 
     /** @private {!Array<string>} */
@@ -136,6 +137,37 @@ Polymer({
 
     /** @private {string} */
     statusText_: String,
+
+    /**
+     * Determines whether settings should be disabled based on the current app
+     * state. Settings should be disabled until after the selected scanner's
+     * capabilities are fetched since the capabilities determine what options
+     * are available in the settings. They should also be disabled while
+     * scanning since settings cannot be changed while a scan is in progress.
+     * @private {boolean}
+     */
+    settingsDisabled_: {
+      type: Boolean,
+      value: true,
+    },
+
+    /** @private {boolean} */
+    scannersLoaded_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private {boolean} */
+    showDoneSection_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private {boolean} */
+    showCancelButton_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /** @override */
@@ -347,35 +379,6 @@ Polymer({
     return opened ? 'cr:expand-less' : 'cr:expand-more';
   },
 
-  /**
-   * @return {boolean}
-   * @private
-   */
-  areScannersLoaded_() {
-    return this.appState_ !== AppState.GETTING_SCANNERS;
-  },
-
-  /**
-   * Determines whether settings should be disabled based on the current app
-   * state. Settings should be disabled until after the selected scanner's
-   * capabilities are fetched since the capabilities determine what options are
-   * available in the settings. They should also be disabled while scanning
-   * since settings cannot be changed while a scan is in progress.
-   * @return {boolean}
-   * @private
-   */
-  areSettingsDisabled_() {
-    return this.appState_ !== AppState.READY;
-  },
-
-  /**
-   * @return {boolean}
-   * @private
-   */
-  shouldShowDoneSection_() {
-    return this.appState_ === AppState.DONE;
-  },
-
   /**
    * @return {string}
    * @private
@@ -400,14 +403,6 @@ Polymer({
    */
   onCancelComplete(success) {},
 
-  /**
-   * @return {boolean}
-   * @private
-   */
-  shouldShowCancelButton_() {
-    return this.appState_ === AppState.SCANNING;
-  },
-
   /**
    * Sets the app state if the state transition is allowed.
    * @param {!AppState} newState
@@ -443,6 +438,14 @@ Polymer({
     this.appState_ = newState;
   },
 
+  /** @private */
+  onAppStateChange_() {
+    this.scannersLoaded_ = this.appState_ !== AppState.GETTING_SCANNERS;
+    this.settingsDisabled_ = this.appState_ !== AppState.READY;
+    this.showCancelButton_ = this.appState_ === AppState.SCANNING;
+    this.showDoneSection_ = this.appState_ === AppState.DONE;
+  },
+
   /**
    * @param {!Event} event
    * @private