- Revision
- 103839
- Author
- pfeld...@chromium.org
- Date
- 2011-12-30 02:17:20 -0800 (Fri, 30 Dec 2011)
Log Message
Web Inspector: migrate from "attached" to "compact" styles.
https://bugs.webkit.org/show_bug.cgi?id=75381
Source/WebCore:
When front-end is docked to right, it should look like "detached", but is still "attached".
Use "compact" mode instead of "attached" mode in the styles to mitigate it.
Reviewed by Yury Semikhatsky.
* inspector/front-end/SearchController.js:
(WebInspector.SearchController.prototype.updateSearchLabel):
* inspector/front-end/Toolbar.js:
(WebInspector.Toolbar.prototype.set compact):
(WebInspector.Toolbar.prototype._toolbarDragStart):
(WebInspector.Toolbar.prototype._toolbarDrag):
* inspector/front-end/helpScreen.css:
(body.compact .help-window-outer):
(body.compact .help-window-main):
(body.compact .help-window-caption):
(body.compact .help-close-button):
(body.compact .help-content):
* inspector/front-end/inspector.css:
(body.compact #toolbar):
(body.compact.port-qt #toolbar):
(body.compact.inactive #toolbar):
(body.compact #search-toolbar-label):
(body.compact #toolbar-dropdown-arrow):
(body.compact #search):
(body.compact.port-qt .toolbar-item.close-left, body.compact.port-qt .toolbar-item.close-right):
(body.compact #main):
* inspector/front-end/inspector.js:
(WebInspector.set attached):
(WebInspector.get isCompactMode):
(WebInspector.get _setCompactMode):
(WebInspector._installDockToRight.listener.get if):
(WebInspector._installDockToRight.listener):
* inspector/front-end/inspectorCommon.css:
(body.dock-to-right):
(body.dock-to-right.inactive):
Source/WebKit/chromium:
Reviewed by Yury Semikhatsky.
When front-end is docked to right, it should look like "detached", but is still "attached".
Use "compact" mode instead of "attached" mode in the styles to mitigate it.
* src/js/devTools.css:
(body.compact #toolbar):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (103838 => 103839)
--- trunk/Source/WebCore/ChangeLog 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/ChangeLog 2011-12-30 10:17:20 UTC (rev 103839)
@@ -1,3 +1,44 @@
+2011-12-30 Pavel Feldman <pfeld...@google.com>
+
+ Web Inspector: migrate from "attached" to "compact" styles.
+ https://bugs.webkit.org/show_bug.cgi?id=75381
+
+ When front-end is docked to right, it should look like "detached", but is still "attached".
+ Use "compact" mode instead of "attached" mode in the styles to mitigate it.
+
+ Reviewed by Yury Semikhatsky.
+
+ * inspector/front-end/SearchController.js:
+ (WebInspector.SearchController.prototype.updateSearchLabel):
+ * inspector/front-end/Toolbar.js:
+ (WebInspector.Toolbar.prototype.set compact):
+ (WebInspector.Toolbar.prototype._toolbarDragStart):
+ (WebInspector.Toolbar.prototype._toolbarDrag):
+ * inspector/front-end/helpScreen.css:
+ (body.compact .help-window-outer):
+ (body.compact .help-window-main):
+ (body.compact .help-window-caption):
+ (body.compact .help-close-button):
+ (body.compact .help-content):
+ * inspector/front-end/inspector.css:
+ (body.compact #toolbar):
+ (body.compact.port-qt #toolbar):
+ (body.compact.inactive #toolbar):
+ (body.compact #search-toolbar-label):
+ (body.compact #toolbar-dropdown-arrow):
+ (body.compact #search):
+ (body.compact.port-qt .toolbar-item.close-left, body.compact.port-qt .toolbar-item.close-right):
+ (body.compact #main):
+ * inspector/front-end/inspector.js:
+ (WebInspector.set attached):
+ (WebInspector.get isCompactMode):
+ (WebInspector.get _setCompactMode):
+ (WebInspector._installDockToRight.listener.get if):
+ (WebInspector._installDockToRight.listener):
+ * inspector/front-end/inspectorCommon.css:
+ (body.dock-to-right):
+ (body.dock-to-right.inactive):
+
2011-12-30 Sheriff Bot <webkit.review....@gmail.com>
Unreviewed, rolling out r103794.
Modified: trunk/Source/WebCore/inspector/front-end/SearchController.js (103838 => 103839)
--- trunk/Source/WebCore/inspector/front-end/SearchController.js 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/inspector/front-end/SearchController.js 2011-12-30 10:17:20 UTC (rev 103839)
@@ -67,7 +67,7 @@
if (!panelName)
return;
var newLabel = WebInspector.UIString("Search %s", panelName);
- if (WebInspector.attached)
+ if (WebInspector.isCompactMode())
this.element.setAttribute("placeholder", newLabel);
else {
this.element.removeAttribute("placeholder");
Modified: trunk/Source/WebCore/inspector/front-end/Toolbar.js (103838 => 103839)
--- trunk/Source/WebCore/inspector/front-end/Toolbar.js 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/inspector/front-end/Toolbar.js 2011-12-30 10:17:20 UTC (rev 103839)
@@ -45,9 +45,9 @@
}
WebInspector.Toolbar.prototype = {
- set attached(attached)
+ set compact(compact)
{
- if (attached)
+ if (compact)
this.element.addStyleClass("toolbar-small");
else
this.element.removeStyleClass("toolbar-small");
@@ -67,7 +67,7 @@
_toolbarDragStart: function(event)
{
- if ((!WebInspector.attached && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port() == "qt")
+ if ((!WebInspector.isCompactMode() && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacLeopard && WebInspector.platformFlavor() !== WebInspector.PlatformFlavor.MacSnowLeopard) || WebInspector.port() == "qt")
return;
var target = event.target;
@@ -80,7 +80,7 @@
this.element.lastScreenX = event.screenX;
this.element.lastScreenY = event.screenY;
- WebInspector.elementDragStart(this.element, this._toolbarDrag.bind(this), this._toolbarDragEnd.bind(this), event, (WebInspector.attached ? "row-resize" : "default"));
+ WebInspector.elementDragStart(this.element, this._toolbarDrag.bind(this), this._toolbarDragEnd.bind(this), event, (WebInspector.isCompactMode() ? "row-resize" : "default"));
},
_toolbarDragEnd: function(event)
@@ -93,7 +93,7 @@
_toolbarDrag: function(event)
{
- if (WebInspector.attached) {
+ if (WebInspector.isCompactMode()) {
var height = window.innerHeight - (event.screenY - this.element.lastScreenY);
InspectorFrontendHost.setAttachedWindowHeight(height);
Modified: trunk/Source/WebCore/inspector/front-end/helpScreen.css (103838 => 103839)
--- trunk/Source/WebCore/inspector/front-end/helpScreen.css 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/inspector/front-end/helpScreen.css 2011-12-30 10:17:20 UTC (rev 103839)
@@ -7,7 +7,7 @@
z-index: 2000;
}
-body.attached .help-window-outer {
+body.compact .help-window-outer {
top: 32px;
left: 0;
width: 100%;
@@ -25,12 +25,12 @@
-webkit-box-shadow: 10px 10px 8px rgba(40, 40, 40, 0.40);
}
-body.attached .help-window-main {
+body.compact .help-window-main {
height: 100%;
padding: 10px;
}
-body.attached .help-window-main {
+body.compact .help-window-main {
border-radius: 0;
-webkit-box-shadow: 0 0 0;
}
@@ -39,7 +39,7 @@
margin: 8px 8px 0 8px;
}
-body.attached .help-window-caption {
+body.compact .help-window-caption {
margin: 0;
}
@@ -94,11 +94,11 @@
width: 16px;
}
-body.attached .help-close-button {
+body.compact .help-close-button {
margin: 0;
}
-body.attached .help-content {
+body.compact .help-content {
margin: 8px 0 0 8px;
}
@@ -196,7 +196,6 @@
color: rgb(150, 150, 150);
}
-
.help-content input[type=checkbox] {
height: 13px;
width: 13px;
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (103838 => 103839)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-12-30 10:17:20 UTC (rev 103839)
@@ -63,18 +63,18 @@
background: transparent;
}
-body.attached #toolbar {
+body.compact #toolbar {
height: 34px;
border-top: 1px solid rgb(100, 100, 100);
cursor: ns-resize;
padding-left: 0;
}
-body.attached.port-qt #toolbar {
+body.compact.port-qt #toolbar {
cursor: auto;
}
-body.attached.inactive #toolbar {
+body.compact.inactive #toolbar {
border-top: 1px solid rgb(64%, 64%, 64%);
}
@@ -135,7 +135,7 @@
top: 2px;
}
-body.attached #search-toolbar-label {
+body.compact #search-toolbar-label {
display: none;
}
@@ -155,7 +155,7 @@
text-shadow: none;
}
-body.attached #toolbar-dropdown-arrow {
+body.compact #toolbar-dropdown-arrow {
font-size: 14px;
padding-bottom: 4px;
}
@@ -267,7 +267,7 @@
font-size: 16px;
}
-body.attached #search {
+body.compact #search {
font-size: 11px;
}
@@ -362,7 +362,7 @@
display: none;
}
-body.attached.port-qt .toolbar-item.close-left, body.attached.port-qt .toolbar-item.close-right {
+body.compact.port-qt .toolbar-item.close-left, body.compact.port-qt .toolbar-item.close-right {
display: none;
}
@@ -389,7 +389,7 @@
background-color: white;
}
-body.attached #main {
+body.compact #main {
top: 34px;
}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.js (103838 => 103839)
--- trunk/Source/WebCore/inspector/front-end/inspector.js 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/inspector/front-end/inspector.js 2011-12-30 10:17:20 UTC (rev 103839)
@@ -187,24 +187,29 @@
this._dockToggleButton.toggled = !x;
}
- this._renderAsAttached(x && !WebInspector.settings.dockToRight.get());
+ this._setCompactMode(x && !WebInspector.settings.dockToRight.get());
},
- _renderAsAttached: function(x)
+ isCompactMode: function()
{
+ return this.attached && !WebInspector.settings.dockToRight.get();
+ },
+
+ _setCompactMode: function(x)
+ {
var body = document.body;
if (x) {
body.removeStyleClass("detached");
- body.addStyleClass("attached");
+ body.addStyleClass("compact");
} else {
- body.removeStyleClass("attached");
+ body.removeStyleClass("compact");
body.addStyleClass("detached");
}
// This may be called before doLoadedDone, hence the bulk of inspector objects may
// not be created yet.
if (WebInspector.toolbar)
- WebInspector.toolbar.attached = x;
+ WebInspector.toolbar.compact = x;
if (WebInspector.searchController)
WebInspector.searchController.updateSearchLabel();
@@ -389,8 +394,9 @@
this._createPanels();
this._createGlobalStatusBarItems();
+
this.toolbar = new WebInspector.Toolbar();
- this.toolbar.attached = WebInspector.attached;
+ WebInspector._installDockToRight();
for (var panelName in this.panels)
this.addPanel(this.panels[panelName]);
@@ -418,8 +424,6 @@
WebInspector.showPanel(WebInspector.settings.lastActivePanel.get());
}
- WebInspector._installDockToRight();
-
InspectorAgent.enable(showInitialPanel);
DatabaseAgent.enable();
DOMStorageAgent.enable();
@@ -433,23 +437,27 @@
{
// Re-use Settings infrastructure for the dock-to-right settings UI
WebInspector.settings.dockToRight.set(WebInspector.queryParamsObject.dockSide === "right");
+
+ if (WebInspector.settings.dockToRight.get())
+ document.body.addStyleClass("dock-to-right");
+
+ if (WebInspector.attached)
+ WebInspector._setCompactMode(!WebInspector.settings.dockToRight.get());
+
WebInspector.settings.dockToRight.addChangeListener(listener.bind(this));
- updateToolbar();
- function updateToolbar()
- {
- if (WebInspector.attached)
- WebInspector._renderAsAttached(!WebInspector.settings.dockToRight.get());
- }
-
function listener(event)
{
var value = WebInspector.settings.dockToRight.get();
- if (value)
+ if (value) {
InspectorFrontendHost.requestSetDockSide("right");
- else
+ document.body.addStyleClass("dock-to-right");
+ } else {
InspectorFrontendHost.requestSetDockSide("bottom");
- updateToolbar();
+ document.body.removeStyleClass("dock-to-right");
+ }
+ if (WebInspector.attached)
+ WebInspector._setCompactMode(!value);
}
}
Modified: trunk/Source/WebCore/inspector/front-end/inspectorCommon.css (103838 => 103839)
--- trunk/Source/WebCore/inspector/front-end/inspectorCommon.css 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebCore/inspector/front-end/inspectorCommon.css 2011-12-30 10:17:20 UTC (rev 103839)
@@ -17,6 +17,14 @@
-webkit-user-select: none;
}
+body.dock-to-right {
+ border-left: 1px solid rgb(80, 80, 80);
+}
+
+body.dock-to-right.inactive {
+ border-left: 1px solid rgb(64%, 64%, 64%);
+}
+
* {
-webkit-box-sizing: border-box;
}
Modified: trunk/Source/WebKit/chromium/ChangeLog (103838 => 103839)
--- trunk/Source/WebKit/chromium/ChangeLog 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebKit/chromium/ChangeLog 2011-12-30 10:17:20 UTC (rev 103839)
@@ -1,3 +1,16 @@
+2011-12-30 Pavel Feldman <pfeld...@google.com>
+
+ Web Inspector: migrate from "attached" to "compact" styles.
+ https://bugs.webkit.org/show_bug.cgi?id=75381
+
+ Reviewed by Yury Semikhatsky.
+
+ When front-end is docked to right, it should look like "detached", but is still "attached".
+ Use "compact" mode instead of "attached" mode in the styles to mitigate it.
+
+ * src/js/devTools.css:
+ (body.compact #toolbar):
+
2011-12-30 Dmitry Lomov <dslo...@google.com>
https://bugs.webkit.org/show_bug.cgi?id=75373
Modified: trunk/Source/WebKit/chromium/src/js/devTools.css (103838 => 103839)
--- trunk/Source/WebKit/chromium/src/js/devTools.css 2011-12-30 09:20:18 UTC (rev 103838)
+++ trunk/Source/WebKit/chromium/src/js/devTools.css 2011-12-30 10:17:20 UTC (rev 103839)
@@ -2,7 +2,7 @@
line-height: 120%;
}
-body.attached #toolbar {
+body.compact #toolbar {
height: 34px;
border-top: 1px solid rgb(100, 100, 100);
cursor: default; /* overriden */
