Bug 1307408 - part1: fix layout issues for small widths in inspector sidebar;r=Honza
MozReview-Commit-ID: 7bF5gsyxXfp
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -37,17 +37,16 @@ const {ViewHelpers} = require("devtools/
const clipboardHelper = require("devtools/shared/platform/clipboard");
const {LocalizationHelper, localizeMarkup} = require("devtools/shared/l10n");
const INSPECTOR_L10N = new LocalizationHelper("devtools/locale/inspector.properties");
const TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties");
// Sidebar dimensions
const INITIAL_SIDEBAR_SIZE = 350;
-const MIN_SIDEBAR_SIZE = 50;
// If the toolbox width is smaller than given amount of pixels,
// the sidebar automatically switches from 'landscape' to 'portrait' mode.
const PORTRAIT_MODE_WIDTH = 700;
/**
* Represents an open instance of the Inspector for a tab.
* The inspector controls the breadcrumbs, the markup view, and the sidebar
@@ -452,17 +451,16 @@ Inspector.prototype = {
setupSplitter: function () {
let SplitBox = this.React.createFactory(this.browserRequire(
"devtools/client/shared/components/splitter/split-box"));
let splitter = SplitBox({
className: "inspector-sidebar-splitter",
initialWidth: INITIAL_SIDEBAR_SIZE,
initialHeight: INITIAL_SIDEBAR_SIZE,
- minSize: MIN_SIDEBAR_SIZE,
splitterSize: 1,
endPanelControl: true,
startPanel: this.InspectorTabPanel({
id: "inspector-main-content"
}),
endPanel: this.InspectorTabPanel({
id: "inspector-sidebar-container"
}),
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -22,16 +22,17 @@
#all-fonts {
padding: 0;
margin: 0;
}
#font-showall {
cursor: pointer;
+ flex-shrink: 0;
}
#font-showall:hover {
text-decoration: underline;
}
.dim > #font-container,
.font:not(.has-code) .font-css-code,
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -26,38 +26,50 @@ window {
/* The main Inspector panel container. */
.inspector-responsive-container {
height: 100vh;
}
/* The main panel layout. This area consists of a toolbar, markup view
and breadcrumbs bar. */
-.devtools-main-content {
+#inspector-main-content {
/* Subtract 1 pixel from the panel height. It's puzzling why this
is needed, but if not presented the entire Inspector panel
content jumps 1 pixel up when the Toolbox is opened. */
height: calc(100% - 1px);
+ /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
+ See bug 1307408 comment #12. */
+ min-width: 125px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Inspector Panel Splitter */
#inspector-splitter-box {
height: 100vh;
width: 100vw;
position: fixed;
}
-/* Minimum width for the Inspector main (uncontrolled) area. */
-#inspector-splitter-box .uncontrolled {
+/* Minimum dimensions for the Inspector splitter areas. */
+#inspector-splitter-box .uncontrolled,
+#inspector-splitter-box .controlled {
min-height: 50px;
min-width: 50px;
+ overflow-x: hidden;
+}
+
+/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
+ the sidebar tab to small width. If a specific panel supports smaller width, this should
+ be overridden on a panel-by-panel basis */
+.inspector-tabpanel {
+ min-width: 200px;
}
#inspector-splitter-box .controlled.pane-collapsed {
visibility: collapse;
}
/* Use flex layout for the Inspector toolbar. For now, it's done
specifically for the Inspector toolbar since general rule applied
@@ -166,22 +178,18 @@ window {
}
#inspector-breadcrumbs .breadcrumbs-widget-item {
white-space: nowrap;
flex-shrink: 0;
font: message-box;
}
-/* Set the minimum width for the side bar so, all tabs are
- properly visible. The value can be decreased when bug 1281789
- is fixed and the all-tabs-menu is available again. */
#inspector-sidebar-container {
overflow: hidden;
- min-width: 50px;
position: relative;
height: 100%;
}
#inspector-sidebar {
position: absolute;
top: 0;
bottom: 0;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -25,16 +25,19 @@
}
#sidebar-panel-ruleview {
margin: 0;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
+ /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
+ widths */
+ min-width: 100px;
}
/* Rule View Toolbar */
#ruleview-toolbar-container {
display: flex;
flex-direction: column;
height: auto;