mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1277858 - adding more polish to console input focus style. r=bgrins 

MozReview-Commit-ID: 1LVCcYe1a0S

--HG--
extra : rebase_source : aa9127344471d051e791214a2e7bedfa83199ebc
This commit is contained in:
Yura Zenevich 2016-06-03 14:15:29 -04:00
Родитель 1c35e2ccda
Коммит 4b0480b626
9 изменённых файлов: 73 добавлений и 49 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
devtools/client/jar.mn
Просмотреть файл

@ -169,8 +169,7 @@ devtools.jar:
skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
skin/images/filetypes/store.svg (themes/images/filetypes/store.svg)
skin/images/commandline-icon.png (themes/images/commandline-icon.png)
skin/images/commandline-icon@2x.png (themes/images/commandline-icon@2x.png)
skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
skin/rules.css (themes/rules.css)

16
devtools/client/themes/commandline.inc.css
Просмотреть файл

@ -17,6 +17,8 @@
--gcli-border-color: #dde1e4; /* --theme-splitter-color */
--selection-background: #4c9ed9; /* --theme-selection-background */
--selection-color: #f5f7fa; /* --theme-selection-color */
--command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
--command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
}
:root[devtoolstheme="dark"] #developer-toolbar {
@ -27,6 +29,8 @@
--gcli-border-color: #454d5d; /* --theme-splitter-color */
--selection-background: #5675b9; /* --theme-selection-background */
--selection-color: #f5f7fa; /* --theme-selection-color */
--command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
--command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
}
#developer-toolbar {
@ -160,19 +164,11 @@ html|*#gcli-output-frame {
width: 16px;
height: 16px;
margin: 0 2px;
background-image: url("chrome://devtools/skin/images/commandline-icon.png");
background-position: 0 center;
background-size: 32px 16px;
background-image: var(--command-line-image);
}
.gclitoolbar-input-node[focused="true"]::before {
background-position: -16px center;
}
@media (min-resolution: 1.1dppx) {
.gclitoolbar-input-node::before {
background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
}
background-image: var(--command-line-image-focus);
}
.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {

11
devtools/client/themes/debugger.css
Просмотреть файл

@ -350,21 +350,12 @@
}
.dbg-expression-arrow {
background-image: url(images/commandline-icon.png);
background-position: -16px 0;
background-repeat: no-repeat;
background-size: 32px 16px;
background-image: var(--theme-command-line-image-focus);
width: 16px;
height: 16px;
margin: 2px;
}
@media (min-resolution: 1.1dppx) {
.dbg-expression-arrow {
background-image: url(images/commandline-icon@2x.png);
}
}
.dbg-expression-input {
color: inherit;
}

Двоичные данные
devtools/client/themes/images/commandline-icon.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 254 B

42
devtools/client/themes/images/commandline-icon.svg Normal file
Просмотреть файл

@ -0,0 +1,42 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
g {
display: none;
}
#light-theme:target,
#light-theme-focus:target ~ #light-theme,
#dark-theme:target,
#dark-theme-focus:target ~ #dark-theme {
display: inline;
}
#light-theme-focus:target ~ #light-theme {
fill: #4A90E2;
}
#dark-theme-focus:target ~ #dark-theme {
fill: #00FF7F;
}
/* Unfocused states */
#light-theme,
#dark-theme {
fill: rgba(128, 128, 128, .5);
}
</style>
</defs>
<g id="light-theme-focus"/>
<g id="light-theme">
<path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
<path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
</g>
<g id="dark-theme-focus"/>
<g id="dark-theme">
<path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
<path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
</g>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Двоичные данные
devtools/client/themes/images/commandline-icon@2x.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 586 B

10
devtools/client/themes/images/firebug/commandline-icon.svg
Просмотреть файл

@ -3,6 +3,14 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
<defs>
<style>
path {
opacity: 0.5;
}
path:target {
opacity: 1;
}
</style>
<linearGradient id="b">
<stop offset="0" stop-color="#234ccd"/>
<stop offset="1" stop-color="#5d7de3"/>
@ -14,5 +22,5 @@
<linearGradient x1="2.002" y1="12.252" x2="-.099" y2="6.755" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
<linearGradient x1="3.309" y1="11.177" x2="1.468" y2="6.456" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
</defs>
<path d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
<path id="focus" d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
</svg>

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 1.2 KiB

После

Ширина:  |  Высота:  |  Размер: 1.3 KiB

14
devtools/client/themes/variables.css
Просмотреть файл

@ -68,6 +68,10 @@
--theme-tooltip-border: #d9e1e8;
--theme-tooltip-background: rgba(255, 255, 255, .9);
--theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
}
:root.theme-dark {
@ -124,6 +128,10 @@
--theme-tooltip-border: #434850;
--theme-tooltip-background: rgba(19, 28, 38, .9);
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
}
:root.theme-firebug {
@ -178,6 +186,10 @@
--theme-header-background: #F0F0F0 linear-gradient(to top,
rgba(0, 0, 0, 0.1),
transparent) repeat-x;
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
}
:root {
@ -188,6 +200,4 @@
* should improve keyboard navigation usability. */
--theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
--theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
--theme-focus-box-shadow-inset-bottom: 0 -2px 1px var(--theme-textbox-box-shadow) inset,
0px -2px var(--theme-highlight-blue) inset;
}

26
devtools/client/themes/webconsole.css
Просмотреть файл

@ -3,21 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Webconsole specific theme variables */
.theme-dark {
--command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
--command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
}
.theme-light {
--command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
--command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
}
.theme-firebug {
--command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
--command-line-image-2x: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
--error-color: #FF0000;
--error-background-color: #FFEBEB;
--warning-background-color: #FFFFC8;
@ -414,9 +400,7 @@ a {
}
.jsterm-input-node[focused="true"] {
outline: var(--theme-focus-outline);
outline-offset: -1px;
transition: none;
background-image: var(--theme-command-line-image-focus);
box-shadow: none;
}
@ -428,19 +412,13 @@ a {
/* Always allow scrolling on input - it auto expands in js by setting height,
but don't want it to get bigger than the window. 24px = toolbar height. */
max-height: calc(90vh - 24px);
background-image: var(--command-line-image);
background-image: var(--theme-command-line-image);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 4px 50%;
color: var(--theme-content-color1);
}
@media (min-resolution: 1.1dppx) {
.jsterm-input-node {
background-image: var(--command-line-image-2x);
}
}
:-moz-any(.jsterm-input-node,
.jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
overflow-x: hidden;