[CrOS PhoneHub] Add Quick action and onboarding to multidevice-internals

* Adds controls for Do Not Disturb, Tether status, and is phone ringing
* Controls are 2 ways - they reflect the current state of the status
  they control. I.e if the tether status changes without the user
  explicitly changing the status, it will show up in the dropdown.
  Likewise, if the user changes the status, it will change the status
  to the selected one. Same for DND and phone ringing.
* Adds a control for showing onboard ui

Screenshots:
https://screenshot.googleplex.com/jjS26PAyiaK8KRz (quick action)
https://screenshot.googleplex.com/8THgG3zX4nHfCdu (onboarding)

Bug: 1106937
Change-Id: I5bd8a5d02c0be5aba95d6c816cf7c327c51c986d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2429846
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#810889}

chrome/browser/resources/chromeos/multidevice_internals/BUILD.gn

@@ -20,6 +20,7 @@ js_type_check("closure_compile") {
     ":phone_name_form",
     ":phone_status_model_form",
     ":phonehub_tab",
+    ":quick_action_controller_form",
     ":types",
   ]
 }
@@ -108,6 +109,14 @@ js_library("phone_status_model_form") {
   ]
 }
 
+js_library("quick_action_controller_form") {
+  deps = [
+    ":multidevice_phonehub_browser_proxy",
+    ":types",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
+  ]
+}
+
 js_library("phonehub_tab") {
   deps = [
     ":browser_tabs_model_form",
@@ -115,6 +124,7 @@ js_library("phonehub_tab") {
     ":multidevice_phonehub_browser_proxy",
     ":notification_manager",
     ":phone_status_model_form",
+    ":quick_action_controller_form",
     ":types",
     "//ui/webui/resources/js:load_time_data.m",
   ]
@@ -133,6 +143,7 @@ html_to_js("web_components") {
     "multidevice_internals.js",
     "phonehub_tab.js",
     "phone_name_form.js",
+    "quick_action_controller_form.js",
     "phone_status_model_form.js",
     "shared_style.js",
     "browser_tabs_metadata_form.js",

chrome/browser/resources/chromeos/multidevice_internals/multidevice_internals_resources.grd

@@ -64,6 +64,10 @@
                file="${root_gen_dir}\chrome\browser\resources\chromeos\multidevice_internals\phone_status_model_form.js"
                use_base_dir="false"
                type="BINDATA"/>
+      <include name="IDR_MULTIDEVICE_INTERNALS_QUICK_ACTION_CONTROLLER_FORM_JS"
+               file="${root_gen_dir}\chrome\browser\resources\chromeos\multidevice_internals\quick_action_controller_form.js"
+               use_base_dir="false"
+               type="BINDATA"/>
       <include name="IDR_MULTIDEVICE_INTERNALS_SHARED_STYLE_JS"
                file="${root_gen_dir}\chrome\browser\resources\chromeos\multidevice_internals\shared_style.js"
                use_base_dir="false"

chrome/browser/resources/chromeos/multidevice_internals/multidevice_phonehub_browser_proxy.js

@@ -3,7 +3,8 @@
 // found in the LICENSE file.
 
 import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
-import {BrowserTabsModel, FeatureStatus, Notification, PhoneStatusModel} from './types.js';
+
+import {BrowserTabsModel, FeatureStatus, FindMyDeviceStatus, Notification, PhoneStatusModel, TetherStatus} from './types.js';
 
 /**
  * JavaScript hooks into the native WebUI handler for Phonehub tab.
@@ -25,6 +26,14 @@ export class MultidevicePhoneHubBrowserProxy {
     chrome.send('setFeatureStatus', [featureStatus]);
   }
 
+  /**
+   * Causes the onboarding flow to show if enabled.
+   * @param {boolean} shouldShowOnboardingFlow Whether to show onboarding flow.
+   */
+  setShowOnboardingFlow(shouldShowOnboardingFlow) {
+    chrome.send('setShowOnboardingFlow', [shouldShowOnboardingFlow]);
+  }
+
   /**
    * Sets the phone name.
    * @param {string} phoneName
@@ -66,6 +75,30 @@ export class MultidevicePhoneHubBrowserProxy {
   removeNotification(notificationId) {
     chrome.send('removeNotification', [notificationId]);
   }
+
+  /**
+   * Enables phone do not disturb.
+   * @param {boolean} enabled
+   */
+  enableDnd(enabled) {
+    chrome.send('enableDnd', [enabled]);
+  }
+
+  /**
+   * Enables phone ringing.
+   * @param {!FindMyDeviceStatus} findMyDeviceStatus
+   */
+  setFindMyDeviceStatus(findMyDeviceStatus) {
+    chrome.send('setFindMyDeviceStatus', [findMyDeviceStatus]);
+  }
+
+  /**
+   * Sets tether status.
+   * @param {!TetherStatus} tetherStatus
+   */
+  setTetherStatus(tetherStatus) {
+    chrome.send('setTetherStatus', [tetherStatus]);
+  }
 }
 
 addSingletonGetter(MultidevicePhoneHubBrowserProxy);

chrome/browser/resources/chromeos/multidevice_internals/notification_form.html

@@ -27,12 +27,6 @@
     flex: 4;
   }
 
-  .dropdown {
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-  }
-
   cr-input {
     padding: 5px;
   }
@@ -74,7 +68,7 @@
     <cr-input label="Package Name"
         value="{{notification.appMetadata.packageName}}" id="packageName">
     </cr-input>
-    <div class="dropdown">
+    <div class="label-top">
       <label>Icon Image Type</label>
       <select id="iconImageTypeSelector" class="md-select"
           on-change="onIconImageTypeSelected_">
@@ -85,7 +79,7 @@
         </template>
       </select>
     </div>
-    <div class="dropdown">
+    <div class="label-top">
       <label>Importance</label>
       <select id="importanceSelector" class="md-select"
           on-change="onImportanceSelected_">
@@ -110,7 +104,7 @@
     <cr-input label="Text Content (Optional)"
         value="{{notification.textContent}}" id="textContent">
     </cr-input>
-    <div class="dropdown">
+    <div class="label-top">
       <label>
         Shared Image Type (Optional)
       </label>
@@ -123,7 +117,7 @@
         </template>
       </select>
     </div>
-    <div class="dropdown">
+    <div class="label-top">
       <label>Contact Image Type (Optional)</label>
       <select id="contactImageSelector" class="md-select"
         on-change="onContactImageTypeSelected_">

chrome/browser/resources/chromeos/multidevice_internals/phonehub_tab.html

@@ -42,12 +42,24 @@
         <span class="emphasize">ENABLED_AND_CONNECTED</span>.
       </div>
     </div>
+    <template is="dom-if" if="[[canOnboardingFlowBeShown_]]" restamp>
+      <div class="cr-row">
+        <div class="cr-padded-text">
+          Toggle on to show Onboarding flow.
+        </div>
+        <cr-toggle checked="{{shouldShowOnboardingFlow_}}">
+        </cr-toggle>
+      </div>
+    </template>
     <template is="dom-if" if="[[isPhoneSetUp_]]" restamp>
       <div class="cr-row">
         <phone-name-form></phone-name-form>
       </div>
     </template>
     <template is="dom-if" if="[[isFeatureEnabledAndConnected_]]" restamp>
+      <div class="cr-row">
+        <quick-action-controller-form></quick-action-controller-form>
+      </div>
       <div class="cr-row">
         <phone-status-model-form></phone-status-model-form>
       </div>

chrome/browser/resources/chromeos/multidevice_internals/phonehub_tab.js

@@ -12,6 +12,7 @@ import './phone_name_form.js';
 import './phone_status_model_form.js';
 import './notification_manager.js';
 import './shared_style.js';
+import './quick_action_controller_form.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {flush, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -59,6 +60,13 @@ Polymer({
       observer: 'onShouldEnableFakePhoneHubManagerChanged_'
     },
 
+    /** @private */
+    shouldShowOnboardingFlow_: {
+      type: Boolean,
+      value: false,
+      observer: 'onShouldShowOnboardingFlowChanged_'
+    },
+
     /**
      * Must stay in order with FeatureStatus.
      * @private
@@ -92,6 +100,12 @@ Polymer({
       computed: 'isPhoneSetUpComputed_(featureStatus_)',
     },
 
+    /** @private */
+    canOnboardingFlowBeShown_: {
+      type: Boolean,
+      computed: 'canOnboardingFlowBeShownComputed_(featureStatus_)',
+    },
+
     /** @private */
     isFeatureEnabledAndConnected_: {
       type: Boolean,
@@ -107,6 +121,18 @@ Polymer({
     this.browserProxy_ = MultidevicePhoneHubBrowserProxy.getInstance();
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  canOnboardingFlowBeShownComputed_() {
+    if (this.featureStatus_ === FeatureStatus.DISABLED ||
+        this.featureStatus_ === FeatureStatus.ELIGIBLE_PHONE_BUT_NOT_SETUP) {
+      return true;
+    }
+    return false;
+  },
+
   /**
    * @return {boolean}
    * @private
@@ -140,6 +166,7 @@ Polymer({
     // Propgagate default values to fake PhoneHub manager.
     flush();
     this.onFeatureStatusSelected_();
+    this.onShouldShowOnboardingFlowChanged_();
   },
 
   /** @private */
@@ -163,6 +190,14 @@ Polymer({
     window.open('chrome://flags/#enable-phone-hub');
   },
 
+  /** @private */
+  onShouldShowOnboardingFlowChanged_() {
+    if (!this.shouldEnableFakePhoneHubManager_) {
+      return;
+    }
+    this.browserProxy_.setShowOnboardingFlow(this.shouldShowOnboardingFlow_);
+  },
+
   /**
    * @param {*} lhs
    * @param {*} rhs

chrome/browser/resources/chromeos/multidevice_internals/quick_action_controller_form.html

+<style include="cr-shared-style shared-style">
+  :host {
+    display: flex;
+    flex: 1 0 100%;
+    padding: 10px;
+    width: 100%;
+  }
+
+  #controls {
+    display: flex;
+    flex: 2;
+  }
+</style>
+
+<div class="column">
+  <span class="emphasize">Quick action items.</span>  Note that the toggles and
+  dropdowns reflect the current state of the feature status. They will update
+  on their own if changed outside of this page.
+</div>
+<div id="controls">
+  <div class="column label-top">
+    <div class="cr-padded-text">
+      Toggle Do Not Disturb
+    </div>
+    <cr-toggle checked="{{isDndEnabled_}}">
+    </cr-toggle>
+  </div>
+  <div class="column label-top">
+    <label>Select Find My Device status</label>
+    <select id="findMyDeviceStatus" class="md-select"
+        on-change="setFindMyDeviceStatus_">
+      <template is="dom-repeat" items="[[findMyDeviceStatusList_]]">
+        <option selected="[[isEqual_(item, findMyDeviceStatus_)]]">
+          [[getFindMyDeviceStatusName_(item)]]
+        </option>
+      </template>
+    </select>
+  </div>
+  <div class="column label-top">
+    <label>Select tether status</label>
+    <select id="tetherStatusList" class="md-select"
+        on-change="setTetherStatus_">
+      <template is="dom-repeat" items="[[tetherStatusList_]]">
+        <option selected="[[isEqual_(item, tetherStatus_)]]">
+          [[getTetherStatusName_(item)]]
+        </option>
+      </template>
+    </select>
+  </div>
+</div>
+

chrome/browser/resources/chromeos/multidevice_internals/quick_action_controller_form.js

+// Copyright 2020 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.
+
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
+import 'chrome://resources/cr_elements/md_select_css.m.js';
+import './shared_style.js';
+
+import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {MultidevicePhoneHubBrowserProxy} from './multidevice_phonehub_browser_proxy.js';
+import {FindMyDeviceStatus, findMyDeviceStatusToString, TetherStatus, tetherStatusToString} from './types.js';
+
+Polymer({
+  is: 'quick-action-controller-form',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [
+    WebUIListenerBehavior,
+  ],
+
+  properties: {
+    /** @private */
+    isDndEnabled_: {
+      type: Boolean,
+      value: false,
+      observer: 'enableDnd_',
+    },
+
+    /** @private {!TetherStatus} */
+    tetherStatus_: {
+      type: Number,
+      value: TetherStatus.INELIGIBLE_FOR_FEATURE,
+    },
+
+    /**
+     * Must stay in order with TetherStatus.
+     * @private
+     */
+    tetherStatusList_: {
+      type: Array,
+      value: () => {
+        return [
+          TetherStatus.INELIGIBLE_FOR_FEATURE,
+          TetherStatus.CONNETION_UNAVAILABLE,
+          TetherStatus.CONNECTION_AVAILABLE,
+          TetherStatus.CONNECTING,
+          TetherStatus.CONNECTED,
+        ];
+      },
+      readonly: true,
+    },
+
+    /** @private {!FindMyDeviceStatus} */
+    findMyDeviceStatus_: {
+      type: Number,
+      value: FindMyDeviceStatus.NOT_AVAILABLE,
+    },
+
+    /**
+     * Must stay in order with FindMyDeviceStatus.
+     * @private
+     */
+    findMyDeviceStatusList_: {
+      type: Array,
+      value: () => {
+        return [
+          FindMyDeviceStatus.NOT_AVAILABLE,
+          FindMyDeviceStatus.OFF,
+          FindMyDeviceStatus.ON,
+        ];
+      },
+      readonly: true,
+    },
+  },
+
+  /** @private {?MultidevicePhoneHubBrowserProxy}*/
+  browserProxy_: null,
+
+  /** @override */
+  created() {
+    this.browserProxy_ = MultidevicePhoneHubBrowserProxy.getInstance();
+  },
+
+  /** @override */
+  attached() {
+    this.addWebUIListener(
+        'is-dnd-enabled-changed', this.onIsDndEnabledChanged_.bind(this));
+    this.addWebUIListener(
+        'find-my-device-status-changed',
+        this.onFindMyDeviceStatusChanged_.bind(this));
+    this.addWebUIListener(
+        'tether-status-changed', this.onTetherStatusChanged_.bind(this));
+  },
+
+  /** @private */
+  enableDnd_() {
+    this.browserProxy_.enableDnd(this.isDndEnabled_);
+  },
+
+  /** @private */
+  setFindMyDeviceStatus_() {
+    const select = /** @type {!HTMLSelectElement} */
+        (this.$$('#findMyDeviceStatus'));
+    this.findMyDeviceStatus_ =
+        this.findMyDeviceStatusList_[select.selectedIndex];
+    this.browserProxy_.setFindMyDeviceStatus(this.findMyDeviceStatus_);
+  },
+
+  /** @private */
+  setTetherStatus_() {
+    const select = /** @type {!HTMLSelectElement} */
+        (this.$$('#tetherStatusList'));
+    this.tetherStatus_ = this.tetherStatusList_[select.selectedIndex];
+    this.browserProxy_.setTetherStatus(this.tetherStatus_);
+  },
+
+  /**
+   * @param{boolean} enabled Whether Dnd is enabled.
+   * @private
+   */
+  onIsDndEnabledChanged_(enabled) {
+    this.isDndEnabled_ = enabled;
+  },
+
+  /**
+   * @param{!FindMyDeviceStatus} findMyDeviceStatus The current Find my device
+   * status.
+   * @private
+   */
+  onFindMyDeviceStatusChanged_(findMyDeviceStatus) {
+    this.findMyDeviceStatus_ = findMyDeviceStatus;
+  },
+
+  /**
+   * @param{!TetherStatus} tetherStatus The current tether status.
+   * @private
+   */
+  onTetherStatusChanged_(tetherStatus) {
+    this.tetherStatus_ = tetherStatus;
+  },
+
+  /**
+   * @param {!FindMyDeviceStatus} findMyDeviceStatus The ringing status.
+   * @private
+   */
+  getFindMyDeviceStatusName_(findMyDeviceStatus) {
+    return findMyDeviceStatusToString.get(findMyDeviceStatus);
+  },
+
+
+  /**
+   * @param {!TetherStatus} tetherStatus The status of the feature.
+   * @private
+   */
+  getTetherStatusName_(tetherStatus) {
+    return tetherStatusToString.get(tetherStatus);
+  },
+
+  /**
+   * @param {*} lhs
+   * @param {*} rhs
+   * @return {boolean}
+   * @private
+   */
+  isEqual_(lhs, rhs) {
+    return lhs === rhs;
+  },
+});

chrome/browser/resources/chromeos/multidevice_internals/shared_style.html

@@ -42,5 +42,11 @@
     .cr-padded-text {
       margin: 10px;
     }
+
+    .label-top {
+      display: flex;
+      flex-direction: column;
+      padding: 5px;
+    }
   </style>
 </template>

chrome/browser/resources/chromeos/multidevice_internals/types.js

@@ -202,3 +202,50 @@ export let AppMetadata;
  * }}
  */
 export let Notification;
+
+/**
+ * Numerical values should not be changed because they must stay in sync with
+ * TetherController::Status in chromeos/components/phonehub/tether_controller.h.
+ * @enum{number}
+ */
+export const TetherStatus = {
+  INELIGIBLE_FOR_FEATURE: 0,
+  CONNETION_UNAVAILABLE: 1,
+  CONNECTION_AVAILABLE: 2,
+  CONNECTING: 3,
+  CONNECTED: 4,
+};
+
+/**
+ * Maps an TetherStatus to its title label in the dropdown.
+ * @type {!Map<TetherStatus, String>}
+ */
+export const tetherStatusToString = new Map([
+  [TetherStatus.INELIGIBLE_FOR_FEATURE, 'Ineligible for feature'],
+  [TetherStatus.CONNETION_UNAVAILABLE, 'Connection unavailable'],
+  [TetherStatus.CONNECTION_AVAILABLE, 'Connection available'],
+  [TetherStatus.CONNECTING, 'Connecting'],
+  [TetherStatus.CONNECTED, 'Connected'],
+]);
+
+/**
+ * Numerical values should not be changed because they must stay in sync with
+ * FindMyDeviceController::Status (TBA) in
+ * chromeos/components/phonehub/find_my_device_controller.h.
+ * @enum{number}
+ */
+export const FindMyDeviceStatus = {
+  NOT_AVAILABLE: 0,
+  OFF: 1,
+  ON: 2,
+};
+
+/**
+ * Maps an FindMyDeviceStatus to its title label in the dropdown.
+ * @type {!Map<FindMyDeviceStatus, String>}
+ */
+export const findMyDeviceStatusToString = new Map([
+  [FindMyDeviceStatus.NOT_AVAILABLE, 'Not Available'],
+  [FindMyDeviceStatus.OFF, 'Off'],
+  [FindMyDeviceStatus.ON, 'On'],
+]);

chrome/browser/ui/webui/chromeos/multidevice_internals/multidevice_internals_phone_hub_handler.cc

@@ -138,6 +138,12 @@ void MultidevicePhoneHubHandler::RegisterMessages() {
       base::BindRepeating(&MultidevicePhoneHubHandler::HandleSetFeatureStatus,
                           base::Unretained(this)));
 
+  web_ui()->RegisterMessageCallback(
+      "setShowOnboardingFlow",
+      base::BindRepeating(
+          &MultidevicePhoneHubHandler::HandleSetShowOnboardingFlow,
+          base::Unretained(this)));
+
   web_ui()->RegisterMessageCallback(
       "setFakePhoneName",
       base::BindRepeating(&MultidevicePhoneHubHandler::HandleSetFakePhoneName,
@@ -162,18 +168,66 @@ void MultidevicePhoneHubHandler::RegisterMessages() {
       "removeNotification",
       base::BindRepeating(&MultidevicePhoneHubHandler::HandleRemoveNotification,
                           base::Unretained(this)));
+
+  web_ui()->RegisterMessageCallback(
+      "enableDnd",
+      base::BindRepeating(&MultidevicePhoneHubHandler::HandleEnableDnd,
+                          base::Unretained(this)));
+
+  web_ui()->RegisterMessageCallback(
+      "setFindMyDeviceStatus",
+      base::BindRepeating(
+          &MultidevicePhoneHubHandler::HandleSetFindMyDeviceStatus,
+          base::Unretained(this)));
+
+  web_ui()->RegisterMessageCallback(
+      "setTetherStatus",
+      base::BindRepeating(&MultidevicePhoneHubHandler::HandleSetTetherStatus,
+                          base::Unretained(this)));
 }
 
 void MultidevicePhoneHubHandler::OnJavascriptDisallowed() {
   RemoveObservers();
 }
 
+void MultidevicePhoneHubHandler::AddObservers() {
+  notification_manager_observer_.Add(
+      fake_phone_hub_manager_->fake_notification_manager());
+  do_not_disturb_controller_observer_.Add(
+      fake_phone_hub_manager_->fake_do_not_disturb_controller());
+  find_my_device_controller_oberserver_.Add(
+      fake_phone_hub_manager_->fake_find_my_device_controller());
+  tether_controller_observer_.Add(
+      fake_phone_hub_manager_->fake_tether_controller());
+}
+
 void MultidevicePhoneHubHandler::RemoveObservers() {
-  auto* fake_notification_manager =
+  phonehub::FakeNotificationManager* fake_notification_manager =
       fake_phone_hub_manager_->fake_notification_manager();
   if (notification_manager_observer_.IsObserving(fake_notification_manager)) {
     notification_manager_observer_.Remove(fake_notification_manager);
   }
+
+  phonehub::FakeDoNotDisturbController* fake_do_not_disturb_controller =
+      fake_phone_hub_manager_->fake_do_not_disturb_controller();
+  if (do_not_disturb_controller_observer_.IsObserving(
+          fake_do_not_disturb_controller)) {
+    do_not_disturb_controller_observer_.Remove(fake_do_not_disturb_controller);
+  }
+
+  phonehub::FakeFindMyDeviceController* fake_find_my_device_controller =
+      fake_phone_hub_manager_->fake_find_my_device_controller();
+  if (find_my_device_controller_oberserver_.IsObserving(
+          fake_find_my_device_controller)) {
+    find_my_device_controller_oberserver_.Remove(
+        fake_find_my_device_controller);
+  }
+
+  phonehub::FakeTetherController* fake_tether_controller =
+      fake_phone_hub_manager_->fake_tether_controller();
+  if (tether_controller_observer_.IsObserving(fake_tether_controller)) {
+    tether_controller_observer_.Remove(fake_tether_controller);
+  }
 }
 
 void MultidevicePhoneHubHandler::OnNotificationsRemoved(
@@ -186,6 +240,57 @@ void MultidevicePhoneHubHandler::OnNotificationsRemoved(
                     removed_notification_id_js_list);
 }
 
+void MultidevicePhoneHubHandler::OnDndStateChanged() {
+  bool is_dnd_enabled =
+      fake_phone_hub_manager_->fake_do_not_disturb_controller()->IsDndEnabled();
+  FireWebUIListener("is-dnd-enabled-changed", base::Value(is_dnd_enabled));
+}
+
+void MultidevicePhoneHubHandler::OnPhoneRingingStateChanged() {
+  // TODO(jimmyxgong): Change to casting the enum TBA to int.
+  bool is_ringing = fake_phone_hub_manager_->fake_find_my_device_controller()
+                        ->IsPhoneRinging();
+  int status_as_int = is_ringing ? 2 : 1;
+  FireWebUIListener("find-my-device-status-changed",
+                    base::Value(status_as_int));
+}
+
+void MultidevicePhoneHubHandler::OnTetherStatusChanged() {
+  int status_as_int = static_cast<int>(
+      fake_phone_hub_manager_->fake_tether_controller()->GetStatus());
+  FireWebUIListener("tether-status-changed", base::Value(status_as_int));
+}
+
+void MultidevicePhoneHubHandler::HandleEnableDnd(const base::ListValue* args) {
+  bool enabled = false;
+  CHECK(args->GetBoolean(0, &enabled));
+  PA_LOG(VERBOSE) << "Setting Do Not Disturb state to " << enabled;
+  fake_phone_hub_manager_->fake_do_not_disturb_controller()
+      ->SetDoNotDisturbState(enabled);
+}
+
+void MultidevicePhoneHubHandler::HandleSetFindMyDeviceStatus(
+    const base::ListValue* args) {
+  int status_as_int = 0;
+  CHECK(args->GetInteger(0, &status_as_int));
+
+  // TODO(jimmyxgong): Change to casting the enum TBA to int.
+  bool is_ringing = status_as_int == 2;
+  PA_LOG(VERBOSE) << "Setting phone ringing status to " << is_ringing;
+  fake_phone_hub_manager_->fake_find_my_device_controller()
+      ->SetPhoneRingingState(is_ringing);
+}
+
+void MultidevicePhoneHubHandler::HandleSetTetherStatus(
+    const base::ListValue* args) {
+  int status_as_int = 0;
+  CHECK(args->GetInteger(0, &status_as_int));
+
+  auto status = static_cast<phonehub::TetherController::Status>(status_as_int);
+  PA_LOG(VERBOSE) << "Setting tether status to " << status;
+  fake_phone_hub_manager_->fake_tether_controller()->SetStatus(status);
+}
+
 void MultidevicePhoneHubHandler::EnableRealPhoneHubManager() {
   // If no FakePhoneHubManager is active, return early. This ensures that we
   // don't unnecessarily re-initialize the Phone Hub UI.
@@ -207,8 +312,7 @@ void MultidevicePhoneHubHandler::EnableFakePhoneHubManager() {
   PA_LOG(VERBOSE) << "Setting fake Phone Hub Manager";
   fake_phone_hub_manager_ = std::make_unique<phonehub::FakePhoneHubManager>();
   ash::SystemTray::Get()->SetPhoneHubManager(fake_phone_hub_manager_.get());
-  notification_manager_observer_.Add(
-      fake_phone_hub_manager_->fake_notification_manager());
+  AddObservers();
 }
 
 void MultidevicePhoneHubHandler::HandleEnableFakePhoneHubManager(
@@ -233,6 +337,15 @@ void MultidevicePhoneHubHandler::HandleSetFeatureStatus(
   fake_phone_hub_manager_->fake_feature_status_provider()->SetStatus(feature);
 }
 
+void MultidevicePhoneHubHandler::HandleSetShowOnboardingFlow(
+    const base::ListValue* args) {
+  bool show_onboarding_flow = false;
+  CHECK(args->GetBoolean(0, &show_onboarding_flow));
+  PA_LOG(VERBOSE) << "Setting show onboarding flow to " << show_onboarding_flow;
+  fake_phone_hub_manager_->fake_onboarding_ui_tracker()
+      ->SetShouldShowOnboardingUi(show_onboarding_flow);
+}
+
 void MultidevicePhoneHubHandler::HandleSetFakePhoneName(
     const base::ListValue* args) {
   base::string16 phone_name;

chrome/browser/ui/webui/chromeos/multidevice_internals/multidevice_internals_phone_hub_handler.h

@@ -6,7 +6,10 @@
 #define CHROME_BROWSER_UI_WEBUI_CHROMEOS_MULTIDEVICE_INTERNALS_MULTIDEVICE_INTERNALS_PHONE_HUB_HANDLER_H_
 
 #include "base/scoped_observer.h"
+#include "chromeos/components/phonehub/do_not_disturb_controller.h"
+#include "chromeos/components/phonehub/find_my_device_controller.h"
 #include "chromeos/components/phonehub/notification_manager.h"
+#include "chromeos/components/phonehub/tether_controller.h"
 #include "content/public/browser/web_ui_message_handler.h"
 
 namespace chromeos {
@@ -20,7 +23,10 @@ namespace multidevice {
 // WebUIMessageHandler for chrome://multidevice-internals PhoneHub section.
 class MultidevicePhoneHubHandler
     : public content::WebUIMessageHandler,
-      public phonehub::NotificationManager::Observer {
+      public phonehub::NotificationManager::Observer,
+      public phonehub::DoNotDisturbController::Observer,
+      public phonehub::FindMyDeviceController::Observer,
+      public phonehub::TetherController::Observer {
  public:
   MultidevicePhoneHubHandler();
   MultidevicePhoneHubHandler(const MultidevicePhoneHubHandler&) = delete;
@@ -38,22 +44,45 @@ class MultidevicePhoneHubHandler
   void OnNotificationsRemoved(
       const base::flat_set<int64_t>& notification_ids) override;
 
+  // DoNotDisturbController::Observer
+  void OnDndStateChanged() override;
+
+  // FindMyDeviceController::Observer
+  void OnPhoneRingingStateChanged() override;
+
+  // TetherController::Observer
+  void OnTetherStatusChanged() override;
+
   void EnableRealPhoneHubManager();
   void EnableFakePhoneHubManager();
   void HandleEnableFakePhoneHubManager(const base::ListValue* args);
   void HandleSetFeatureStatus(const base::ListValue* args);
+  void HandleSetShowOnboardingFlow(const base::ListValue* args);
   void HandleSetFakePhoneName(const base::ListValue* args);
   void HandleSetFakePhoneStatus(const base::ListValue* args);
   void HandleSetBrowserTabs(const base::ListValue* args);
   void HandleSetNotification(const base::ListValue* args);
   void HandleRemoveNotification(const base::ListValue* args);
+  void HandleEnableDnd(const base::ListValue* args);
+  void HandleSetFindMyDeviceStatus(const base::ListValue* args);
+  void HandleSetTetherStatus(const base::ListValue* args);
 
+  void AddObservers();
   void RemoveObservers();
 
   std::unique_ptr<phonehub::FakePhoneHubManager> fake_phone_hub_manager_;
   ScopedObserver<phonehub::NotificationManager,
                  phonehub::NotificationManager::Observer>
       notification_manager_observer_{this};
+  ScopedObserver<phonehub::DoNotDisturbController,
+                 phonehub::DoNotDisturbController::Observer>
+      do_not_disturb_controller_observer_{this};
+  ScopedObserver<phonehub::FindMyDeviceController,
+                 phonehub::FindMyDeviceController::Observer>
+      find_my_device_controller_oberserver_{this};
+  ScopedObserver<phonehub::TetherController,
+                 phonehub::TetherController::Observer>
+      tether_controller_observer_{this};
 };
 
 }  // namespace multidevice

chromeos/components/phonehub/fake_tether_controller.h

@@ -17,9 +17,10 @@ class FakeTetherController : public TetherController {
 
   void SetStatus(Status status);
 
- private:
   // TetherController:
   Status GetStatus() const override;
+
+ private:
   void ScanForAvailableConnection() override;
   void AttemptConnection() override;
   void Disconnect() override;

chromeos/components/phonehub/tether_controller.h

@@ -16,29 +16,31 @@ namespace phonehub {
 // Exposes Instant Tethering functionality to Phone Hub.
 class TetherController {
  public:
+  // Note: Numerical values should stay in sync with JS enums within the debug
+  // UI at //chrome/browser/resources/chromeos/multidevice_internals/types.js.
   enum class Status {
     // The device is ineligible for Instant Tethering, potentially due to the
     // flag being disabled (on Chrome OS or on the phone) or due to an
     // enterprise policy.
-    kIneligibleForFeature,
+    kIneligibleForFeature = 0,
 
     // Instant Tethering is available for use, but currently a connection is
     // unavailable. There are a variety of reasons why this may be the case:
     // the feature could have been disabled in settings, the phone may not have
     // cellular reception, or the phone may not have Google Play Services
     // notifications enabled, which are required for the feature.
-    kConnectionUnavailable,
+    kConnectionUnavailable = 1,
 
     // It is possible to connect, but no connection is active or in progress.
     // This state can occur if a previously-active connection has been
     // disconnected.
-    kConnectionAvailable,
+    kConnectionAvailable = 2,
 
     // Initiating an Instant Tethering connection.
-    kConnecting,
+    kConnecting = 3,
 
     // Connected via Instant Tethering.
-    kConnected
+    kConnected = 4
   };
 
   class Observer : public base::CheckedObserver {