Skip to content

Commit

Permalink
Merge port forwarding fixes to release branch M103
Browse files Browse the repository at this point in the history
crostini: fix port forwarding toggles to be container aware Mk2

Previous CL went in with commented out lines because I forgot to disable
auto-submit. Real test fixes in this CL.

Bug: b/234394209
Change-Id: If1749a64ed9d56705d0c412e425621b5bc60b569
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3688770
Auto-Submit: Nicholas Verne <nverne@chromium.org>
Commit-Queue: Christopher Lam <calamity@chromium.org>
Reviewed-by: Christopher Lam <calamity@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1010450}
(cherry picked from commit d0c3350)


crostini: fix port forwarding toggles to be container aware

Bug: b/234394209
Change-Id: I66e2872dc1c807360c9ae2002034fdf29bbc8ac8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3685680
Auto-Submit: Nicholas Verne <nverne@chromium.org>
Reviewed-by: Christopher Lam <calamity@chromium.org>
Commit-Queue: Christopher Lam <calamity@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1010414}
(cherry picked from commit a536f5f)


crostini: Adds container options for port forwarding

New re-usable element <settings-crostini-container-select> is
shown only when there is more than one container available.

Ports forwarded are grouped by container in the UI.

(cherry picked from commit 85bb555)

Bug: 1261319
Change-Id: If9171c53bffe68404d21a292f819eda946a067b1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3636504
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Nicholas Verne <nverne@chromium.org>
Cr-Original-Commit-Position: refs/heads/main@{#1009004}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3688779
Commit-Queue: Christopher Lam <calamity@chromium.org>
Reviewed-by: Christopher Lam <calamity@chromium.org>
Auto-Submit: Nicholas Verne <nverne@chromium.org>
Cr-Commit-Position: refs/branch-heads/5060@{#587}
Cr-Branched-From: b83393d-refs/heads/main@{#1002911}
  • Loading branch information
Nicholas Verne authored and Chromium LUCI CQ committed Jun 6, 2022
1 parent de2ee59 commit 94b9756
Show file tree
Hide file tree
Showing 12 changed files with 608 additions and 289 deletions.
1 change: 1 addition & 0 deletions chrome/browser/resources/settings/chromeos/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,7 @@ preprocess_if_expr("preprocess_gen_v3") {
"chromeos/crostini_page/crostini_arc_adb.js",
"chromeos/crostini_page/crostini_arc_adb_confirmation_dialog.js",
"chromeos/crostini_page/crostini_confirmation_dialog.js",
"chromeos/crostini_page/crostini_container_select.js",
"chromeos/crostini_page/crostini_disk_resize_confirmation_dialog.js",
"chromeos/crostini_page/crostini_disk_resize_dialog.js",
"chromeos/crostini_page/crostini_export_import.js",
Expand Down
17 changes: 14 additions & 3 deletions chrome/browser/resources/settings/chromeos/crostini_page/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ js_type_check("closure_compile_module") {
":crostini_arc_adb_confirmation_dialog",
":crostini_browser_proxy",
":crostini_confirmation_dialog",
":crostini_container_select",
":crostini_disk_resize_confirmation_dialog",
":crostini_disk_resize_dialog",
":crostini_export_import",
Expand Down Expand Up @@ -66,9 +67,16 @@ js_library("crostini_browser_proxy") {

js_library("crostini_confirmation_dialog") {
deps = [
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
"//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
"//ui/webui/resources/js:load_time_data.m",
":crostini_browser_proxy",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}

js_library("crostini_container_select") {
deps = [
":crostini_browser_proxy",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/js:cr.m",
]
}

Expand Down Expand Up @@ -144,6 +152,7 @@ js_library("crostini_page") {
js_library("crostini_port_forwarding") {
deps = [
":crostini_browser_proxy",
":crostini_container_select",
":crostini_port_forwarding_add_port_dialog",
"..:metrics_recorder",
"..:prefs_behavior",
Expand All @@ -164,6 +173,7 @@ js_library("crostini_port_forwarding") {
js_library("crostini_port_forwarding_add_port_dialog") {
deps = [
":crostini_browser_proxy",
":crostini_container_select",
"..:metrics_recorder",
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
"//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
Expand Down Expand Up @@ -231,6 +241,7 @@ html_to_js("web_components") {
"crostini_arc_adb_confirmation_dialog.js",
"crostini_arc_adb.js",
"crostini_confirmation_dialog.js",
"crostini_container_select.js",
"crostini_disk_resize_confirmation_dialog.js",
"crostini_disk_resize_dialog.js",
"crostini_export_import.js",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ import {loadTimeData} from '../../i18n_setup.js';
*/
export let ContainerId;

/** @type {!ContainerId} */ export const DEFAULT_CONTAINER_ID = {
vm_name: DEFAULT_CROSTINI_VM,
container_name: DEFAULT_CROSTINI_CONTAINER,
};

/**
* These values should remain consistent with their C++ counterpart
* (chrome/browser/ash/crostini/crostini_port_forwarder.h).
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<style include="settings-shared md-select"></style>
<select id="selectContainer"
class="md-select"
value="containerLabel_(containerId)"
on-change="onSelectContainer_">
<template is="dom-repeat" items="[[containers]]">
<option value="[[item.id]]">
[[containerLabel_(item.id)]]
</option>
</template>
</select>
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
// Copyright 2022 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.

/**
* @fileoverview 'settings-crostini-container-select' is a component enabling a
* user to select a target container from a list stored in prefs.
*/
import '//resources/cr_elements/md_select_css.m.js';
import '../../settings_shared_css.js';

import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {ContainerId, ContainerInfo, DEFAULT_CONTAINER_ID, DEFAULT_CROSTINI_VM} from './crostini_browser_proxy.js';

/**
* @param {!ContainerId} first
* @param {!ContainerId} second
* @return boolean
*/
export function equalContainerId(first, second) {
return first.vm_name === second.vm_name &&
first.container_name === second.container_name;
}

/**
* @param {!ContainerId} id
* @return string
*/
export function containerLabel(id) {
if (id.vm_name === DEFAULT_CROSTINI_VM) {
return id.container_name;
}
return id.vm_name + ':' + id.container_name;
}


/** @polymer */
class ContainerSelectElement extends PolymerElement {
static get is() {
return 'settings-crostini-container-select';
}

static get template() {
return html`{__html_template__}`;
}

static get properties() {
return {
/**
* @type {!ContainerId}
*/
selectedContainerId: {
type: Object,
notify: true,
},

/**
* List of containers that are already stored in the settings.
* @type {!Array<!ContainerInfo>}
*/
containers: {
type: Array,
value() {
return [];
},
},
};
}


/**
* @param {!Event} e
* @private
*/
onSelectContainer_(e) {
const index = e.target.selectedIndex;
if (index >= 0 && index < this.containers.length) {
this.selectedContainerId = this.containers[index].id;
}
}

/**
* @param {!ContainerId} id
* @return string
* @private
*/
containerLabel_(id) {
return containerLabel(id);
}
}

customElements.define(ContainerSelectElement.is, ContainerSelectElement);
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,18 @@
margin-inline-end: calc(var(--cr-toggle-margin-inline-start) +
var(--cr-toggle-width));
}

#portForwardingListContainerId {
color: var(--cros-text-color-disabled);
margin-inline-start: 8px;
}

#portForwardingListCard {
background-color: var(--cr-card-background-color);
border-radius: var(--cr-card-border-radius);
box-shadow: var(--cr-card-shadow);
}

</style>
<div class="settings-box first"
id="portForwardingDescription">
Expand All @@ -58,6 +70,14 @@
aria-describedby="i18n{portForwardingDescription}">
$i18n{crostiniPortForwardingAddPortButton}
</cr-button>
<template is="dom-if" if="[[allPorts_.length]]" restamp>
<cr-icon-button id="showRemoveAllPortsMenu"
class="icon-more-vert"
title="$i18n{moreActions}"
on-click="onShowRemoveAllPortsMenuClick_"
aria-label="$i18n{moreActions}">
</cr-icon-button>
</template>
</div>
<template is="dom-if" if="[[!allPorts_.length]]" restamp>
<div id="no-ports-text"
Expand All @@ -66,75 +86,85 @@
</div>
</template>
<template is="dom-if" if="[[allPorts_.length]]" restamp>
<div class="list-frame vertical-list">
<div class="list-item">
<div id="portForwardingListPortNumber"
class="start column-title"
aria-hidden="true">
$i18n{crostiniPortForwardingListPortNumber}
</div>
<div id="portForwardingListPortLabel"
class="column-title label-column"
aria-hidden="true">
$i18n{crostiniPortForwardingListLabel}
<template is="dom-repeat" items="[[allContainers_]]"
as="containerInfo" index-as="cidx" mutable-data>
<template is="dom-if"
if="[[hasContainerPorts_(allPorts_, containerInfo.id)]]" restamp>
<div id="portForwardingListContainerId"
hidden="[[!showContainerId_(allPorts_, containerInfo.id)]]"
class="settings-box first">
[[containerLabel_(containerInfo.id)]]
</div>
<cr-icon-button id="showRemoveAllPortsMenu"
class="icon-more-vert"
title="$i18n{moreActions}"
on-click="onShowRemoveAllPortsMenuClick_"
aria-label="$i18n{moreActions}">
</cr-icon-button>
</div>
<template is="dom-repeat" items="[[allPorts_]]">
<div class="list-item">
<div id="crostiniPort[[index]]" class="start" aria-hidden="true">
[[item.port_number]]
<span id="protocolText">
<template is="dom-if" if="[[!item.protocol_type]]" restamp>
$i18n{crostiniPortForwardingTCP}
</template>
<template is="dom-if" if="[[item.protocol_type]]" restamp>
$i18n{crostiniPortForwardingUDP}
</template>
</span>
</div>
<div id="crostiniPortLabel[[index]]"
class="label-column"
aria-hidden="true">
[[item.label]]
<div class="list-frame vertical-list" id="portForwardingListCard">
<div class="list-item">
<div id="portForwardingListPortNumber"
class="start column-title"
aria-hidden="true">
$i18n{crostiniPortForwardingListPortNumber}
</div>
<div id="portForwardingListPortLabel"
class="column-title label-column"
aria-hidden="true">
$i18n{crostiniPortForwardingListLabel}
</div>
</div>
<cr-toggle
id="toggleActivationButton[[index]]"
checked="[[item.is_active]]"
data-port-number$="[[item.port_number]]"
data-protocol-type$="[[item.protocol_type]]"
data-container-id$="[[item.container_id]]"
on-change="onPortActivationChange_"
aria-label="$i18n{crostiniPortForwardingToggleAriaLabel}"
aria-describedby$=
"crostiniPort[[index]] crostiniPortLabel[[index]]"
disabled="[[!crostiniRunning_]]">
</cr-toggle>
<cr-icon-button id="showRemoveSinglePortMenu[[index]]"
class="icon-more-vert"
title="$i18n{moreActions}"
on-click="onShowRemoveSinglePortMenuClick_"
data-port-number$="[[item.port_number]]"
data-protocol-type$="[[item.protocol_type]]"
data-container-id$="[[item.container_id]]"
aria-label=
<template is="dom-repeat" items="[[allPorts_]]"
filter="[[byContainerId_(containerInfo.id)]]" mutable-data>
<div class="list-item">
<div id="crostiniPort[[cidx]]-[[index]]"
class="start"
aria-hidden="true">
[[item.port_number]]
<span id="protocolText">
<template is="dom-if" if="[[!item.protocol_type]]" restamp>
$i18n{crostiniPortForwardingTCP}
</template>
<template is="dom-if" if="[[item.protocol_type]]" restamp>
$i18n{crostiniPortForwardingUDP}
</template>
</span>
</div>
<div id="crostiniPortLabel[[cidx]]-[[index]]"
class="label-column"
aria-hidden="true">
[[item.label]]
</div>
<cr-toggle
id="toggleActivationButton[[cidx]]-[[index]]"
checked="[[item.is_active]]"
data-port-number$="[[item.port_number]]"
data-protocol-type$="[[item.protocol_type]]"
data-container-id="[[item.container_id]]"
on-change="onPortActivationChange_"
aria-label="$i18n{crostiniPortForwardingToggleAriaLabel}"
aria-describedby$="crostiniPort[[cidx]]-[[index]]
crostiniPortLabel[[cidx]]-[[index]]"
disabled="[[!containerInfo.ipv4]]">
</cr-toggle>
<cr-icon-button
id="showRemoveSinglePortMenu[[cidx]]-[[index]]"
class="icon-more-vert"
title="$i18n{moreActions}"
on-click="onShowRemoveSinglePortMenuClick_"
data-port-number$="[[item.port_number]]"
data-protocol-type$="[[item.protocol_type]]"
data-container-id="[[item.container_id]]"
aria-label=
"$i18n{crostiniPortForwardingShowMoreActionsAriaLabel}"
aria-describedby$=
"crostiniPort[[index]] crostiniPortLabel[[index]]">
</cr-icon-button>
aria-describedby$="crostiniPort[[cidx]]-[[index]]
crostiniPortLabel[[cidx]]-[[index]]">
</cr-icon-button>
</div>
</template>
</div>
</template>
</div>
</template>
</template>
<template is="dom-if" if="[[showAddPortDialog_]]" restamp>
<settings-crostini-add-port-dialog
on-close="onAddPortDialogClose_"
all-ports="[[allPorts_]]">
all-ports="[[allPorts_]]"
all-containers="[[allContainers_]]">
</settings-crostini-add-port-dialog>
</template>
<cr-lazy-render id="removeAllPortsMenu">
Expand Down

0 comments on commit 94b9756

Please sign in to comment.