Bug 862294 - Sidebar should be responsive in docked Toolbox, r=vporof

This commit is contained in:
Girish Sharma 2013-04-17 12:27:36 +05:30
parent 79e0b0e67c
commit 238b779eed
11 changed files with 93 additions and 6 deletions

View File

@ -63,7 +63,7 @@
</menupopup>
</popupset>
<hbox flex="1">
<box flex="1" class="devtools-responsive-container">
<vbox flex="1">
<toolbar id="inspector-toolbar"
class="devtools-toolbar"
@ -91,5 +91,5 @@
<tabs/>
<tabpanels flex="1"/>
</tabbox>
</hbox>
</box>
</window>

View File

@ -6,3 +6,11 @@
#response-content-image-box {
overflow: auto;
}
/* Responsive sidebar */
@media (max-width: 700px) {
#details-pane-toggle,
.requests-menu-waterfall {
display: none;
}
}

View File

@ -17,7 +17,7 @@
<script type="text/javascript" src="netmonitor-controller.js"/>
<script type="text/javascript" src="netmonitor-view.js"/>
<hbox id="body" flex="1">
<box id="body" flex="1" class="devtools-responsive-container">
<vbox id="network-table" flex="1">
<toolbar id="requests-menu-toolbar"
class="devtools-toolbar"
@ -262,6 +262,6 @@
</tabpanel>
</tabpanels>
</tabbox>
</hbox>
</box>
</window>

View File

@ -67,7 +67,7 @@
</menupopup>
</popupset>
<hbox class="hud-outer-wrapper" flex="1">
<box class="hud-outer-wrapper devtools-responsive-container" flex="1">
<vbox class="hud-console-wrapper" flex="1">
<toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
<toolbarbutton label="&btnPageNet.label;" type="menu-button"
@ -145,5 +145,5 @@
<tabs/>
<tabpanels flex="1"/>
</tabbox>
</hbox>
</box>
</window>

View File

@ -216,6 +216,7 @@
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
/* In-tools sidebar */

View File

@ -297,3 +297,19 @@
#timings-tabpanel .requests-menu-timings-total {
transition: transform 0.2s ease-out;
}
/* Responsive sidebar */
@media (max-width: 700px) {
#details-pane {
max-width: none;
margin: 0 !important;
/* To prevent all the margin hacks to hide the sidebar */
}
.requests-menu-size {
border-width: 0px !important;
box-shadow: none !important;
/* !important are required here because Timeline is not visible and thus
the right border and box-shadow of Size column should be hidden */
}
}

View File

@ -230,6 +230,7 @@
width: 3px;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
/* In-tools sidebar */

View File

@ -297,3 +297,19 @@
#timings-tabpanel .requests-menu-timings-total {
transition: transform 0.2s ease-out;
}
/* Responsive sidebar */
@media (max-width: 700px) {
#details-pane {
max-width: none;
margin: 0 !important;
/* To prevent all the margin hacks to hide the sidebar */
}
.requests-menu-size {
border-width: 0px !important;
box-shadow: none !important;
/* !important are required here because Timeline is not visible and thus
the right border and box-shadow of Size column should be hidden */
}
}

View File

@ -83,3 +83,31 @@
.devtools-autocomplete-listbox.light-theme > richlistitem > label {
color: #666;
}
/* Responsive container */
.devtools-responsive-container {
-moz-box-orient: horizontal;
}
@media (max-width: 700px) {
.devtools-responsive-container {
-moz-box-orient: vertical;
}
.devtools-responsive-container > .devtools-side-splitter {
border: 0;
margin: 0;
border-top: 1px solid black;
min-height: 3px;
height: 3px;
margin-bottom: -3px;
/* In some edge case the cursor is not changed to n-resize */
cursor: n-resize;
}
.devtools-responsive-container > .devtools-sidebar-tabs {
min-height: 35vh;
max-height: 75vh;
}
}

View File

@ -236,6 +236,7 @@
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
/* In-tools sidebar */

View File

@ -297,3 +297,19 @@
#timings-tabpanel .requests-menu-timings-total {
transition: transform 0.2s ease-out;
}
/* Responsive sidebar */
@media (max-width: 700px) {
#details-pane {
max-width: none;
margin: 0 !important;
/* To prevent all the margin hacks to hide the sidebar */
}
.requests-menu-size {
border-width: 0px !important;
box-shadow: none !important;
/* !important are required here because Timeline is not visible and thus
the right border and box-shadow of Size column should be hidden */
}
}