Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-03-09 04:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 601751 - Redesign the Edit Bookmark Panel to have the new look [r=mbrubeck]

Browse Source
This commit is contained in:
Mark Finkle 2011-01-17 14:21:38 -05:00
parent 35e0f8739f
commit 2d81f63607
9 changed files with 148 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
mobile/chrome/content/BookmarkHelper.js
View File

@ -1,7 +1,12 @@
var BookmarkHelper = {
_panel: null,
_editor: null,
get box() {
delete this.box;
this.box = document.getElementById("bookmark-container");
return this.box;
},
edit: function BH_edit(aURI) {
if (!aURI)
aURI = getBrowser().currentURI;
@ -26,18 +31,17 @@ var BookmarkHelper = {
this._editor.setAttribute("onclose", "BookmarkHelper.hide()");
document.getElementById("bookmark-form").appendChild(this._editor);
let toolbar = document.getElementById("toolbar-main");
let top = toolbar.top + toolbar.boxObject.height;
this.box.hidden = false;
BrowserUI.pushPopup(this, this.box);
this._panel = document.getElementById("bookmark-container");
this._panel.top = (top < 0 ? 0 : top);
this._panel.hidden = false;
BrowserUI.pushPopup(this, this._panel);
let self = this;
BrowserUI.lockToolbar();
Browser.forceChromeReflow();
self._editor.startEditing();
function waitForWidget(self) {
try {
self._editor.startEditing();
} catch(e) {
setTimeout(waitForWidget, 0, this);
}
}
setTimeout(waitForWidget, 0, this);
},
save: function BH_save() {
@ -45,7 +49,6 @@ var BookmarkHelper = {
},
hide: function BH_hide() {
BrowserUI.unlockToolbar();
BrowserUI.updateStar();
// Note: the _editor will have already saved the data, if needed, by the time
@ -53,7 +56,7 @@ var BookmarkHelper = {
this._editor.parentNode.removeChild(this._editor);
this._editor = null;
this._panel.hidden = true;
this.box.hidden = true;
BrowserUI.popPopup(this);
},

3
mobile/chrome/content/browser.js
View File

@ -1918,7 +1918,6 @@ IdentityHandler.prototype = {
this._identityPopup.hidden = false;
this._identityPopup.top = BrowserUI.toolbarH - this._identityPopup.offset;
this._identityPopup.anchorTo(this._identityBox);
this._identityPopup.focus();
this._identityBox.setAttribute("open", "true");
@ -2817,7 +2816,7 @@ var ViewableAreaObserver = {
// If the viewport width is still the same, the page layout has not
// changed, so we can keep keep the same content on-screen.
if (tab.browser.contentWindowWidth == oldWidth)
tab.restoreViewportPosition(oldWidth, w);
tab.restoreViewportPosition(oldWidth, newWidth);
}
// setTimeout(callback, 0) to ensure the resize event handler dispatch is finished

91
mobile/chrome/content/browser.xul
View File

@ -358,13 +358,17 @@
</vbox>
</arrowbox>
<vbox id="bookmark-container" hidden="true" class="panel-dark window-width">
<hbox id="bookmark-form" align="start">
<image id="bookmark-image"/>
</hbox>
<hbox pack="center">
<button label="&editBookmarkDone.label;" oncommand="BookmarkHelper.save();"/>
</hbox>
<vbox id="bookmark-container" hidden="true" class="panel-dark window-width window-height">
<vbox id="bookmark-dialog" class="panel-dark">
<hbox id="bookmark-form-title">
<description>&editBookmarkDialog.title;</description>
</hbox>
<separator id="bookmark-form-line"/>
<scrollbox id="bookmark-form" align="start"/>
<hbox id="bookmark-form-buttons" pack="center">
<button label="&editBookmarkDone.label;" oncommand="BookmarkHelper.save();"/>
</hbox>
</vbox>
</vbox>
<vbox id="panel-container" class="panel-dark window-width window-height" style="-moz-stack-sizing: ignore" left="10000" hidden="true">
@ -515,50 +519,51 @@
</vbox>
#ifdef MOZ_SERVICES_SYNC
<vbox id="syncsetup-container" class="panel-dark window-width window-height" hidden="true">
<hbox class="syncsetup-title">
<description>&sync.setup.title;</description>
#ifndef ANDROID
<spacer flex="1"/>
<toolbarbutton id="tool-syncsetup-close" class="panel-close" oncommand="WeaveGlue.close();"/>
#endif
</hbox>
<scrollbox id="syncsetup-scrollbox" orient="vertical" flex="1">
<vbox id="syncsetup-jpake" class="syncsetup-page" flex="1">
<description class="syncsetup-center" flex="1">&sync.setup.jpake;</description>
<separator/>
<vbox align="center" flex="1">
<description id="syncsetup-code1" class="syncsetup-code">....</description>
<description id="syncsetup-code2" class="syncsetup-code">....</description>
<description id="syncsetup-code3" class="syncsetup-code">....</description>
</vbox>
<separator/>
<description class="syncsetup-center syncsetup-link" flex="1" onclick="WeaveGlue.openManual();">&sync.fallback;</description>
<separator flex="1"/>
<hbox pack="center">
<vbox id="syncsetup-container" class="window-width window-height" hidden="true">
<vbox id="syncsetup-dialog" class="panel-dark" flex="1">
<hbox class="syncsetup-title">
<description>&sync.setup.title;</description>
</hbox>
<separator class="syncsetup-line"/>
<vbox id="syncsetup-simple" class="syncsetup-page" flex="1">
<scrollbox class="syncsetup-scrollbox" orient="vertical" flex="1">
<description class="syncsetup-desc syncsetup-center" flex="1">&sync.setup.jpake;</description>
<separator/>
<vbox align="center" flex="1">
<description id="syncsetup-code1" class="syncsetup-code">....</description>
<description id="syncsetup-code2" class="syncsetup-code">....</description>
<description id="syncsetup-code3" class="syncsetup-code">....</description>
</vbox>
<separator/>
<description class="syncsetup-center syncsetup-link" flex="1" onclick="WeaveGlue.openManual();">&sync.fallback;</description>
<separator flex="1"/>
</scrollbox>
<hbox class="syncsetup-buttons" pack="center">
<button oncommand="WeaveGlue.abortEasySetup(); WeaveGlue.close();">&sync.setup.cancel;</button>
</hbox>
</vbox>
<vbox id="syncsetup-manual" class="syncsetup-page" flex="1" hidden="true">
<description class="syncsetup-center" flex="1">&sync.setup.manual;</description>
<separator/>
<textbox id="syncsetup-account" class="syncsetup-edit" placeholder="&sync.account;"/>
<textbox id="syncsetup-password" class="syncsetup-edit" placeholder="&sync.password;" type="password"/>
<textbox id="syncsetup-synckey" class="syncsetup-edit" placeholder="&sync.syncKey;"/>
<separator class="thin"/>
<button id="syncsetup-usecustomserver" type="checkbox" class="button-checkbox" pack="start" oncommand="WeaveGlue.toggleCustomServer();">
<image class="button-image-icon"/>
<description class="syncsetup-label" flex="1">&sync.customServer;</description>
</button>
<textbox id="syncsetup-customserver" placeholder="&sync.serverURL;"/>
<separator flex="1"/>
<hbox pack="center">
<vbox id="syncsetup-fallback" class="syncsetup-page" flex="1" hidden="true">
<scrollbox class="syncsetup-scrollbox" orient="vertical" flex="1">
<description class="syncsetup-desc syncsetup-center" flex="1">&sync.setup.manual;</description>
<separator/>
<textbox id="syncsetup-account" class="syncsetup-edit" placeholder="&sync.account;"/>
<textbox id="syncsetup-password" class="syncsetup-edit" placeholder="&sync.password;" type="password"/>
<textbox id="syncsetup-synckey" class="syncsetup-edit" placeholder="&sync.syncKey;"/>
<separator class="thin"/>
<button id="syncsetup-usecustomserver" type="checkbox" class="button-checkbox" pack="start" oncommand="WeaveGlue.toggleCustomServer();">
<image class="button-image-icon"/>
<description class="syncsetup-label" flex="1">&sync.customServer;</description>
</button>
<textbox id="syncsetup-customserver" placeholder="&sync.serverURL;"/>
<separator flex="1"/>
</scrollbox>
<hbox class="syncsetup-buttons" pack="center">
<button oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
<separator/>
<button oncommand="WeaveGlue.close(); WeaveGlue.connect();">&sync.setup.connect;</button>
</hbox>
</vbox>
</scrollbox>
</vbox>
</vbox>
#endif

25
mobile/chrome/content/sync.js
View File

@ -81,6 +81,16 @@ let WeaveGlue = {
this.jpake = null;
},
_resetScrollPosition: function _resetScrollPosition() {
let scrollboxes = document.getElementsByClassName("syncsetup-scrollbox");
for (let i = 0; i < scrollboxes.length; i++) {
let sbo = scrollboxes[i].boxObject.QueryInterface(Ci.nsIScrollBoxObject);
try {
sbo.scrollTo(0, 0);
} catch(e) {}
}
},
open: function open() {
let container = document.getElementById("syncsetup-container");
if (!container.hidden)
@ -91,8 +101,8 @@ let WeaveGlue = {
// Show the connect UI
container.hidden = false;
document.getElementById("syncsetup-jpake").hidden = false;
document.getElementById("syncsetup-manual").hidden = true;
document.getElementById("syncsetup-simple").hidden = false;
document.getElementById("syncsetup-fallback").hidden = true;
BrowserUI.pushDialog(this);
@ -134,11 +144,10 @@ let WeaveGlue = {
this.abortEasySetup();
// Reset the scroll since the previous page might have been scrolled
let scrollbox = document.getElementById("syncsetup-scrollbox").boxObject.QueryInterface(Ci.nsIScrollBoxObject);
scrollbox.scrollTo(0, 0);
this._resetScrollPosition();
document.getElementById("syncsetup-jpake").hidden = true;
document.getElementById("syncsetup-manual").hidden = false;
document.getElementById("syncsetup-simple").hidden = true;
document.getElementById("syncsetup-fallback").hidden = false;
// Push the current setup data into the UI
if (this.setupData && "account" in this.setupData) {
@ -161,8 +170,8 @@ let WeaveGlue = {
},
close: function close() {
let scrollbox = document.getElementById("syncsetup-scrollbox").boxObject.QueryInterface(Ci.nsIScrollBoxObject);
scrollbox.scrollTo(0, 0);
// Reset the scroll since the previous page might have been scrolled
this._resetScrollPosition();
// Save current setup data
this.setupData = {

1
mobile/locales/en-US/chrome/browser.dtd
View File

@ -26,6 +26,7 @@
<!ENTITY historyHeader.label "History">
<!ENTITY desktopHeader.label "Desktop">
<!ENTITY editBookmarkDialog.title "Edit Bookmark">
<!ENTITY editBookmarkDone.label "Done">
<!ENTITY editBookmarkTags.label "Add tags here">

71
mobile/themes/core/browser.css
View File

@ -975,21 +975,42 @@ documenttab[reload="true"] > stack > .documenttab-reload {
/* bookmark editor ------------------------------------------------------- */
#bookmark-container {
padding: @padding_normal@; /* core spacing */
background: rgb(94,97,102);
-moz-box-align: center;
-moz-box-pack: center;
background-color: rgba(0,0,0,.6);
padding: 0;
}
#bookmark-dialog {
margin: @margin_xxxnormal@ !important;
border: @border_width_small@ solid white;
border-radius: @border_radius_normal@;
box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
}
#bookmark-form {
padding: @padding_normal@; /* core spacing */
padding: @padding_xxxnormal@;
}
#bookmark-form-title {
font-size: @font_xnormal@;
padding-top: @padding_large@;
-moz-box-align: center;
-moz-box-pack: center;
}
#bookmark-form-line {
border-bottom: @border_width_small@ solid white;
margin: @margin_small@ 3em 0 3em;
height: @padding_normal@ !important;
}
#bookmark-form .bookmark-controls {
display: none;
}
#bookmark-image {
list-style-image: url("images/star-40.png");
#bookmark-form-buttons {
background-color: lightgray;
}
/* Identity popup -------------------------------------------------------- */
@ -1558,7 +1579,7 @@ pageaction:not([image]) > hbox >.pageaction-image {
#appmenu > .appmenu-button .toolbarbutton-text {
display: block !important;
font-size: @appmenu_font@ !important;
font-size: @font_snormal@ !important;
}
#appmenu > .appmenu-button .toolbarbutton-icon {
@ -1588,9 +1609,20 @@ pageaction:not([image]) > hbox >.pageaction-image {
}
/* Sync setup ------------------------------------------------------------- */
.syncsetup-page {
padding: @padding_large@;
background-color: #000;
#syncsetup-container {
background-color: rgba(0,0,0,.6);
padding: 0;
}
#syncsetup-dialog {
margin: @margin_xxxnormal@ !important;
border: @border_width_large@ solid white;
border-radius: @border_radius_normal@;
box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
}
.syncsetup-scrollbox {
padding: @padding_xxxnormal@;
}
.syncsetup-center {
@ -1598,12 +1630,29 @@ pageaction:not([image]) > hbox >.pageaction-image {
}
.syncsetup-title {
font-size: @font_xnormal@;
padding-top: @padding_large@;
-moz-box-align: center;
-moz-box-pack: center;
}
.syncsetup-line {
border-bottom: @border_width_small@ solid white;
margin: @margin_small@ 3em 0 3em;
height: @padding_normal@ !important;
}
.syncsetup-desc {
font-size: @font_snormal@;
}
.syncsetup-buttons {
background-color: lightgray;
}
.syncsetup-code {
color: #fff;
background-color: rgb(94,97,102);
color: #000;
background-color: #fff;
border-radius: @border_radius_normal@;
font-size: @font_xlarge@ !important;
padding: 0.2em 0.4em;

6
mobile/themes/core/defines.inc
View File

@ -2,7 +2,9 @@
%ifdef ANDROID
%define font_xlarge 5.08mozmm
%define font_xnormal 2.75mozmm
%define font_normal 2.54mozmm
%define font_snormal 2.33mozmm
%define font_small 1.91mozmm
%define font_xsmall 1.69mozmm
%define font_tiny 1.48mozmm
@ -78,12 +80,13 @@
%define autocompleteresult_padding 0.53mozmm
%define appmenu_font 2.33mozmm
%define appmenu_portrait_height 21.17mozmm
%define appmenu_button_height 10.48mozmm
%else
%define font_xlarge 48px
%define font_xnormal 26px
%define font_normal 24px
%define font_snormal 22px
%define font_small 18px
%define font_xsmall 16px
%define font_tiny 14px
@ -159,7 +162,6 @@
%define autocompleteresult_padding 5px
%define appmenu_font 22px
%define appmenu_portrait_height 200px
%define appmenu_button_height 99px
%endif

BIN
mobile/themes/core/images/star-40.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

1
mobile/themes/core/jar.mn
View File

@ -44,7 +44,6 @@ chrome.jar:
skin/images/dropmarker-hdpi.png (images/dropmarker-hdpi.png)
skin/images/ratings-18.png (images/ratings-18.png)
skin/images/favicon-default-30.png (images/favicon-default-30.png)
skin/images/star-40.png (images/star-40.png)
skin/images/endcap-default-bg.png (images/endcap-default-bg.png)
skin/images/endcap-active-bg.png (images/endcap-active-bg.png)
skin/images/endcap-ev-default-bg.png (images/endcap-ev-default-bg.png)