mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-30 01:43:36 +08:00
Kim-Anh Tran
408ba63f4e
This reverts commit e86cf9569e.
Reason for revert: Visual regressions, see crbug.com/1317003
Original change's description:
> Fix 1283364 issue, modify style to allow scroll x-axis
>
> Unlike "Styles", "Computed" tab, lots of "Properties"'s item are
> expandable and have very long text value. If wrap text value to next
> line, the text could easily occupy dozen lines, UX is bad.
>
> This CL:
>
> 1. Modify scrollable area, to keep Filter input on the top when scroll
> y-axis (like "Styles" tab).
>
> 2. Modify style to allow properties section able scroll both x and y
> axis
>
> Note: Previously, ".properties-widget-section" class are useless, this
> CL modify its style and use it.
>
>
> How to test:
> 1. open DevTools
> 2. Goto "Elements" -> "Properties", then scroll x, y axis make sure UI
> is fine.
>
> Before vs After screenshots:
> - https://imgur.com/a/33M3h6r
>
> After, screen video record:
> - https://youtu.be/18aviY7SPIQ
>
> Bug: 1283364
> Change-Id: I3403c10d96b72d31ffceb59fc3e966b86904e341
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3583289
> Reviewed-by: Changhao Han <changhaohan@chromium.org>
> Commit-Queue: Changhao Han <changhaohan@chromium.org>
Bug: 1283364, 1317003
Change-Id: Ic86e874552d9e9b65af7bb2cfbc55295b871b870
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3593393
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
45 lines
1.0 KiB
CSS
45 lines
1.0 KiB
CSS
/*
|
|
* Copyright (c) 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.
|
|
*/
|
|
|
|
.properties-widget-section {
|
|
padding: 2px 0 2px 5px;
|
|
flex: none;
|
|
}
|
|
|
|
.properties-widget-toolbar {
|
|
border-bottom: 1px solid var(--color-details-hairline-light);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.properties-widget-filter-box {
|
|
flex: auto;
|
|
display: flex;
|
|
}
|
|
|
|
.properties-widget-filter-box > input {
|
|
outline: none !important; /* stylelint-disable-line declaration-no-important */
|
|
border: none;
|
|
width: 100%;
|
|
background: var(--color-background);
|
|
padding-left: 4px;
|
|
margin: 3px;
|
|
}
|
|
|
|
.properties-widget-filter-box > input:focus,
|
|
.properties-widget-filter-box > input:not(:placeholder-shown) {
|
|
box-shadow: var(--legacy-focus-ring-active-shadow);
|
|
}
|
|
|
|
.properties-widget-filter-box > input::placeholder {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.properties-widget-filter-box > input {
|
|
border: 1px solid ButtonText;
|
|
}
|
|
}
|