Modify the devtools autocomplete-popup to rely on a HTMLTooltip instance
instead of a XUL panel.
Other than the straightforward migration to HTML, the main difference with
the new implementation is that the richlistbox has now been replace with a
simple HTML list element. The former XUL widget used to be able to take the
focus from the input it was linked to.
This is no longer the case. Most autocomplete users were always keeping the
focus in the input, except for the inspector-search, which was moving the
focus back and forth between the input and the autocomplete's richlistbox.
Now the focus is always in the input. A practical example to illustrate how
this changes the UX: before when the user had the focus on the first element
of the list, pressing "DOWN" would keep the element selected but visually move
the focus in the input. Now the selection simply cycles to the next item.
Even though this introduces a difference in behaviour compared to the previous
implementation, it makes the inspector search UX consistent with the other
autocomplete widgets used in devtools.
Another difference is about the display for the inspector-search. The position
of the autocomplete popup used to be above the input. This is now impossible to
achieve because the search input is at the top of the toolbox and the HTML tooltip
can not exceed the limits of the toolbox.
For this #2 issue, either we manage to use XUL panel wrappers, in which case, the
autocomplete will be displayed as it used to. Or we can invert the order in which
items are inserted and explicitly ask for the autocomplete to be displayed below the
input. I prefered not to change this here in order to make the code change easier to
understand, but it should be addressed in a follow-up.
MozReview-Commit-ID: jH9aXm9Jvz
--HG--
extra : rebase_source : 57267be0d214ed807f3152838c4123400ab7b7e3
The HTMLTooltip supports an additional configuration parameter "useXulWrapper".
When set to true, if the tooltip is displayed in a XUL document, a XUL panel
will be used as an additional container for the tooltip.
This allows the tooltip to be displayed anywhere on the screen and can be
useful when displayed in small toolboxes.
MozReview-Commit-ID: 63kv4vAeW5R
--HG--
extra : source : fc4d902ff01ee92a5b6742d44286e5feaaba1500
extra : intermediate-source : 126f43ff3be5505920946a77ad82401c6bbaebef
extra : histedit_source : 863888c014723f7e95742079395497ba1a30aa36%2C13ba9aaf80acb96c587739c767c20a8f0f6a9a5a
Prevents two breadcrumb arrows from appearing because the light-theme breadcrumb
is a background while the firebug-theme one is a CSS generated element
MozReview-Commit-ID: 20DEHid7lOP
--HG--
extra : transplant_source : kh%A0%F2%14%0B%FF%F3%BC%A6%28%1E%A39%9E%F2F%04%15%7B
This removes the unnecessary setting of c-basic-offset from all
python-mode files.
This was automatically generated using
perl -pi -e 's/; *c-basic-offset: *[0-9]+//'
... on the affected files.
The bulk of these files are moz.build files but there a few others as
well.
MozReview-Commit-ID: 2pPf3DEiZqx
--HG--
extra : rebase_source : 0a7dcac80b924174a2c429b093791148ea6ac204
The autocomplete popup defines its width by finding the longest label
to display and then applying a "width:Xch" to its content, where X is
the length of the longest label + 3.
In order to support this, the HTMLTooltip setContent() methods allows to
use width: "auto" (which also becomes the default value). In this case,
the HTMLTooltip show() method will automatically compute the preferred
width for the tooltip. It will first calculate the tooltip height, then
measure the width of the tooltip for this computed height and use it as
the preferred width.
MozReview-Commit-ID: KDxZNB3KDdR
--HG--
extra : rebase_source : 8ceedd73434551050f8d63cbf03d66870e275b03
Scoped stylesheets cannot make reference to an element outside of the scope in any
part of a selector. This means a selector such as ".theme-light .scoped-element"
can not work in a scoped stylesheet.
Theme specific rules have been removed from the filter&bezier tooltip css. Instead
CSS variables defined for each theme are used in the scoped stylesheets.
MozReview-Commit-ID: 7apGbPc0CYy
--HG--
extra : rebase_source : e71f33b395b0a6d21bb4352507a3947ed2b81766
extra : amend_source : 55e0c78a006fd2b580d6d0e345c950a4e7ab472a
extra : source : 0be81bdc2e08b658f91dc05443ab15ced91025f2
The rule-view and computed-view now have tabindex="-1" on their containers
so that clicking anywhere in the views will focus them, so will tabbing
through the inspector to them.
This means that any user activity on them ends up focusing them (or any
focusable element in them, which was the case before anyway).
Because of this, pressing ctrl+F (or any other shortcut) will work correctly:
the _onShortcut callback in each of these views will detect that the active
element is the view itself and will therefore handle the event.
Note that the container element that has the tabindex attribute is a child of
the main container element that is scrollable (overflow:auto). That is
because if we use only one element for both, then grabbing the scrollbar will
focus the element and blur any field that's currently focused.
MozReview-Commit-ID: 97a1tpdlbmZ
--HG--
extra : rebase_source : 607f025a0f06064180a9cb3e72129e3c734598c6
This moves the eyedropper button from the toolbar into the inspector,
therefore the old eyedropper command isn't needed anymore,
or at least not as it was.
The button in the inspector simply uses the pickColorFromPage inspector
actor method.
And to preserve a eyedropper gcli command, a new simpler one was added.
MozReview-Commit-ID: B1yr1EqLFBD
--HG--
extra : rebase_source : 47c2effe193f4d1a64a8d16ea3609ff5ae1f793b
For now this is a 1 to 1 migration of the existing Tooltip
helper method from XUL to HTML.
MozReview-Commit-ID: 9YiJLgibV9h
--HG--
extra : rebase_source : af428055060a105d270d70b1e4694717e0869b2b
extra : source : d03cca0c048c9ba1f3062519650e37ae986d4bc7
With this changeset the tooltip's effective height can be smaller than
the height specified when calling setContent. If the tooltip content is
dynamic, this allows to display a small tooltip frame if the content is
collapsed, and a bigger tooltip frame when it is expanded.
MozReview-Commit-ID: 44vA0Rdz62m
--HG--
extra : rebase_source : 0e796f611e3462579f6e84a25671e5d44ed2314d
extra : source : 8583ea99abef8f25a1822178bab823f9fb7f2d01
Tooltip styles are scattered between common.css and panel-specific CSS
files (e.g. inspector.css). For the HTML tooltip, the panel specific CSS
files will not be applied since the tooltip container is appended to the
devtools top window.
This changeset creates a new tooltips.css file which is loaded by default
with devtools themes.
MozReview-Commit-ID: BnoRi9gLfD5
--HG--
extra : rebase_source : 3fee4731f65563c4b61371e3a3c51fb797d1a12b
extra : source : bd8878532e1f370fb49e0c50de0b2da267f7de8a
The XUL tabpanel can no longer receive userfocus to avoid scrollbars
stealing the focus. Editors are using the blur event to destroy
themselves, which was no longer working if a user click ended up on
the tabpanel element.
Add a wrapper inside the layout view panel taking
100% width and height to make sure clicks performed outside of the layout
container will trigger a blur event on a focused editor.
MozReview-Commit-ID: JmZluQ6LzFl
--HG--
extra : rebase_source : d705512a5898e392abceb72e70f45989ee0bf0f1
Unmatched rules created via the "Add New Rule" button was wrongfully make other rules look not applied.
Fix returned isMatching boolean in PageStyleActor's function when the evaluated rule has multiple selectors.
Add CSS rules to make look unmatched rules' properties unmatched, like the rule's selector.
Add tests to make sur we handle unmatch rule selectors right.
MozReview-Commit-ID: FPQ7XJoa7Ba
--HG--
extra : transplant_source : %C4%F1sa%ED4%E6%8CV%8F/nK%E4%FBA%2C%A7%F5%0F
This patch was generated by the command:
find . -name "*.css" -exec sed -i -f mozpropsub {} \;
in the root of a mozilla-central tree, with the file mozpropsub
containing the contents:
s/-moz-padding-end\>/padding-inline-end/g
s/-moz-padding-start\>/padding-inline-start/g
s/-moz-margin-end\>/margin-inline-end/g
s/-moz-margin-start\>/margin-inline-start/g
s/-moz-border-end\>/border-inline-end/g
s/-moz-border-end-color\>/border-inline-end-color/g
s/-moz-border-end-style\>/border-inline-end-style/g
s/-moz-border-end-width\>/border-inline-end-width/g
s/-moz-border-start\>/border-inline-start/g
s/-moz-border-start-color\>/border-inline-start-color/g
s/-moz-border-start-style\>/border-inline-start-style/g
s/-moz-border-start-width\>/border-inline-start-width/g
While I didn't manually review all the changes, I did review the list of
files, and manually reviewed the changes in the files that I thought
were more interesting.
Note that there are a few tests that should be fixed up as well, but
I'll do that in a later patch.
MozReview-Commit-ID: EiQTuuV0MNQ
First implementation of HTML based tooltip to be used in devtools
instead of XUL panels. API is similar to the current API of
Tooltip.js
MozReview-Commit-ID: 8njiKBubLSj
--HG--
extra : rebase_source : 930bf7aef48e6c16d7a560d261e2bfd06fe02a63
extra : source : 09874a1e6f2c942a1f9de827fedd14da7e67a6e5
Usability changes to the ruleview autocomplete:
- max suggestions is now capped to 500 to make sure as many suggestions as possible
as possible are displayed
- vendor-prefixed properties are moved to the end of the list
- !important is no longer the first suggested item
MozReview-Commit-ID: AOfHyqS3n8s
--HG--
extra : rebase_source : 5a4842974672bebc7427a546b4e4014201147465
extra : histedit_source : 0c008a8e7aedb60c2df0774977e54074702d555d
Though, if the element has pseudo-elements, and thus can be expanded, show
the closing tag when the void element is expanded.
MozReview-Commit-ID: 7UMMlVjYqLX
