corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 749628 - Implement a Responsive Design tool. r=dcamp r=gavin

Browse Source
This commit is contained in:
Paul Rouget
2012-06-01 14:53:58 +02:00
parent 306e123366
commit 9caeb5664c
32 changed files with 934 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
browser/base/content/browser-appmenu.inc
View File

@@ -160,6 +160,12 @@
type="checkbox"
command="Tools:Inspect"
key="key_inspect"/>
<menuitem id="appmenu_responsiveUI"
hidden="true"
label="&responsiveUI.label;"
type="checkbox"
command="Tools:ResponsiveUI"
key="key_responsiveUI"/>
<menuitem id="appmenu_debugger"
hidden="true"
type="checkbox"

7
browser/base/content/browser-menubar.inc
View File

@@ -535,6 +535,13 @@
accesskey="&inspectMenu.accesskey;"
key="key_inspect"
command="Tools:Inspect"/>
<menuitem id="menu_responsiveUI"
type="checkbox"
hidden="true"
label="&responsiveUI.label;"
accesskey="&responsiveUI.accesskey;"
key="key_responsiveUI"
command="Tools:ResponsiveUI"/>
<menuitem id="menu_debugger"
hidden="true"
type="checkbox"

8
browser/base/content/browser-sets.inc
View File

@@ -96,6 +96,7 @@
<command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true"/>
<command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
<command id="Tools:StyleEditor" oncommand="StyleEditor.openChrome();" disabled="true"/>
<command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true"/>
<command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
<command id="Tools:Sanitize"
oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
@@ -250,6 +251,13 @@
modifiers="accel,alt"
#else
modifiers="accel,shift"
#endif
/>
<key id="key_responsiveUI" key="&responsiveUI.commandkey;" command="Tools:ResponsiveUI"
#ifdef XP_MACOSX
modifiers="accel,alt"
#else
modifiers="accel,shift"
#endif
/>
<key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"

25
browser/base/content/browser.css
View File

@@ -553,6 +553,8 @@ statuspanel[inactive][previoustype=overLink] {
/* highlighter */
%include highlighter.css
/* gcli */
html|*#gcli-tooltip-frame,
html|*#gcli-output-frame,
#gcli-output,
@@ -565,3 +567,26 @@ html|*#gcli-output-frame,
.gclitoolbar-prompt {
direction: ltr;
}
/* Responsive Mode */
vbox[anonid=browserContainer][responsivemode] {
overflow: auto;
}
.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
-moz-box-pack: end;
}
stack[anonid=browserStack][responsivemode] {
-moz-transition-duration: 200ms;
-moz-transition-timing-function: linear;
}
stack[anonid=browserStack][responsivemode] {
-moz-transition-properties: min-width, max-width, min-height, max-height;
}
stack[anonid=browserStack][responsivemode][notransition] {
-moz-transition: none;
}

23
browser/base/content/browser.js
View File

@@ -1724,6 +1724,17 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
document.getElementById("appmenu_charsetMenu").hidden = true;
#endif
// Enable Responsive UI?
let responsiveUIEnabled = gPrefService.getBoolPref("devtools.responsiveUI.enabled");
if (responsiveUIEnabled) {
document.getElementById("menu_responsiveUI").hidden = false;
document.getElementById("Tools:ResponsiveUI").removeAttribute("disabled");
#ifdef MENUBAR_CAN_AUTOHIDE
document.getElementById("appmenu_responsiveUI").hidden = false;
#endif
document.getElementById("developer-toolbar-responsiveui").hidden = false;
}
let appMenuButton = document.getElementById("appmenu-button");
let appMenuPopup = document.getElementById("appmenu-popup");
if (appMenuButton && appMenuPopup) {
@@ -9302,6 +9313,18 @@ XPCOMUtils.defineLazyGetter(Scratchpad, "ScratchpadManager", function() {
return tmp.ScratchpadManager;
});
var ResponsiveUI = {
toggle: function RUI_toggle() {
this.ResponsiveUIManager.toggle(window, gBrowser.selectedTab);
}
};
XPCOMUtils.defineLazyGetter(ResponsiveUI, "ResponsiveUIManager", function() {
let tmp = {};
Cu.import("resource:///modules/devtools/responsivedesign.jsm", tmp);
return tmp.ResponsiveUIManager;
});
var StyleEditor = {
prefEnabledName: "devtools.styleeditor.enabled",
/**

5
browser/base/content/browser.xul
View File

@@ -1049,6 +1049,11 @@
class="devtools-toolbarbutton"
hidden="true"
command="Tools:Inspect"/>
<toolbarbutton id="developer-toolbar-responsiveui"
label="&responsiveUI.label;"
class="devtools-toolbarbutton"
hidden="true"
command="Tools:ResponsiveUI"/>
<toolbarbutton id="developer-toolbar-debugger"
label="&scriptsButton.label;"
class="devtools-toolbarbutton"

36
browser/base/content/tabbrowser.xml
View File

@@ -26,10 +26,12 @@
onselect="if (event.target.localName == 'tabpanels') this.parentNode.updateCurrentBrowser();">
<xul:tabpanels flex="1" class="plain" selectedIndex="0" anonid="panelcontainer">
<xul:notificationbox flex="1">
<xul:stack flex="1" anonid="browserStack">
<xul:browser type="content-primary" message="true" disablehistory="true"
xbl:inherits="tooltip=contenttooltip,contextmenu=contentcontextmenu,autocompletepopup"/>
</xul:stack>
<xul:vbox flex="1" anonid="browserContainer">
<xul:stack flex="1" anonid="browserStack">
<xul:browser type="content-primary" message="true" disablehistory="true"
xbl:inherits="tooltip=contenttooltip,contextmenu=contentcontextmenu,autocompletepopup"/>
</xul:stack>
</xul:vbox>
</xul:notificationbox>
</xul:tabpanels>
</xul:tabbox>
@@ -290,6 +292,15 @@
</method>
<method name="getNotificationBox">
<parameter name="aBrowser"/>
<body>
<![CDATA[
return this.getBrowserContainer(aBrowser).parentNode;
]]>
</body>
</method>
<method name="getBrowserContainer">
<parameter name="aBrowser"/>
<body>
<![CDATA[
@@ -1284,12 +1295,20 @@
stack.appendChild(b);
stack.setAttribute("flex", "1");
// Create the browserContainer
var box = document.createElementNS(
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"vbox");
box.setAttribute("anonid", "browserContainer");
box.appendChild(stack);
box.setAttribute("flex", "1");
// Add the Message and the Browser to the box
var notificationbox = document.createElementNS(
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
"notificationbox");
notificationbox.setAttribute("flex", "1");
notificationbox.appendChild(stack);
notificationbox.appendChild(box);
var position = this.tabs.length - 1;
var uniqueId = "panel" + Date.now() + position;
@@ -1714,12 +1733,13 @@
// (see below), which would be hindered by the potentially expensive
// browser removal. So we remove the browser and the panel in two
// steps.
var panel = browser.parentNode.parentNode;
var panel = this.getNotificationBox(browser);
// This will unload the document. An unload handler could remove
// dependant tabs, so it's important that the tabbrowser is now in
// a consistent state (tab removed, tab positions updated, etc.).
panel.removeChild(browser.parentNode);
panel.removeChild(this.getBrowserContainer(browser));
// Release the browser in case something is erroneously holding a
// reference to the tab after its removal.
@@ -2490,7 +2510,7 @@
<constructor>
<![CDATA[
this.mCurrentBrowser = this.mPanelContainer.childNodes[0].firstChild.firstChild;
this.mCurrentBrowser = this.mPanelContainer.firstChild.firstChild.firstChild.firstChild;
this.mCurrentTab = this.tabContainer.firstChild;
document.addEventListener("keypress", this, false);
window.addEventListener("sizemodechange", this, false);

2
browser/base/content/test/browser_bug462673.js
View File

@@ -15,7 +15,7 @@ var runs = [
is(tabbrowser.browsers.length, 1, "Window has one browser");
is(tabbrowser.selectedTab, newTab, "Remaining tab is selected");
is(tabbrowser.selectedBrowser, newBrowser, "Browser for remaining tab is selected");
is(tabbrowser.mTabBox.selectedPanel, newBrowser.parentNode.parentNode, "Panel for remaining tab is selected");
is(tabbrowser.mTabBox.selectedPanel, newBrowser.parentNode.parentNode.parentNode, "Panel for remaining tab is selected");
}
}
];