Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-18 15:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1465644 - Part 2. Introduce the emphasized splitter style. r=nchevobbe

Browse Source 
--HG--
extra : rebase_source : e7213df93be49d8368679d23b5da66504df21abe
This commit is contained in:
Mantaroh Yoshinaga 2018-08-22 16:07:53 +09:00
parent b4e5a8def5
commit b5919ca49c
4 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
devtools/client/shared/components/splitter/SplitBox.css
View File

@ -48,8 +48,7 @@
}
.split-box.vert > .splitter {
min-width: calc(var(--devtools-splitter-inline-start-width) +
var(--devtools-splitter-inline-end-width) + 1px);
min-width: var(--devtools-vertical-splitter-min-width);
border-inline-start-width: var(--devtools-splitter-inline-start-width);
border-inline-end-width: var(--devtools-splitter-inline-end-width);
@ -61,8 +60,10 @@
}
.split-box.horz > .splitter {
min-height: calc(var(--devtools-splitter-top-width) +
var(--devtools-splitter-bottom-width) + 1px);
/* Emphasize the horizontal splitter width and color */
min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
background-color: var(--theme-emphasized-splitter-color);
border-top-width: var(--devtools-splitter-top-width);
border-bottom-width: var(--devtools-splitter-bottom-width);
@ -73,6 +74,11 @@
cursor: ns-resize;
}
/* Emphasized splitter has the hover style. */
.split-box.horz > .splitter:hover {
background-color: var(--theme-emphasized-splitter-color-hover);
}
.split-box.disabled {
pointer-events: none;
}

32
devtools/client/themes/splitters.css
View File

@ -8,16 +8,30 @@
/* Splitters */
:root {
/* Draggable splitter element size */
--devtools-splitter-element-size: 1px;
--devtools-emphasized-splitter-element-size: 2px;
/* Define the widths of the draggable areas on each side of a splitter. top
and bottom widths are used for horizontal splitters, inline-start and
inline-end for side splitters.*/
--devtools-splitter-top-width: 2px;
--devtools-splitter-bottom-width: 2px;
--devtools-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
var(--devtools-splitter-bottom-width) +
var(--devtools-splitter-element-size));
--devtools-emphasized-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
var(--devtools-splitter-bottom-width) +
var(--devtools-emphasized-splitter-element-size));
/* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
--devtools-splitter-inline-start-width: 1px;
--devtools-splitter-inline-end-width: 4px;
--devtools-vertical-splitter-min-width: calc(var(--devtools-splitter-inline-start-width) +
var(--devtools-splitter-inline-end-width) +
var(--devtools-splitter-element-size));
}
#appcontent[devtoolstheme="light"] {
@ -48,8 +62,7 @@ splitter.devtools-horizontal-splitter,
}
splitter.devtools-horizontal-splitter {
min-height: calc(var(--devtools-splitter-top-width) +
var(--devtools-splitter-bottom-width) + 1px);
min-height: var(--devtools-horizontal-splitter-min-height);
border-top-width: var(--devtools-splitter-top-width);
border-bottom-width: var(--devtools-splitter-bottom-width);
@ -60,9 +73,20 @@ splitter.devtools-horizontal-splitter {
cursor: ns-resize;
}
#toolbox-deck ~ splitter.devtools-horizontal-splitter {
min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
}
/**
* Emphasized splitter has the hover style.
* This emphasized splitter affect splitter console only.
*/
#toolbox-deck ~ splitter.devtools-horizontal-splitter:hover {
background-color: var(--theme-emphasized-splitter-color-hover);
}
.devtools-side-splitter {
min-width: calc(var(--devtools-splitter-inline-start-width) +
var(--devtools-splitter-inline-end-width) + 1px);
min-width: var(--devtools-vertical-splitter-min-width);
border-inline-start-width: var(--devtools-splitter-inline-start-width);
border-inline-end-width: var(--devtools-splitter-inline-end-width);

4
devtools/client/themes/variables.css
View File

@ -41,6 +41,8 @@
/* Border color that splits the toolbars/panels/headers. */
--theme-splitter-color: #e0e0e1;
--theme-emphasized-splitter-color: var(--grey-30);
--theme-emphasized-splitter-color-hover: var(--grey-40);
--theme-comment: var(--grey-50);
--theme-comment-alt: #ccd1d5;
@ -146,6 +148,8 @@
/* Border color that splits the toolbars/panels/headers. */
--theme-splitter-color: #3c3c3d;
--theme-emphasized-splitter-color: var(--grey-60);
--theme-emphasized-splitter-color-hover: var(--grey-50);
--theme-comment: #939393;
--theme-comment-alt: #939393;

7
devtools/client/webconsole/test/mochitest/browser_webconsole_split.js
View File

@ -88,6 +88,8 @@ async function performTests() {
const deckHeight = deck.getBoundingClientRect().height;
const webconsoleHeight = webconsolePanel.getBoundingClientRect().height;
const splitterVisibility = !splitter.getAttribute("hidden");
// Splitter height will be 1px since the margin is negative.
const splitterHeight = splitterVisibility ? 1 : 0;
const openedConsolePanel = toolbox.currentToolId === "webconsole";
const menuLabel = await getMenuLabel(toolbox);
@ -96,6 +98,7 @@ async function performTests() {
containerHeight: containerHeight,
webconsoleHeight: webconsoleHeight,
splitterVisibility: splitterVisibility,
splitterHeight: splitterHeight,
openedConsolePanel: openedConsolePanel,
menuLabel,
};
@ -218,7 +221,9 @@ async function performTests() {
"Deck has a height > 0 when console is split");
ok(currentUIState.webconsoleHeight > 0,
"Web console has a height > 0 when console is split");
is(Math.round(currentUIState.deckHeight + currentUIState.webconsoleHeight),
is(Math.round(currentUIState.deckHeight +
currentUIState.webconsoleHeight +
currentUIState.splitterHeight),
currentUIState.containerHeight,
"Everything adds up to container height");
ok(!currentUIState.openedConsolePanel,