화이트 노드 제거

이것은 저의 첫 번째 오픈 소스이자 hacktoberfest 기여입니다. 시작할 수있는 문제를 찾기 전에 매우 긴장했습니다. 많은 리포지토리와 문제를 탐색한 후 이 문제를 해결하기로 결정했습니다.

프로젝트

프로젝트 이름은 refined-github 입니다. 세련된 github는 브라우저에서 GitHub의 모양과 느낌을 향상시키는 웹 확장입니다. GitHub 인터페이스를 단순화하고 한 번의 클릭 병합 충돌 해결사 추가, 모든 PR 변경 사항을 되돌리는 버튼 등과 같은 유용한 기능을 추가합니다.

문제

이 프로젝트는 130개 이상의 공개 문제와 10개의 PR로 활발하게 개발 및 유지 관리됩니다. 복사 버튼 뒤에 아무 것도 없을 때 발생하는 호버의 화이트 노드 위에 원하지 않는 밑줄을 표시하는 문제(#4871) 작업을 선택합니다(자세한 내용은 그림 참조).


이것이 바로 지금의 방식입니다. 호버에서 원하지 않는 밑줄을 확인하십시오.


실제로는 이렇게 되어야 합니다.

일하기 시작

저장소를 포크한 다음 복제했습니다. 주로 웹 확장을 로컬에서 시작하고 테스트하는 방법을 알려주는 공헌.md 파일의 지침을 따랐습니다. 그런 다음 브랜치를 만들고 솔루션 작업을 시작했습니다.

솔루션 찾기

전체 코드 추가/제거는 많지 않았지만, 이 문제를 해결하는 데는 저와 프로젝트 유지 관리자 간의 상당한 논의가 필요했습니다. 의도하지 않게 생성된 whiteNode를 제거하기 어려웠기 때문에 생성되지 않도록 수정해야 했습니다. 온라인에서 조사하고 프로젝트 관리자와 토론한 후 CSS 속성을 수정하는 것이 도움이 될 수 있다는 것을 알아냈습니다.

/* Remove the underline on PR filename copy button hover #4871 */
.file-header .file-info clipboard-copy {
    display: inline-block;
}

주요 솔루션은 이것이 새로운 whiteNode를 생성하는 것을 허용하지 않는 것입니다. 나중에 이 CSS 속성을 추가하여 영향을 받는 다른 코드를 수정했고 문제가 해결되었습니다.

풀 리퀘스트

그런 다음 내 pull request을 검토할 수 있도록 준비했으며 검토를 거쳐 프로젝트의 주요 분기에 병합되었습니다. 수정된 코드는 현재 라이브입니다!!