mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 05:08:28 +08:00
Tim van der Lippe
70842f313f
ui/Tooltip.js overrides the HTMLElement prototype to override the title property. Rather than using this property, we shoul be calling Tooltip.install directly. This makes sure that new components are not relying on the behavior of the legacy prototype patching. These usages have been manually audited using the following regexes: Search: ([\S]+)\.title = ([^;]+); Replace: UI.Tooltip.Tooltip.install($1, $2); Note that there are classes in DevTools that also have a title property. Most notably `TreeElement`. We should not be replacing these, as they do not inherit from HTMLElement. Luckily, we are running TypeScript to make sure we don't call `Tooltip.install` with a non-HTMLElement. A follow-up CL will clean up the getters. R=jacktfranklin@chromium.org Bug: 1150762 No-presubmit: True Change-Id: I5928e75c70293531849e0576f4fb2a2a8b3e02d2 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2555060 Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org> Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
// Copyright 2018 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 {Tooltip} from './Tooltip.js';
|
|
import {HBox} from './Widget.js';
|
|
|
|
export class SegmentedButton extends HBox {
|
|
constructor() {
|
|
super(true);
|
|
/** @type {!Map<string, !Element>} */
|
|
this._buttons = new Map();
|
|
|
|
/** @type {?string} */
|
|
this._selected = null;
|
|
this.registerRequiredCSS('ui/segmentedButton.css', {enableLegacyPatching: true});
|
|
this.contentElement.classList.add('segmented-button');
|
|
}
|
|
|
|
/**
|
|
* @param {string} label
|
|
* @param {string} value
|
|
* @param {string=} tooltip
|
|
*/
|
|
addSegment(label, value, tooltip) {
|
|
const button = this.contentElement.createChild('button', 'segmented-button-segment');
|
|
button.textContent = label;
|
|
if (tooltip) {
|
|
Tooltip.install(button, tooltip);
|
|
}
|
|
this._buttons.set(value, button);
|
|
button.addEventListener('click', () => this.select(value));
|
|
}
|
|
|
|
/**
|
|
* @param {string} value
|
|
*/
|
|
select(value) {
|
|
if (this._selected === value) {
|
|
return;
|
|
}
|
|
this._selected = value;
|
|
for (const [key, button] of this._buttons) {
|
|
button.classList.toggle('segmented-button-segment-selected', key === this._selected);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @return {?string}
|
|
*/
|
|
selected() {
|
|
return this._selected;
|
|
}
|
|
}
|