mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 13:18:29 +08:00
Benedikt Meurer
723d5437e6
This adds an `icon()` method to `ScopeChainEntry`, and extends the `ScopeChainSideparPane` with an optional `<img>` element that shows this icon. This implements the recommended UX improvements to make it easier to differentiate between the scopes themself and the items listed in the scopes. It is implemented via a new method `getScopeInfo()` method in the language plugin extension API that returns the scope type, a user visible type name, and the optional icon. Before: https://imgur.com/a/xIvhdM4 After: https://imgur.com/a/6WHoceO Bug: chromium:1136484 Change-Id: I5927e1502bc88b0d802aca5dcbc220df8d7c7f5d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2461769 Commit-Queue: Benedikt Meurer <bmeurer@chromium.org> Reviewed-by: Peter Müller <petermueller@chromium.org> Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
34 lines
650 B
CSS
34 lines
650 B
CSS
/*
|
|
* Copyright 2017 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.
|
|
*/
|
|
|
|
.scope-chain-sidebar-pane-section-header {
|
|
flex: auto;
|
|
}
|
|
|
|
.scope-chain-sidebar-pane-section-icon {
|
|
float: left;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.scope-chain-sidebar-pane-section-subtitle {
|
|
float: right;
|
|
margin-left: 5px;
|
|
max-width: 55%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scope-chain-sidebar-pane-section-title {
|
|
font-weight: normal;
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
.scope-chain-sidebar-pane-section {
|
|
padding: 2px 4px;
|
|
flex: none;
|
|
}
|