Bug 869437 - Create individual selection overlays for chrome and content. r=mbrubeck

This commit is contained in:
Jim Mathies 2013-06-17 07:46:51 -05:00
parent a6a1c9a285
commit 7cb65eb288
5 changed files with 52 additions and 65 deletions

View File

@ -10,9 +10,9 @@
<html:div flex="1" class="selection-overlay-inner window-width window-height" anonid="selection-overlay-inner">
<xul:stack>
<html:div anonid="selection-overlay-debug" class="window-width window-height"/>
<xul:toolbarbutton id="selectionhandle-mark1" label="^" left="10" top="10" hidden="true"/>
<xul:toolbarbutton id="selectionhandle-mark2" label="^" left="10" top="10" hidden="true"/>
<xul:toolbarbutton id="selectionhandle-mark3" label="^" left="10" top="10" hidden="true"/>
<xul:toolbarbutton anonid="selectionhandle-mark1" class="selectionhandle" label="^" left="10" top="10" hidden="true"/>
<xul:toolbarbutton anonid="selectionhandle-mark2" class="selectionhandle" label="^" left="10" top="10" hidden="true"/>
<xul:toolbarbutton anonid="selectionhandle-mark3" class="selectionhandle" label="^" left="10" top="10" hidden="true"/>
</xul:stack>
</html:div>
</content>
@ -62,18 +62,11 @@
</getter>
</property>
<method name="init">
<method name="getMarker">
<parameter name="aMarkerId"/>
<body>
<![CDATA[
this.enabled = true;
]]>
</body>
</method>
<method name="shutdown">
<body>
<![CDATA[
this.enabled = false;
return document.getAnonymousElementByAttribute(this, "anonid", aMarkerId);
]]>
</body>
</method>

View File

@ -89,7 +89,8 @@ setting[type="menulist"] {
-moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-multi");
}
#selection-overlay {
#chrome-selection-overlay,
#content-selection-overlay {
-moz-binding: url("chrome://browser/content/bindings/selectionoverlay.xml#selection-binding");
}

View File

@ -235,7 +235,11 @@
<deck id="browsers" flex="1" observes="bcast_preciseInput"/>
<box id="vertical-scroller" class="scroller" orient="vertical" end="0" top="0"/>
<box id="horizontal-scroller" class="scroller" orient="horizontal" left="0" bottom="0"/>
</stack>
<!-- Content touch selection overlay -->
<!-- onclick addresses dom bug 835175 -->
<box onclick="false" class="selection-overlay-hidden" id="content-selection-overlay"/>
</stack>
</vbox>
<!-- popup for content navigator helper -->
@ -360,9 +364,9 @@
</toolbar>
</appbar>
<!-- Selection overlay - this should be below any content that can have selectable text -->
<!-- onclick addresses dom bug 835175, str in bug 832957 -->
<box onclick="false" class="selection-overlay-hidden" id="selection-overlay"/>
<!-- Chrome touch selection overlay -->
<!-- onclick addresses dom bug 835175 -->
<box onclick="false" class="selection-overlay-hidden" id="chrome-selection-overlay"/>
<autoscroller class="autoscroller" id="autoscrollerid"/>

View File

@ -13,14 +13,16 @@
* padding top: 6
*/
XPCOMUtils.defineLazyModuleGetter(this, "Promise", "resource://gre/modules/commonjs/sdk/core/promise.js");
// Y axis scroll distance that will disable this module and cancel selection
const kDisableOnScrollDistance = 25;
// Drag hysteresis programmed into monocle drag moves
const kDragHysteresisDistance = 10;
// selection layer id returned from SelectionHandlerUI's layerMode.
const kChromeLayer = 1;
const kContentLayer = 2;
/*
* Markers
*/
@ -91,7 +93,7 @@ function Marker(aParent, aTag, aElementId, xPos, yPos) {
this._xPos = xPos;
this._yPos = yPos;
this._selectionHelperUI = aParent;
this._element = document.getElementById(aElementId);
this._element = aParent.overlay.getMarker(aElementId);
this._elementId = aElementId;
// These get picked in input.js and receives drag input
this._element.customDragger = new MarkerDragger(this);
@ -282,7 +284,12 @@ var SelectionHelperUI = {
},
get overlay() {
return document.getElementById("selection-overlay");
return document.getElementById(this.layerMode == kChromeLayer ?
"chrome-selection-overlay" : "content-selection-overlay");
},
get layerMode() {
return kContentLayer;
},
/*
@ -507,8 +514,6 @@ var SelectionHelperUI = {
window.addEventListener("touchstart", this, true);
window.addEventListener("touchend", this, true);
window.addEventListener("touchmove", this, true);
window.addEventListener("MozContextUIShow", this, true);
window.addEventListener("MozContextUIDismiss", this, true);
window.addEventListener("MozPrecisePointer", this, true);
window.addEventListener("MozDeckOffsetChanging", this, true);
window.addEventListener("MozDeckOffsetChanged", this, true);
@ -533,8 +538,6 @@ var SelectionHelperUI = {
window.removeEventListener("touchstart", this, true);
window.removeEventListener("touchend", this, true);
window.removeEventListener("touchmove", this, true);
window.removeEventListener("MozContextUIShow", this, true);
window.removeEventListener("MozContextUIDismiss", this, true);
window.removeEventListener("MozPrecisePointer", this, true);
window.removeEventListener("MozDeckOffsetChanging", this, true);
window.removeEventListener("MozDeckOffsetChanged", this, true);
@ -743,7 +746,7 @@ var SelectionHelperUI = {
/*
* _setupMonocleIdArray
*
* Helper for initing the array of monocle ids.
* Helper for initing the array of monocle anon ids.
*/
_setupMonocleIdArray: function _setupMonocleIdArray() {
this._selectionMarkIds = ["selectionhandle-mark1",
@ -846,13 +849,6 @@ var SelectionHelperUI = {
this._sendAsyncMessage("Browser:SelectionUpdate", {});
},
_onContextUIVisibilityEvent: function _onContextUIVisibilityEvent(aType) {
// Manage display of monocles when the context ui is displayed.
if (!this.isActive)
return;
this.overlay.hidden = (aType == "MozContextUIShow");
},
/*
* _onDeckOffsetChanging - fired by ContentAreaObserver before the browser
* deck is shifted for form input access in response to a soft keyboard
@ -1008,11 +1004,6 @@ var SelectionHelperUI = {
this.closeEditSession(true);
break;
case "MozContextUIShow":
case "MozContextUIDismiss":
this._onContextUIVisibilityEvent(aEvent.type);
break;
case "MozDeckOffsetChanging":
this._onDeckOffsetChanging(aEvent);
break;

View File

@ -201,6 +201,23 @@ documenttab[selected] .documenttab-selection {
display: none;
}
#tabs-controls {
margin-top: @metro_spacing_small@;
-moz-box-align: start;
-moz-box-orient: vertical;
padding: 0 @metro_spacing_small@;
}
#tabs-controls toolbarbutton {
margin: @toolbar_vertical_spacing@ @toolbar_horizontal_spacing@;
}
#newtab-button {
list-style-image: url("images/newtab-default.png");
}
/* Selection overlay and monocles ----------------------------------------------- */
#page,
.selection-overlay {
-moz-stack-sizing: ignore;
@ -218,19 +235,13 @@ documenttab[selected] .documenttab-selection {
display: none;
}
#tabs-controls {
margin-top: @metro_spacing_small@;
-moz-box-align: start;
-moz-box-orient: vertical;
padding: 0 @metro_spacing_small@;
}
#tabs-controls toolbarbutton {
margin: @toolbar_vertical_spacing@ @toolbar_horizontal_spacing@;
}
#newtab-button {
list-style-image: url("images/newtab-default.png");
.selectionhandle {
list-style-image: url("chrome://browser/skin/images/selection-monocle.png");
border: 0px solid gray;
padding: 0px;
margin-top: -30px;
margin-left: -18px;
pointer-events: auto;
}
/* Toolbar ------------------------------------------------------------------ */
@ -1007,19 +1018,6 @@ setting[type="radio"] > vbox {
overflow: hidden;
}
/* Text selection handles */
#selectionhandle-mark1,
#selectionhandle-mark2,
#selectionhandle-mark3 {
list-style-image: url("chrome://browser/skin/images/selection-monocle.png");
border: 0px solid gray;
padding: 0px;
margin-top: -30px;
margin-left: -18px;
pointer-events: auto;
}
/* :::::: autoscroll popup ::::: */
.autoscroller {