[CrOS Tether] ProximityAuth WebUI improvement: show the local device's ID.

components/proximity_auth/webui/resources/proximity_auth.js

 /* Copyright 2017 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 ProximityAuth = {
   cryptauthController_: null,
   remoteDevicesController_: null,
   findEligibleDevicesController_: null,
 
   /**
    * Initializes all UI elements of the ProximityAuth debug page.
    */
   init: function() {
     ProximityAuth.cryptauthController_ = new CryptAuthController();
     ProximityAuth.remoteDevicesController_ = new DeviceListController(
         document.getElementById('remote-devices-control'), true, false);
     ProximityAuth.eligibleDevicesController_ = new EligibleDevicesController();
     WebUI.getLocalState();
   }
 };
 
 /**
  * Controller for the CryptAuth controls section.
  */
 class CryptAuthController {
   constructor() {
     this.elements_ = {
-      publicKey: document.getElementById('public-key'),
+      localDeviceId: document.getElementById('local-device-id'),
       gcmRegistration: document.getElementById('gcm-registration'),
       currentEid: document.getElementById('current-eid'),
       enrollmentTitle: document.getElementById('enrollment-title'),
       lastEnrollment: document.getElementById('last-enrollment'),
       nextEnrollment: document.getElementById('next-enrollment'),
       enrollmentButton: document.getElementById('force-enrollment'),
       deviceSyncTitle: document.getElementById('device-sync-title'),
       lastDeviceSync: document.getElementById('last-device-sync'),
       nextDeviceSync: document.getElementById('next-device-sync'),
       deviceSyncButton: document.getElementById('force-device-sync'),
     };
 
     this.elements_.enrollmentButton.onclick = this.forceEnrollment_.bind(this);
     this.elements_.deviceSyncButton.onclick = this.forceDeviceSync_.bind(this);
   }
 
   /**
+   * Sets the local device's ID. Note that this value is truncated since the
+   * full value is very long and does not cleanly fit on the screen.
+   */
+  setLocalDeviceId(deviceIdTruncated) {
+    this.elements_.localDeviceId.textContent = deviceIdTruncated;
+  }
+
+  /**
    * Update the enrollment state in the UI.
    */
   updateEnrollmentState(state) {
     this.elements_.lastEnrollment.textContent =
         this.getLastSyncTimeString_(state, 'Never enrolled');
     this.elements_.nextEnrollment.textContent =
         this.getNextRefreshString_(state);
 
     if (state['recoveringFromFailure']) {
       this.elements_.enrollmentTitle.setAttribute('state', 'failure');
@@ skipping 189 matching lines @@
    */
   findEligibleUnlockDevices_() {
     WebUI.findEligibleUnlockDevices();
   }
 }
 
 /**
  * Interface for the native WebUI to call into our JS.
  */
 LocalStateInterface = {
-  onGotLocalState: function(enrollmentState, deviceSyncState, remoteDevices) {
+  onGotLocalState: function(
+      localDeviceId, enrollmentState, deviceSyncState, remoteDevices) {
+    LocalStateInterface.setLocalDeviceId(localDeviceId);
     LocalStateInterface.onEnrollmentStateChanged(enrollmentState);
     LocalStateInterface.onDeviceSyncStateChanged(deviceSyncState);
     LocalStateInterface.onRemoteDevicesChanged(remoteDevices);
   },
 
+  setLocalDeviceId: function(localDeviceId) {
+    ProximityAuth.cryptauthController_.setLocalDeviceId(localDeviceId);
+  },
+
   onEnrollmentStateChanged: function(enrollmentState) {
     ProximityAuth.cryptauthController_.updateEnrollmentState(enrollmentState);
   },
 
   onDeviceSyncStateChanged: function(deviceSyncState) {
     ProximityAuth.cryptauthController_.updateDeviceSyncState(deviceSyncState);
   },
 
   onRemoteDevicesChanged: function(remoteDevices) {
     ProximityAuth.remoteDevicesController_.updateRemoteDevices(remoteDevices);
   }
 };
 
 /**
  * Interface for the native WebUI to call into our JS.
  */
 CryptAuthInterface = {
   onGotEligibleDevices: function(eligibleDevices, ineligibleDevices) {
     ProximityAuth.eligibleDevicesController_.updateEligibleDevices(
         eligibleDevices, ineligibleDevices);
   }
 };
 
 document.addEventListener('DOMContentLoaded', function() {
   WebUI.onWebContentsInitialized();
   Logs.init();
   ProximityAuth.init();
 });