[Nearby] Move nearby-progress to be shared

This is a mechanical change to move the nearby-progress Polymer component
from being chrome://nearby (Poylmer3) only to being shared with
chrome://os-settings (Polymer2/3). This necessary for Nearby Share's
launch despite Polymer2 being phased out (the conversion won't
be complete in time for M-89 launch).

Bug: 1156035

Change-Id: Iff63927d43215dbcab4325c5794c792fed1550df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575947
Commit-Queue: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834623}

chrome/browser/resources/nearby_share/BUILD.gn

@@ -81,7 +81,6 @@ preprocess_if_expr("preprocess_gen") {
     "nearby_confirmation_page.js",
     "nearby_discovery_page.js",
     "nearby_preview.js",
-    "nearby_progress.js",
   ]
 }
 
@@ -127,7 +126,6 @@ js_type_check("closure_compile") {
     ":nearby_confirmation_page",
     ":nearby_discovery_page",
     ":nearby_preview",
-    ":nearby_progress",
   ]
 }
 
@@ -152,7 +150,7 @@ js_library("discovery_manager") {
 js_library("nearby_confirmation_page") {
   deps = [
     ":nearby_preview",
-    ":nearby_progress",
+    "./shared:nearby_progress.m",
     "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
@@ -181,14 +179,6 @@ js_library("nearby_preview") {
   ]
 }
 
-js_library("nearby_progress") {
-  deps = [
-    "./shared:nearby_device_icon.m",
-    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 html_to_js("web_components") {
   js_files = [
     "app.js",
@@ -196,6 +186,5 @@ html_to_js("web_components") {
     "nearby_confirmation_page.js",
     "nearby_discovery_page.js",
     "nearby_preview.js",
-    "nearby_progress.js",
   ]
 }

chrome/browser/resources/nearby_share/nearby_confirmation_page.js

@@ -13,10 +13,10 @@ import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
 import './nearby_preview.js';
-import './nearby_progress.js';
 import './mojo/nearby_share_target_types.mojom-lite.js';
 import './mojo/nearby_share.mojom-lite.js';
 import './shared/nearby_page_template.m.js';
+import './shared/nearby_progress.m.js';
 import './strings.m.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';

chrome/browser/resources/nearby_share/nearby_progress.html

-<style>
-  #device-name {
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    color: rgba(0, 0, 0, 0.87);
-    display: -webkit-box;
-    letter-spacing: 0.25px;
-    line-height: 154%;
-    overflow: hidden;
-    text-align: center;
-  }
-
-  #icon {
-    height: 68px;
-    margin: auto;
-    width: 68px;
-  }
-
-  .has-error #icon {
-    --nearby-device-icon-color: var(--google-grey-600);
-    --nearby-device-icon-background-color: var(--google-grey-200);
-  }
-
-  #progress-container {
-    display: flex;
-    height: 76px;
-    margin: 8px auto 20px auto;
-    position: relative;
-    width: 76px;
-  }
-
-  #wheel {
-    fill: none;
-    stroke: var(--google-blue-600);
-    stroke-dasharray: 100;
-    stroke-dashoffset: calc(100 - var(--progress-percentage, 0));
-    stroke-linecap: round;
-    stroke-width: 2px;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    transition: stroke-dashoffset 400ms ease;
-  }
-
-  .unknown-progress #wheel {
-    animation: 1.4s ease-in-out infinite both unknown-progress-animation;
-    stroke-dasharray: 116;
-  }
-
-  .has-error #wheel {
-    animation: none;
-    stroke: var(--google-red-600);
-    stroke-dashoffset: 0;
-  }
-
-  #svg {
-    left: 0;
-    position: absolute;
-    top: 0;
-  }
-
-  .unknown-progress #svg {
-    animation: 2s linear infinite svg-animation;
-  }
-
-  .has-error #svg {
-    animation: none;
-  }
-
-  @keyframes unknown-progress-animation {
-    0%,
-    25% {
-      stroke-dashoffset: 115;
-      transform: rotate(0);
-    }
-    50%,
-    75% {
-      stroke-dashoffset: 30;
-      transform: rotate(45deg);
-    }
-    100% {
-      stroke-dashoffset: 115;
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes svg-animation {
-    0% { transform: rotateZ(0deg); }
-    100% { transform: rotateZ(360deg); }
-  }
-</style>
-
-<div id="progress-container" role="progressbar" aria-valuemin="0"
-    aria-valuemax="100" aria-valuenow$="[[progress]]"
-    tabindex$="[[getProgressBarTabIndex_(progress)]]"
-    class$="[[getProgressWheelClass_(progress, hasError)]]">
-  <!-- This svg is inlined so that it can be styled with css; otherwise,
-       it would be better to put it in an iron-icon. -->
-  <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
-    <circle id="wheel"
-        cx="40" cy="40" r="39" pathLength="100">
-    </circle>
-  </svg>
-  <nearby-device-icon id="icon" share-target="[[shareTarget]]">
-  </nearby-device-icon>
-</div>
-<div id="device-name" aria-label="$i18n{nearbyShareOnboardingPageDeviceName}">
-  [[shareTarget.name]]
-</div>

chrome/browser/resources/nearby_share/shared/BUILD.gn

@@ -48,6 +48,8 @@ preprocess_if_expr("preprocess_v2") {
     "nearby_onboarding_page.js",
     "nearby_page_template.html",
     "nearby_page_template.js",
+    "nearby_progress.html",
+    "nearby_progress.js",
     "nearby_share_settings.html",
     "nearby_share_settings.js",
     "nearby_share_settings_behavior.html",
@@ -71,6 +73,7 @@ preprocess_if_expr("preprocess_v3") {
     "nearby_device.m.js",
     "nearby_onboarding_page.m.js",
     "nearby_page_template.m.js",
+    "nearby_progress.m.js",
     "nearby_share_settings.m.js",
     "nearby_share_settings_behavior.m.js",
     "nearby_shared_icons.m.js",
@@ -87,6 +90,7 @@ js_type_check("closure_compile") {
     ":nearby_device",
     ":nearby_onboarding_page",
     ":nearby_page_template",
+    ":nearby_progress",
     ":nearby_share_settings",
     ":nearby_share_settings_behavior",
     ":nearby_visibility_page",
@@ -137,6 +141,13 @@ js_library("nearby_device") {
 js_library("nearby_page_template") {
 }
 
+js_library("nearby_progress") {
+  deps = [
+    ":nearby_device_icon",
+    "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
+  ]
+}
+
 js_library("nearby_onboarding_page") {
   deps = [
     ":nearby_page_template",
@@ -186,6 +197,7 @@ js_type_check("closure_compile_module") {
     ":nearby_device.m",
     ":nearby_onboarding_page.m",
     ":nearby_page_template.m",
+    ":nearby_progress.m",
     ":nearby_share_settings.m",
     ":nearby_share_settings_behavior.m",
     ":nearby_visibility_page.m",
@@ -200,6 +212,7 @@ group("polymer3_elements") {
     ":nearby_device_module",
     ":nearby_onboarding_page_module",
     ":nearby_page_template_module",
+    ":nearby_progress_module",
     ":nearby_shared_icons_module",
     ":nearby_shared_share_type_icons_module",
     ":nearby_visibility_page_module",
@@ -270,6 +283,15 @@ js_library("nearby_page_template.m") {
   extra_deps = [ ":nearby_page_template_module" ]
 }
 
+js_library("nearby_progress.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_progress.m.js" ]
+  deps = [
+    ":nearby_device_icon.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":nearby_progress_module" ]
+}
+
 js_library("nearby_share_settings_behavior.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_share_settings_behavior.m.js" ]
   deps = [
@@ -341,6 +363,14 @@ polymer_modulizer("nearby_page_template") {
   namespace_rewrites = nearby_shared_namespace_rewrites
 }
 
+polymer_modulizer("nearby_progress") {
+  js_file = "nearby_progress.js"
+  html_file = "nearby_progress.html"
+  html_type = "dom-module"
+  auto_imports = nearby_shared_auto_imports
+  namespace_rewrites = nearby_shared_namespace_rewrites
+}
+
 polymer_modulizer("nearby_shared_icons") {
   js_file = "nearby_shared_icons.m.js"
   html_file = "nearby_shared_icons.html"

chrome/browser/resources/nearby_share/shared/nearby_progress.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="nearby_shared_icons.html">
+<link rel="import" href="nearby_device_icon.html">
+
+<dom-module id="nearby-progress">
+  <template>
+    <style>
+      #device-name {
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        color: rgba(0, 0, 0, 0.87);
+        display: -webkit-box;
+        letter-spacing: 0.25px;
+        line-height: 154%;
+        overflow: hidden;
+        text-align: center;
+      }
+
+      #icon {
+        height: 68px;
+        margin: auto;
+        width: 68px;
+      }
+
+      .has-error #icon {
+        --nearby-device-icon-color: var(--google-grey-600);
+        --nearby-device-icon-background-color: var(--google-grey-200);
+      }
+
+      #progress-container {
+        display: flex;
+        height: 76px;
+        margin: 8px auto 20px auto;
+        position: relative;
+        width: 76px;
+      }
+
+      #wheel {
+        fill: none;
+        stroke: var(--google-blue-600);
+        stroke-dasharray: 100;
+        stroke-dashoffset: calc(100 - var(--progress-percentage, 0));
+        stroke-linecap: round;
+        stroke-width: 2px;
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+        transition: stroke-dashoffset 400ms ease;
+      }
+
+      .unknown-progress #wheel {
+        animation: 1.4s ease-in-out infinite both unknown-progress-animation;
+        stroke-dasharray: 116;
+      }
+
+      .has-error #wheel {
+        animation: none;
+        stroke: var(--google-red-600);
+        stroke-dashoffset: 0;
+      }
+
+      #svg {
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
+
+      .unknown-progress #svg {
+        animation: 2s linear infinite svg-animation;
+      }
+
+      .has-error #svg {
+        animation: none;
+      }
+
+      @keyframes unknown-progress-animation {
+        0%,
+        25% {
+          stroke-dashoffset: 115;
+          transform: rotate(0);
+        }
+        50%,
+        75% {
+          stroke-dashoffset: 30;
+          transform: rotate(45deg);
+        }
+        100% {
+          stroke-dashoffset: 115;
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes svg-animation {
+        0% { transform: rotateZ(0deg); }
+        100% { transform: rotateZ(360deg); }
+      }
+    </style>
+
+    <div id="progress-container" role="progressbar" aria-valuemin="0"
+        aria-valuemax="100" aria-valuenow$="[[progress]]"
+        tabindex$="[[getProgressBarTabIndex_(progress)]]"
+        class$="[[getProgressWheelClass_(progress, hasError)]]">
+      <!-- This svg is inlined so that it can be styled with css; otherwise,
+          it would be better to put it in an iron-icon. -->
+      <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+        <circle id="wheel"
+            cx="40" cy="40" r="39" pathLength="100">
+        </circle>
+      </svg>
+      <nearby-device-icon id="icon" share-target="[[shareTarget]]">
+      </nearby-device-icon>
+    </div>
+    <div id="device-name"
+        aria-label="$i18n{nearbyShareOnboardingPageDeviceName}">
+      [[shareTarget.name]]
+    </div>
+  </template>
+  <script src="nearby_progress.js"></script>
+</dom-module>

chrome/browser/resources/nearby_share/nearby_progress.js → chrome/browser/resources/nearby_share/shared/nearby_progress.js

@@ -9,19 +9,9 @@
  * an animation if the percentage is unknown.
  */
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
-import './shared/nearby_device_icon.m.js';
-import './mojo/nearby_share_target_types.mojom-lite.js';
-import './mojo/nearby_share.mojom-lite.js';
-
-import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
 Polymer({
   is: 'nearby-progress',
 
-  _template: html`{__html_template__}`,
-
   properties: {
     /**
      * The share target to show the progress for. Expected to start as null,

chrome/browser/resources/settings/chromeos/nearby_share_page/BUILD.gn

@@ -27,6 +27,7 @@ js_library("nearby_share_confirm_page") {
   deps = [
     "//chrome/browser/resources/nearby_share/shared:nearby_device",
     "//chrome/browser/resources/nearby_share/shared:nearby_page_template",
+    "//chrome/browser/resources/nearby_share/shared:nearby_progress",
   ]
 }
 
@@ -164,6 +165,7 @@ js_library("nearby_share_confirm_page.m") {
   deps = [
     "//chrome/browser/resources/nearby_share/shared:nearby_device.m",
     "//chrome/browser/resources/nearby_share/shared:nearby_page_template.m",
+    "//chrome/browser/resources/nearby_share/shared:nearby_progress.m",
   ]
   extra_deps = [ ":nearby_share_confirm_page_module" ]
 }

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_confirm_page.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="../../shared/nearby_page_template.html">
 <link rel="import" href="../../shared/nearby_device.html">
+<link rel="import" href="../../shared/nearby_progress.html">
 
 <dom-module id="nearby-share-confirm-page">
   <template>

chrome/test/data/webui/nearby_share/BUILD.gn

@@ -20,7 +20,6 @@ js_type_check("closure_compile") {
     ":nearby_confirmation_page_test",
     ":nearby_discovery_page_test",
     ":nearby_preview_test",
-    ":nearby_progress_test",
     ":nearby_share_app_test",
   ]
 }
@@ -59,15 +58,6 @@ js_library("nearby_preview_test") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
-js_library("nearby_progress_test") {
-  deps = [
-    "..:chai_assert",
-    "//chrome/browser/resources/nearby_share:nearby_progress",
-    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
-  ]
-  externs_list = [ "$externs_path/mocha-2.5.js" ]
-}
-
 js_library("nearby_share_app_test") {
   deps = [
     "..:chai_assert",

chrome/test/data/webui/nearby_share/nearby_browsertest.js

@@ -43,7 +43,6 @@ const NearbyBrowserTest = class extends PolymerTest {
 [['ConfirmationPage', 'nearby_confirmation_page_test.js'],
  ['DiscoveryPage', 'nearby_discovery_page_test.js'],
  ['Preview', 'nearby_preview_test.js'],
- ['Progress', 'nearby_progress_test.js'],
  ['ShareApp', 'nearby_share_app_test.js'],
 ].forEach(test => registerTest(...test));
 

chrome/test/data/webui/nearby_share/shared/BUILD.gn

@@ -17,6 +17,7 @@ js_modulizer("modulize") {
     "nearby_device_test.js",
     "nearby_onboarding_page_test.js",
     "nearby_page_template_test.js",
+    "nearby_progress_test.js",
     "nearby_visibility_page_test.js",
   ]
   namespace_rewrites = test_namespace_rewrites + [
@@ -42,6 +43,7 @@ js_type_check("closure_compile") {
     ":nearby_device_test.m",
     ":nearby_onboarding_page_test.m",
     ":nearby_page_template_test.m",
+    ":nearby_progress_test.m",
     ":nearby_visibility_page_test.m",
   ]
 }
@@ -109,6 +111,16 @@ js_library("nearby_page_template_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
+js_library("nearby_progress_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_progress_test.m.js" ]
+  deps = [
+    "../..:chai_assert",
+    "//chrome/browser/resources/nearby_share/shared:nearby_progress.m",
+  ]
+  extra_deps = [ ":modulize" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("fake_nearby_share_settings.m") {
   sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/fake_nearby_share_settings.m.js" ]
   deps = [

chrome/test/data/webui/nearby_share/nearby_progress_test.js → chrome/test/data/webui/nearby_share/shared/nearby_progress_test.js

@@ -2,14 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
 // So that mojo is defined.
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
-
-import 'chrome://nearby/nearby_progress.js';
-import 'chrome://nearby/mojo/nearby_share.mojom-lite.js';
-
-import {assertEquals} from '../chai_assert.js';
+// #import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+// #import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+// #import 'chrome://nearby/mojo/nearby_share_target_types.mojom-lite.js';
+// #import 'chrome://nearby/mojo/nearby_share.mojom-lite.js';
+// #import 'chrome://nearby/shared/nearby_progress.m.js';
+// #import {assertEquals} from '../../chai_assert.js';
+// clang-format on
 
 suite('ProgressTest', function() {
   /** @type {!NearbyProgressElement} */

chrome/test/data/webui/nearby_share/shared/nearby_shared_browsertest.js

@@ -126,6 +126,24 @@ var NearbyPageTemplateTest = class extends NearbySharedBrowserTest {
 
 TEST_F('NearbyPageTemplateTest', 'All', () => mocha.run());
 
+/**
+ * @extends {NearbySharedBrowserTest}
+ */
+var NearbyProgressTest = class extends NearbySharedBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'shared/nearby_progress.html';
+  }
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'nearby_progress_test.js',
+    ]);
+  }
+};
+
+TEST_F('NearbyProgressTest', 'All', () => mocha.run());
+
 /**
  * @extends {NearbySharedBrowserTest}
  */

chrome/test/data/webui/nearby_share/shared/nearby_shared_v3_browsertest.js

@@ -43,6 +43,7 @@ const NearbySharedV3Test = class extends PolymerTest {
  ['Device', 'nearby_device_test.m.js'],
  ['OnboardingPage', 'nearby_onboarding_page_test.m.js'],
  ['PageTemplate', 'nearby_page_template_test.m.js'],
+ ['Progress', 'nearby_progress_test.m.js'],
  ['VisibilityPage', 'nearby_visibility_page_test.m.js'],
  ['ContactVisibility', 'nearby_contact_visibility_test.m.js'],
 ].forEach(test => registerTest(...test));