This patch will apply the grid layout to the toolbar.
If devtools's width is narrow, we expected that devtool display chevron and the
controls elements only(i.e. chevron and meatball and close button).
In order to display these button, a wrapper of toolbar will use grid layout.
Basically, this patch define grid columns as follow:
------------------------------------------------
| Picker | tooltabs | commands | controls |
| auto | 26px ~ 1fr | auto | max-content|
------------------------------------------------
We can disable the picker and command buttons, in this case, a toolbar will
stretch the tooltabs width by using grid-column-start/end.
MozReview-Commit-ID: ByY2qt2xhAg
--HG--
extra : rebase_source : c86b30acbfc32172eceea365e84ed03d717d5345
This is only about adding an editor in the JsTerm and making
sure we can still execute input strings.
The styles should stay the same, except that now we don't have
to do the computation for the input height, since they're already
done in CodeMirror. In-line style, history navigation and
autocompletion will be handled in separate bugs.
The creation of the editor might be done outside of the JsTerm in
the future so we can re-use it to syntax highlight Evaluation input
in the output; but not in this bug since it would need to move
jsterm.execute as well.
MozReview-Commit-ID: 75TmF055mkp
--HG--
extra : rebase_source : ec7edb17ffb13c757ed51e03a1174399ea2bcbde
- Show font family name as prominent identifier.
- Show font name underneath family in a smaller type.
- Update test to match correct strings.
MozReview-Commit-ID: AzhdirGXHJk
--HG--
extra : rebase_source : 2985add2ba84b1abc9aac2d347d53ba43fdf5d84
Webconsole has two close buttons. (split console and sidebar)
This patch will apply photon icon color fill to these buttons.
MozReview-Commit-ID: EWYxQrHFhJ6
--HG--
extra : rebase_source : 5ef87b48b2e856343fafc492c9c97d80f21977e1
Previous part 1 patch will display close button on the right of a primary
element of filter bar. However, a filtered message element will display in the
right of a close button.
So this patch will make the filtered message element to be displayed in a new
line if devtools width is narrow. This patch uses "media query" as the trigger
of replacement, this media query width size is based on Greek language string
since a localized string of this filtered message is longer than other localized
strings.
MozReview-Commit-ID: Ledhrw5I4S5
--HG--
extra : rebase_source : fdf4e6af594f7912f456b8fe7660819d30315cdf
This patch will display the button of closing split console. The FilterBar
should display this close button if target is split console.
MozReview-Commit-ID: 29VjaqHdh2S
--HG--
extra : rebase_source : 443cfb99f8a7454273b058c9614a0906c38681a7
- Add Redux setup for storing CSS font property values
- Refactor FontAxis component into generalized FontPropertyValue to
support values with units.
- Generalized CSS selectors to apply to UI other than for font axes
MozReview-Commit-ID: 52LAmhfyxuV
--HG--
extra : rebase_source : c5cc4b1b781a0106213182e164250bc4322c44d3
Switching the body to a grid and adding some constraints seems
to do nicely the trick.
This was tested with the STR in this bug as well as with repeatable
messages and plain messages.
MozReview-Commit-ID: GI1tugaomFv
--HG--
extra : rebase_source : 73a5377575a6c529224bdf032f17547287853895
- Extract font name and origin (URL + copy URL) into FontMeta component.
- Reuse FontMeta in font overview and font editor.
- Tweak CSS for improved spacing and flex-grow behaviour.
MozReview-Commit-ID: 4W2E48r8Yps
--HG--
extra : rebase_source : 5159468f943cb505fd1ca9aeb50954fbb690af07
This is confusing for some people and does not bring
much value. Let's remove it both in the frame component
and in the Error rep stacktrace.
MozReview-Commit-ID: Jy1jEJG4pRa
--HG--
extra : rebase_source : ee266d2c26be9733d9ec6dbddcb8e61a256bf9c5
This margin only appears to be needed on Mac hence this patch makes the setting
apply only on OSX. It also switches to using logical properties so that the
margin appears in the correct place in RTL builds.
MozReview-Commit-ID: Chp1HJcretg
--HG--
extra : rebase_source : ef16f6175628be864b002ddf8d3a318570e39942
If the browser ui direction is RTL, this patch will rotate the chevron menu
icon of devtool 180 degree.
MozReview-Commit-ID: 72vLKnF1FkF
--HG--
extra : rebase_source : f7905e66da57eaba5e03e850f6305a3d4ed534f5
Basic icon to display something while we wait for a better icon to replace
it.
MozReview-Commit-ID: 2BT6jqLrd95
--HG--
extra : rebase_source : f51e5dff37694442becd83341fca03a94f5ccc15
This patch removed the border and outline from focus style of tool tab and make
its style to be same as hover styles.
MozReview-Commit-ID: KD97vYiyUX2
--HG--
extra : rebase_source : 83fd2d5b743ac8488c711e98e316a39e9c8be30f
Basic icon to display something while we wait for a better icon to replace
it.
MozReview-Commit-ID: 2BT6jqLrd95
--HG--
extra : rebase_source : a8d725f2f1bd49fdb2c2418b19baa0ac3b54afd0
Basic icon to display something while we wait for a better icon to replace
it.
MozReview-Commit-ID: 2BT6jqLrd95
--HG--
extra : rebase_source : a8d725f2f1bd49fdb2c2418b19baa0ac3b54afd0