[Lorenz] Increase size of up/down arrows on numeric inputs

The up/down arrows have been changed into actual buttons. The original
up/down arrows in the spinbox that comes with <input type="number"> have
been removed via CSS.

Inbound/outbound inputs have also been moved into one reusable
NumericInput component.

Bug: 1102546
Change-Id: I34b40a17cc250b4649459c138b0a9cbdf1b3c241
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2332846
Commit-Queue: James Long <yjlong@google.com>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Reviewed-by: Mohamed Heikal <mheikal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#794625}

tools/android/dependency_analysis/js/src/vue_components/class_graph_page.vue

@@ -11,10 +11,14 @@
       <GraphFilterItems
           :node-filter-data="displaySettingsData.nodeFilterData"
           @[CUSTOM_EVENTS.FILTER_ELEMENT_CLICKED]="removeNodeFromFilter"/>
-      <GraphInboundInput
-          :inbound-depth-data="displaySettingsData"/>
-      <GraphOutboundInput
-          :outbound-depth-data="displaySettingsData"/>
+      <NumericInput
+          description="Change inbound (blue) depth:"
+          input-id="inbound-input"
+          :input-value.sync="displaySettingsData.inboundDepth"/>
+      <NumericInput
+          description="Change outbound (yellow) depth:"
+          input-id="outbound-input"
+          :input-value.sync="displaySettingsData.outboundDepth"/>
     </div>
     <div id="graph-and-node-details-container">
       <GraphVisualization
@@ -57,10 +61,9 @@ import ClassGraphHullSettings from './class_graph_hull_settings.vue';
 import GraphDisplaySettings from './graph_display_settings.vue';
 import GraphFilterInput from './graph_filter_input.vue';
 import GraphFilterItems from './graph_filter_items.vue';
-import GraphInboundInput from './graph_inbound_input.vue';
-import GraphOutboundInput from './graph_outbound_input.vue';
 import GraphSelectedNodeDetails from './graph_selected_node_details.vue';
 import GraphVisualization from './graph_visualization.vue';
+import NumericInput from './numeric_input.vue';
 
 /**
  * @param {!ClassNode} node The node to get the build target of.
@@ -82,10 +85,9 @@ const ClassGraphPage = {
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
-    GraphInboundInput,
-    GraphOutboundInput,
     GraphSelectedNodeDetails,
     GraphVisualization,
+    NumericInput,
   },
   props: {
     graphJson: Object,

tools/android/dependency_analysis/js/src/vue_components/graph_inbound_input.vue

-<!-- 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. -->
-
-<template>
-  <div class="user-input-group">
-    <label for="filter-inbound">Change inbound (blue) depth:</label>
-    <input
-        id="filter-inbound"
-        v-model.number="inboundDepthData.inboundDepth"
-        type="number">
-  </div>
-</template>
-
-<script>
-// @vue/component
-const GraphInboundInput = {
-  props: {
-    inboundDepthData: Object,
-  },
-};
-
-export default GraphInboundInput;
-</script>

tools/android/dependency_analysis/js/src/vue_components/graph_outbound_input.vue

-<!-- 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. -->
-
-<template>
-  <div class="user-input-group">
-    <label for="filter-outbound">Change outbound (yellow) depth:</label>
-    <input
-        id="filter-outbound"
-        v-model.number="outboundDepthData.outboundDepth"
-        type="number">
-  </div>
-</template>
-
-<script>
-// @vue/component
-const GraphOutboundInput = {
-  props: {
-    outboundDepthData: Object,
-  },
-};
-
-export default GraphOutboundInput;
-</script>

tools/android/dependency_analysis/js/src/vue_components/numeric_input.vue

+<!-- 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. -->
+
+<template>
+  <div class="numeric-input-container">
+    <label :for="inputId">{{ description }}</label>
+    <div class="input-and-button-container">
+      <input
+          :id="inputId"
+          v-model="internalInputValue"
+          type="number">
+      <div class="button-group">
+        <button @click="internalInputValue++">
+          +
+        </button>
+        <button @click="internalInputValue--">
+          -
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// @vue/component
+const NumericInput = {
+  props: {
+    description: String,
+    inputId: String,
+    inputValue: Number,
+  },
+  computed: {
+    internalInputValue: {
+      get: function() {
+        return this.inputValue;
+      },
+      set: function(newValue) {
+        this.$emit('update:inputValue', newValue);
+      },
+    },
+  },
+};
+
+export default NumericInput;
+</script>
+
+<style scoped>
+.numeric-input-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 150px;
+}
+
+.input-and-button-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: column;
+}
+
+input {
+  width: 100%;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

tools/android/dependency_analysis/js/src/vue_components/package_graph_page.vue

@@ -11,10 +11,14 @@
       <GraphFilterItems
           :node-filter-data="displaySettingsData.nodeFilterData"
           @[CUSTOM_EVENTS.FILTER_ELEMENT_CLICKED]="removeNodeFromFilter"/>
-      <GraphInboundInput
-          :inbound-depth-data="displaySettingsData"/>
-      <GraphOutboundInput
-          :outbound-depth-data="displaySettingsData"/>
+      <NumericInput
+          description="Change inbound (blue) depth:"
+          input-id="inbound-input"
+          :input-value.sync="displaySettingsData.inboundDepth"/>
+      <NumericInput
+          description="Change outbound (yellow) depth:"
+          input-id="outbound-input"
+          :input-value.sync="displaySettingsData.outboundDepth"/>
     </div>
     <div id="graph-and-node-details-container">
       <GraphVisualization
@@ -53,10 +57,9 @@ import {parsePackageGraphModelFromJson} from '../process_graph_json.js';
 import GraphDisplaySettings from './graph_display_settings.vue';
 import GraphFilterInput from './graph_filter_input.vue';
 import GraphFilterItems from './graph_filter_items.vue';
-import GraphInboundInput from './graph_inbound_input.vue';
-import GraphOutboundInput from './graph_outbound_input.vue';
 import GraphSelectedNodeDetails from './graph_selected_node_details.vue';
 import GraphVisualization from './graph_visualization.vue';
+import NumericInput from './numeric_input.vue';
 import PackageDetailsPanel from './package_details_panel.vue';
 
 // @vue/component
@@ -65,10 +68,9 @@ const PackageGraphPage = {
     GraphDisplaySettings,
     GraphFilterInput,
     GraphFilterItems,
-    GraphInboundInput,
-    GraphOutboundInput,
     GraphSelectedNodeDetails,
     GraphVisualization,
+    NumericInput,
     PackageDetailsPanel,
   },
   props: {