Design tool: New from Source

[Jet Villegas]

Hello Dev Tools:

A feature I've always wanted to see in web authoring tools is a "New from
Source" menu item next to Tools > WebDev > Page Source. It would be very
useful for sketches, comps, testing, and other web design workflow gaps.
Existing authoring tools lack the preview fidelity that only a browser
could render.

What it does:

1. A new virtual HTML file is created in memory with the contents of the
Source page.

2. The user edits the HTML text within the browser's editor window--all URI
links are resolved relative to the Source file's URL. The user could also
copy that text for editing in their own text editor and paste it back later.

3. A "preview " button shows the edited file in context as though it was
already on the server (no actual uploading occurs--the browser handles the
resolution locally.)

I know there's lots of problems to solve here re: UX, security, rendering,
etc. but it would be so cool :)

Would the dev tools team be interested in implementing it? I can help with
the Rendering bits.

Thanks,

--Jet

[David Bruant]

What you're asking for is very close to what X-ray googles provides.
https://webmaker.org/goggles

What more/different would you want?

Thanks,

David

[Brian Grinstead]

Cool idea - it reminds me of a conversation from last year:
https://groups.google.com/forum/#!searchin/mozilla.dev.developer-tools/dom/mozilla.dev.developer-tools/0bbkEFQYmuY/hLW39ObUxL0J.

It sounds like there is some overlap, except that in this case we
wouldn't try to save external resources to disk and rewrite the URIs to
match, but instead change the resolution of the existing links on the page.

A few of questions regarding the use case for such a tool:

1) Is it important/useful to save the current state of the page, or just
start from the page source?
2) Is it important to include and run JS from the original page on the
virtual page?
3) Would you want this virtual page to download fresh copies of
stylesheets from the network so it would be updated if the remote
sources changed?

I like the idea of downloading a copy of the page on disk (including all
resources), since then the 'preview' button could just load an iframe
with the file URI. Also, if someone wanted to open up their normal text
editor or other tools on the files they could do so. But, I'm not sure
of the full complexity of either approach and depending on desired usage
one may be better than the other.

Brian

On 2/27/15 12:31 PM, Jet Villegas wrote:
> Hello Dev Tools:
>
> A feature I've always wanted to see in web authoring tools is a "New from
> Source" menu item next to Tools > WebDev > Page Source. It would be very
> useful for sketches, comps, testing, and other web design workflow gaps.
> Existing authoring tools lack the preview fidelity that only a browser
> could render.
>
> What it does:
>
> 1. A new virtual HTML file is created in memory with the contents of the
> Source page.
>
> 2. The user edits the HTML text within the browser's editor window--all URI
> links are resolved relative to the Source file's URL. The user could also
> copy that text for editing in their own text editor and paste it back later.
>
> 3. A "preview " button shows the edited file in context as though it was
> already on the server (no actual uploading occurs--the browser handles the
> resolution locally.)
>
> I know there's lots of problems to solve here re: UX, security, rendering,
> etc. but it would be so cool :)
>
> Would the dev tools team be interested in implementing it? I can help with
> the Rendering bits.
>

> Thanks,
>
> --Jet
> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools

[Jet Villegas]

X-ray goggles provides a WYSIWYG inspect/edit/publish workflow which is
more similar to tools like Deamweaver. The feature request is to
edit/preview the source HTML directly as though it's already uploaded. The
source could then be uploaded as-is (ie. no publish step like in Goggles.)
Goggles does provide the URL resolution needed so that's good to know.

--Jet

On Fri, Feb 27, 2015 at 1:26 PM, David Bruant <brua...@gmail.com> wrote:

> Le 27/02/2015 21:31, Jet Villegas a écrit :
>

> Hello Dev Tools:
>>
>> A feature I've always wanted to see in web authoring tools is a "New from
>> Source" menu item next to Tools > WebDev > Page Source. It would be very
>> useful for sketches, comps, testing, and other web design workflow gaps.
>> Existing authoring tools lack the preview fidelity that only a browser
>> could render.
>>
>> What it does:
>>
>> 1. A new virtual HTML file is created in memory with the contents of the
>> Source page.
>>
>> 2. The user edits the HTML text within the browser's editor window--all
>> URI
>> links are resolved relative to the Source file's URL. The user could also
>> copy that text for editing in their own text editor and paste it back
>> later.
>>
>> 3. A "preview " button shows the edited file in context as though it was
>> already on the server (no actual uploading occurs--the browser handles the
>> resolution locally.)
>>
>> I know there's lots of problems to solve here re: UX, security, rendering,
>> etc. but it would be so cool :)
>>
>> Would the dev tools team be interested in implementing it? I can help with
>> the Rendering bits.
>>

[Mike Taylor]

Hi Jet,

On 2/27/15 15:44, Jet Villegas wrote:
> The feature request is to
> edit/preview the source HTML directly as though it's already uploaded.

This reminds me of (Presto) Opera's "view-source", which by default was
basically an editor which allowed you to tweak and apply changes. See
the "Apply Changes" button @ https://cloudup.com/cIxqAVJSJYp.

I used this all the time, FWIW. It was super handy.

--
Mike Taylor
Web Compat, Mozilla

[Jet Villegas]

I've seen this Opera feature too. Was it only in Presto and not the Blink
version? I'll have to take another look.

[Mike Taylor]

On 2/27/15 17:41, Jet Villegas wrote:
> I've seen this Opera feature too. Was it only in Presto and not the
> Blink version? I'll have to take another look.

Yeah, Presto-only.

[Panos Astithas]

This could be done in bug 1088785, which is about moving view-source to a
tab instead of a separate window. IIRC the main problem with using an HTML
editor in the markup panel was that live-editing HTML caused headaches from
having to handle the parser errors while typing. Using a different tab
removes the expectation of live updates, or at least makes
apply-on-tab-switch a reasonable UX.

Panos

[Jet Villegas]

Interesting! I didn't realize that view-source:%url is how ctrl-U does it.
That opens up the potential for specifying the remote URL context for the
editable view. Perhaps via edit-source:%url

--Jet