mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-06 12:01:40 +08:00
Livvie Lin
6a61f8415e
Security UX is experimenting with using a grey triangle warning for non-secure site connections (crbug.com/997972). When this icon is shown, DevTools Security panel's security overview should match the state shown in the omnibox. Previously, crrev.com/c/1874787 added the insecure-broken state to the DevTools protocol, so this cl does the setup so that once the insecure-broken state gets sent for the DANGEROUS security state (crrev.com/c/1879498, which needs to be submitted after the frontend changes) and non-secure connections get styled as kInsecure (crrev.com/c/1877653), the triangle pointer will point to the correct icon. For non-secure states, reuse the triangle icon but style it differently depending on whether the state is HTTP or broken HTTPS. Bug: 1008218 Change-Id: Ib893489a9d7c450892eff5e33bbbf3f2aef2e283 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1880092 Reviewed-by: Yang Guo <yangguo@chromium.org> Commit-Queue: Livvie Lin <livvielin@chromium.org>
88 lines
1.8 KiB
CSS
88 lines
1.8 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.
|
|
*/
|
|
|
|
.lock-icon,
|
|
.security-property {
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
-webkit-mask-image: url(Images/securityIcons.svg);
|
|
-webkit-mask-size: 80px 32px;
|
|
|
|
background-color: #888;
|
|
}
|
|
|
|
.lock-icon-secure {
|
|
-webkit-mask-position: 0px 0px;
|
|
background-color: #0B8043;
|
|
}
|
|
|
|
.lock-icon-unknown,
|
|
.lock-icon-neutral {
|
|
-webkit-mask-position: -16px 0px;
|
|
background-color: #000000; /* Black for clarity on lower DPI screens */
|
|
}
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 1.1) {
|
|
.lock-icon-unknown,
|
|
.lock-icon-neutral {
|
|
background-color: #5A5A5A; /* Gray for hiDPI screens */
|
|
}
|
|
}
|
|
|
|
.lock-icon-insecure {
|
|
-webkit-mask-position: -32px 0px;
|
|
background-color: #5A5A5A;
|
|
}
|
|
|
|
.lock-icon-insecure-broken {
|
|
-webkit-mask-position: -32px 0px;
|
|
background-color: #C63626;
|
|
}
|
|
|
|
.security-property-secure {
|
|
-webkit-mask-position: 0px -16px;
|
|
background-color: #0B8043;
|
|
}
|
|
|
|
.security-property-neutral {
|
|
-webkit-mask-position: -16px -16px;
|
|
background-color: #C63626;
|
|
}
|
|
|
|
.security-property-insecure {
|
|
-webkit-mask-position: -32px -16px;
|
|
background-color: #C63626;
|
|
}
|
|
|
|
.security-property-insecure-broken {
|
|
-webkit-mask-position: -32px -16px;
|
|
background-color: #C63626;
|
|
}
|
|
|
|
.security-property-info {
|
|
-webkit-mask-position: -48px -16px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.security-property-unknown {
|
|
-webkit-mask-position: -64px -16px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.url-scheme-secure {
|
|
color: #0b8043;
|
|
}
|
|
|
|
.url-scheme-neutral,
|
|
.url-scheme-insecure,
|
|
.url-scheme-insecure-broken {
|
|
color: #cb3626;
|
|
}
|
|
|
|
.url-scheme-separator {
|
|
color: #8a8a8a;
|
|
}
|