Files
react-native-devtools-frontend/front_end/network/networkConfigView.css
T
Michael Liao 9c1e0ce471 DevTools [Network Conditions]: adding error text for network condition tool custom user agent text input
Re-upload of https://chromium-review.googlesource.com/c/chromium/src/+/1730131 to DevTools repository

Changes:
- added error text div and needed css
- adding value length checks on creation and input

**Note: the text now reads "Custom user agent field is required"
Image of error text:
https://imgur.com/8PI75T3

GIF of error text behavior:
https://imgur.com/o8oZvcW

New error element spacing:
https://imgur.com/hE3Xmli

Bug: 963183
Change-Id: Ib5776ae72d4abaabf03efce5838ddb731283c0ab
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1871820
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
2019-10-23 20:24:47 +00:00

98 lines
1.6 KiB
CSS

/*
* Copyright (c) 2015 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.
*/
.network-config {
padding: 12px;
display: block;
}
.network-config-group {
display: flex;
margin-bottom: 10px;
flex-wrap: wrap;
flex: 0 0 auto;
min-height: 30px;
}
.network-config-title {
margin-right: 16px;
width: 130px;
}
.network-config-fields {
flex: 2 0 200px;
}
.panel-section-separator {
height: 1px;
margin-bottom: 10px;
background: #f0f0f0;
}
/* Disable cache */
.network-config-disable-cache {
line-height: 28px;
border-top: none;
padding-top: 0;
}
.network-config-input-validation-error {
color: var(--input-validation-error);
margin: 5px 0;
}
/* Network throttling */
.network-config-throttling .chrome-select {
width: 100%;
max-width: 250px;
}
.network-config-throttling > .network-config-title {
line-height: 24px;
}
/* User agent */
.network-config-ua > .network-config-title {
line-height: 20px;
}
.network-config-ua span[is="dt-radio"].checked > * {
display: none
}
.network-config-ua input {
display: block;
width: calc(100% - 20px);
}
.network-config-ua input[readonly] {
background-color: rgb(235, 235, 228);
}
.network-config-ua input[type=text], .network-config-ua .chrome-select {
margin-top: 8px;
}
.network-config-ua .chrome-select {
width: calc(100% - 20px);
max-width: 250px;
}
.network-config-ua span[is="dt-radio"] {
display: block;
}
.network-config-ua-custom {
opacity: 0.5;
}
.network-config-ua-custom.checked {
opacity: 1;
}