Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Support Quick Docs (Web Platform Docs) in HTML #10036

Closed
wants to merge 18 commits into from

Conversation

marcelgerber
Copy link
Contributor

Enables Quick Docs for HTML.
Data is still from Web Platform Docs, while HTML data is in html.json and CSS data in css.json.

As there's docs for both tags and attributes, the behaviour is different based on the cursor position.

  • If the cursor's on a (supported) tag like div, docs for the tag will be shown.
  • If the cursor's on a (supported) attribute like tag (but not on its value!), docs for the attribute will be shown.
  • If the cursor's on a unsupported attribute, docs for the tag will be shown (if supported).

Also, there's a new fullscreen-summary class applied when there's only a summary to display and nothing else (this can happen for CSS as well, but only for very few properties). But HTML docs only consist of a summary and thus, it would look odd if it was only half-screen.
Also, the summaries are mostly only consisting of one or two lines (that's what a summary is for) and in fact, that's really short. So I guess the main benefit of Quick Docs in HTML is having the "Read more" link for most users (to get things like Examples, syntax, ... that we can't access via their API). But for some users, like for those learning HTML, even such a short summary can be really helpful.

image

For #9566.

if (propInfo.name) {
propQueue.push("css/properties/" + propInfo.name);
// remove possible vendor prefixes
propQueue.push("css/properties/" + propInfo.name.replace(/^-(webkit|moz|ms|o)-/, ""));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regex capture groups can be expensive. Is it possible to use a non-capturing group here (/^-(?:webkit|moz|ms|o)-/)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@nethip nethip self-assigned this Mar 11, 2015
@nethip
Copy link
Contributor

nethip commented Apr 3, 2015

@ryanstewart Would you mind taking a look at what this PR is doing and tell us we want this in?

<div>{{3}}some text</div>
<!-- <{{4}}div></div> -->
<div {{5}}class="{{6}}muted" {{7}}nonexistent="false"></div>
<nonexistent {{8}}nonexistent="false"></nonexistent>
</body>
</html>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a newline here

@humphd
Copy link
Contributor

humphd commented Jul 22, 2015

We're using this in Bramble, and we noticed that there's no support for img in html.json, despite the fact that it exists.

    "html/elements/i": {
      "SUMMARY": "<p>The <strong>i</strong> element indicates that the contained text is in an alternate voice, mood, or language from the surrounding text. ",
      "URL": "https://docs.webplatform.org/wiki/html/elements/i"
    },
    "html/elements/iframe": {
      "SUMMARY": "<p>The <strong>iframe</strong> element (&lt;iframe&gt;) introduces a new nested browsing context. ",
      "URL": "https://docs.webplatform.org/wiki/html/elements/iframe"
    },

The docs are at https://docs.webplatform.org/wiki/html/elements/img. If what I'm seeing in html.json is right, that file is pretty old: "DATETIME":"Thu, 27 Nov 2014 17:20:38 GMT.

@marcelgerber
Copy link
Contributor Author

Oh that's weird. The Web Platform API returns an empty summary for this and only this page ("html/elements/img":{"printouts":{"Summary":[]},"fulltext":"html/elements/img","fullurl":"//docs.webplatform.org/wiki/html/elements/img"}, part of the bloody mess from https://docs.webplatform.org/w/api.php?action=ask&format=json&query=%20%5B%5BPath%3A%3A~html/elements%2F*%5D%5D%7C%3FSummary%7Cprettyprint%3Dno%7Climit%3D1000000) @webplatform

@marcelgerber
Copy link
Contributor Author

@renoirb As you seem to be working on the Web Platform Docs, could you maybe have a look into why html/elements/img doesn't have a summary (in the API output linked above) whereas every other HTML element has one?
Thanks a lot!

@prafulVaishnav
Copy link
Contributor

@marcelgerber API return ja version summary for elements too. As we are not using it, is there any way to not get it? 3 unit tests are failing. Can you please look into that.

var jsonFile, propInfo,
propQueue = [], // priority queue of propNames to try
langId = hostEditor.getLanguageForSelection().getId(),
supportedLangs = ["css", "scss", "less", "html"],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you create separate variable for cssLike language and html language like cssSupportedLangs = ["css", "scss", "less"] and htmlSupportedLangs = ["html"]. That way it would be easy to extend for other languages in future.

@Denisov21
Copy link
Contributor

Denisov21 commented May 15, 2016

Hi,
Can you move this to Breackets Realise 1.7?

@marcelgerber
Copy link
Contributor Author

I'm also honestly thinking about switching over to MDN docs, as they are more recent, more thorough, and more commonly used.

What do you think, @nethip @Denisov21?

@nethip
Copy link
Contributor

nethip commented May 16, 2016

@marcelgerber 👍 for switching to MDN.

@Denisov21
Copy link
Contributor

Denisov21 commented May 16, 2016

@marcelgerber Okay for me. Good idea!

Inviato da smartphone Sony Xperia™

---- Marcel Gerber ha scritto ----

I'm also honestly thinking about switching over to MDN docs, as they are more recent, more thorough, and more commonly used.

What do you think, @nethip @Denisov21?


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

@zaggino zaggino modified the milestones: Release 1.9, Release 1.6 Aug 28, 2016
@swmitra
Copy link
Collaborator

swmitra commented Feb 16, 2017

@marcelgerber I don't see any pending action in this PR.
Do we need to update the html.json? Also is it web-scrapped from MDN html meta data?
If we can retain the committed documentation without immediate update, then I will merge this PR 😄

@humphd
Copy link
Contributor

humphd commented Feb 17, 2017

fwiw, we wrote an MDN based version of this a long time ago as a separate extension: https://github.com/mozilla/brackets/tree/master/src/extensions/extra/MDNDocs

@renoirb
Copy link

renoirb commented Feb 18, 2017 via email

@renoirb
Copy link

renoirb commented Feb 18, 2017 via email

@ficristo
Copy link
Collaborator

@humphd Nice!

Some questions, things I noticed:

  • is it a drop in replacement of Webplatform docs? If so we could rename it to try to preserve the git history
  • are the api you are using for scraping documented somewhere?
  • should we retain our unit tests? (It seems to me you don't have any)
  • IMO the app for the scraping shouldn't be part of the distribution. So we could create a new repo (maybe at brackets-userland org) or see what we can do with the build system (avoid to copy it for the dist or create a specific task or something...)

@adobe/brackets-committers any thought?

@saurabh95
Copy link
Contributor

saurabh95 commented Mar 9, 2017

@humphd I tried running the app and I was able to generate html.json and css.json, but in css.json it gives only url and summary, and currently we have the description of values supported for a particular attribute as well, so is there a way to get info about the values of a particular css attribute?

@humphd
Copy link
Contributor

humphd commented Mar 9, 2017

cc @JordanTheriault, who worked on the code originally. @saurabh95 I think what we have now is really best viewed as a prototype, and it's not been well maintained. I suspect that we could extend it to do what's needed, perhaps one of my current students would be interested in working on it. NOTE: we don't currently ship/use it in Thimble, we still use the WebPlatformDocs with the extra html patch that @marcelgerber wrote once upon a time.

@renoirb
Copy link

renoirb commented Mar 9, 2017 via email

@ficristo
Copy link
Collaborator

ficristo commented Apr 7, 2017

@saurabh95 it doesn't seem the tests were ported on the new code.
Maybe you can close this and open a new PR with the tests?

@saurabh95
Copy link
Contributor

Yeah, will do that

@ficristo
Copy link
Collaborator

ficristo commented Apr 9, 2017

These changes were merged as part of #13268 and #13285.
Closing.
Thanks @marcelgerber

@ficristo ficristo closed this Apr 9, 2017
@marcelgerber marcelgerber deleted the html-docs branch June 18, 2017 14:07
saurabh95 pushed a commit that referenced this pull request Jul 3, 2017
* add a tab with default extensions to extension manager

* implement getDefaultExtensionPath function

* enable and disable default extensions through a preference

* use the preference when attempting to load an extension

* do not allow disabling/enabling of themes

* better way to handle themes

* Upgraded version to 1.10

* Now search history is stored in preferences and user can go through the search history using key up and key down in search bar

* ALF Automation (#13179)

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Fixed a minor issue

* Addresses issue where style and script tags (and their contents) did not appear as collapsible in html mixed mode.

* Add no-unsafe-negation rule and upgrade grunt-eslint to 19.0.0

* Added a check of Untitled doc in _getNormalizedFilename and _getDenormalizedFilename

* ALF Automation (#13204)

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Replaced .border-radius with border-radius css in brackets_patterns_override.less

This fixes #13227

* Addressed review comments and also added tests

* Add jsx language ID to supported languages for JavaScript code hints

* Style code (cleanup)

* Add media queries to display search and filter below tabs

* Change padding to be consistent with other elements' padding

* Reset margin of filter dropdown and add top and bottom padding to div container

* Prevent media queries from overlapping

* Wrap search elements in a container & add responsiveness using flex

* Use flex-item mixin

* Move custom search bar width to media query

* Add GitHub Brackets OAuth token to romove CLA pull request limit

* Adding rest filter expression

* Updated webplatform links in css.json from https://docs.webplatform.org/wiki/ to http://www.webplatform.org/docs/ (#13266)

* Addresses #13264 where setting `saveFoldStates` preference to false caused the code folding extension to  stop working.

* CSS code hints in 'style' attribute value context

* Append auth token only when available in travis environment (#13272)

* Append auth token only when available in travis environment

* Remove unused var

* #7276 Live Preview highlight customization  (#12949)

* Live Preview visual customization (colors of highlight can be customized via user preferences)

* PR improvements
Remove trailing spaces, use Object.assign instead of manually iterating over remoteHighlight properties and remove quotes from object properties in default configuration of remoteHighlight

* Allow to animate transform property via transition

* Remove old vendor prefixes from transitionValues in RemoteFunctions.js

* updateConfig RemoteFunctions.js method
Enable injecting new config into remoteFunction when user changed preferences, without the need to restart the live preview session.

* Show margin and paddings in live preview.

* Do not show element if it has width or height equal to 0. A little bit of clean up

* PR improvements
calculateSize is renamed to sum. (better naming conventions are welcome). sum now takes an array as argument. It returns sum of parsed array elements, suffixed with „px”.

* Redraw via requestAnimationFrame if element has transition / animation on it.

* PR improvements.
Set experimental to false by default, if no config specified (caused the test to crash).
Minor code quality improvements, removed duplicated variables.

* Fix ESLINT errors.

* drawMarginRect and drawPaddingRect functions now calculate the require size of highlight elements instead of manaul calculations on each element.

The code is shorter and more readable. Also, it’ll be easier to move drawing functions into separate file if necessary.

* Temporary workaround for transform issue.

* Formatting improvements

* Fix font family name preference (#13279)

* Update grunt-contrib-watch to 1.0.0 and clean a bit the task (#13215)

* Scrapped QuickDocs data for css and html from MDN to css.json and html.json (#13268)

* Scrapped summary and values of css properties from MDN to css.json

* Migrated mozilla's extension of MDNDocs to Brackets with some minor changes

* Removed redundant file

* Fixed faling tests, modified a test to test HTML docs

* Renamed all WebPlatformDocs strings to MDNDocs

* Addressed review comments

* Removed the usage of array for supported languages

* Pre-release build for 1.10 (#13283)

* Fix #13274 - make Brackets margin/padding highlight work like Chrome devtools one

* Migrated missing Quick Docs Tests from PR #10036 (#13285)

* Add inputStyle preference (#13216)

* Add indentBlockComment preference. Support indent block comments on line comment command

* Whitespace removal

* AtRules, Pseudo elements and Pseudo selector code hints

* Revert "Fix #13274 - make Brackets margin/padding remoteHighlight work like Chrome one"

* Fix highlighting elements with border and transform-origin property.

* Adress review comments and restructure using different extensions

* Added Search History UI similar to Quick Open

* Minor Change

* Fixed some issues

* Check for useTabChar and correct a comment. Add some tests

* Handle multiline attribute value and add UNIT test for element styles

* Search bar is visible after pressing arrow up and down keys

* Added JSDocs and updated tests

* Zero results are not highlighted red now

* Added dropdown icon to toggle search History

* fix the extension-manager-min-width variable

* Handle SCSS mode seperately

* Use a single preference

* Add test for block comments

* Correct a test

* Check also if it is a line comment command

* Addresses #13282 which caused performance issues when navigating between large folded files.
A check is now performed to ensure we do not attempt to restore line folds for editors whose folds have already been initialised.

* removed unused variable

* Removed filtering in search dropdown

* Return 0 from _firstNotWs

* Changed url to access Japanese translated page (#13321)

* Update Codemirror to version 5.25.2

* Addressed review comments

* Removed Lint error

* add: flow-root as value for display (#13334)

* Changed Global.js to enable Native Menus for Linux

* Adding unit tests for the newly added extensions

* Fix for eslint errors

* Extract pseudo context validation as a function

* Enabled tests for Native Menus in Linux

* Editor command handlers test (#13337)

* EditorCommandHandlers-test: use testToggleLine everywhere

* EditorCommandHandlers-test: use testToggleBlock everywhere

* Now initial query is also added to searchHistory queue

* Update CSS Code Hints Properties

Add properties
– `all`
– `caret-color`
– `hanging-punctuation`
– `scroll-behavior`
– `tab-size`
– `user-select`.

Add values:
– `clone` and `slice` for `box-decoration-break`
– `contents` for `display`

Remove deprecated `padding-box` from `box-sizing`.

* Update CSS Code Hints pseudo-selectors

Add pseudo-classes
– `:default`
– `:dir()`
– `:focus-within`
– `:indeterminate`
– `:matches()`
– `:placeholder-shown`.

Add pseudo-element `::placeholder`.

Fix alphabetical order, space around `:`.

* Update more

Add
– `grid-template`
– `isolation`
– `mix-blend-mode`

Add `subgrid` for `display`

Reorder `background-blend-mode`

* Added test

* Fix :matches(), add :fullscreen

* Added check for length of dependencies also in npm-installer.js

* Translated English to Japanese Comments (#13327)

* Change parseInt to parseFloat everywhere where calculating box-model visualization to prevent glitches (#13353)

* Fixed Project Manager failing tests

* Brackets 1.10 Pre-release 2

* Fix box model regression (transform) (#13357)

* Various additions and changes to Swedish interface strings (#13404)

* Mixed changes and additions to Swedish interface strings

* One addition and one fix

* More additions and changes

* Correct one word in sv/strings.js

* Externalize Live preview hightlight settings string

* ALF Automation (#13293)

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Fix root strings (#13435)

* ALF Automation (#13434)

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Change in UUID fetching for first launches (#13419)

* Fixing Mac compilation errors

* Removing console message

* Fixing linter errors in this file.

* Add option for first highlight index in Quick Open and Search History (#13444)

* Fixed #13437

* minor change

* Passed first highlight index as paramater to QuickSearchField

* Added jsdocs

* Changed WebPlatform License to MDN License and respective strings

* Use the correct border color in multifile Replace in Files bar with dark theme

* Updated by ALF automation. (#13454)

* In writeJSON (grunt), use CRLF on Windows (#13458)

* Fixes translation error in Simplified Chinese

Fixes /issues/13416

* Enable no-redeclare to eslint (#13452)

* Added strings for translation for 1.10 Release

* minor change

* Add navigation strings.

* Updated some strings

* ALF Automation (#13471)

* Updated by ALF automation.

* Updated by ALF automation.

* Added some more translations

* Saurabh95/encoding support (#13412)

* Now encoding is passed as parameter on file read and it is used by writefile in order to preserve encoding

* UI wiring

* Code Cleanup

* Fixed failing tests

* Added warning Dialog while changing encoding

* Added some Linux specific changes

* Fixed some linting errors

* Reverted last commit

* Minor changes

* Now selected encoding is stored in state

* Fixed lint error

* Added some more encodings

* Added some more encodings

* Fixed lint errors

* Removed duplicate encodings

* Fixed failing tests

* Used externalized strings

* Addressed review comments

* Added supported encodings file

* Addressed review comments

* Addressed review comments

* More Robust UUID Handling (#13476)

* More efficient UUID Handling: We need to backing up existing uuid so that we can accurately get the new user count, as the uuid is changed now and will effect the existing users as well. Also added robust checking for shell API availability before calling the shell API and if not present handling olderUUID in a different way.

* Addressed review comments.

* Now BOM is preserved for UTF-8 files (#13477)

* Now BOM is preserved for UTF-8 files

* Added error strings for failure in encode/decode and utf-16

* Removed utf-16 from encodings list

* Addressed review comments

* fix JP translation in comment tags (#13363)

* New File and New Folder execute in project root if there's no selection (#12752)

* New File and New Folder execute in project root if there's no selection

* Add ProjectManager.getSelectedFileTreeItem

* Add function to get file tree context instead

* Polish translation update for brackets 1.10 (#13398)

* Polish translation update for brackets 1.10

* Corrected some strings in pl translation

* Added basic translation for core preferences section

* Transform some polish strings in core preferences section

* German translation (#13436)

* zh-cn (#13473)

* Update urls.js

* Create Getting Started

* Delete Getting Started

* Create index.html

* Create main.css

* Add files via upload

quick-edit.png

* Problems panel: add an icon per problem to tell which type it is (#13430)

* Sequential navigation in edit history (#13418)

* First commit - sequential navigation in edit history

* Fix lint errors

* Handle undefined history entries

* Added comments and some additional edge case handling

* Update code review comments

* Put a max navigation frame capture limit and control overflow once reached. Fix all bugs found in unit testing.

* Fix indentation issues

* Change spaces to tabs for indentation

* Fix mixed tabs and spaces

* Convert spaces to tab

* resolve mixed tabs and spaces

* Initialize variables

* Handle external file changes and discard stale frames

* Additional checks to validate the navigation frames

* Address review comments

* pre release build 3

* Fixed JS lint error (#13489)

* Fix NavigationProvider throwing errors when doc.file is missing. Fixes #13491 (#13492)

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* ALF Automation (#13474)

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Updated by ALF automation.

* Adding extra check to handle null mrof list entries (#13495)

* After changing encoding of a dirty file if user cancels the popup then encoding of file should not be changed (#13497)

* After changing encoding of a dirty file if user cancels the popup then encoding of file should not be changed

* Removed popup for dirty file encoding change

* Now doc is reloaded if the path of the file being saved is same
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.